More fun with fineuploader, figuring out why placeholders are showing

[csdude55]

This is a continuation of my previous thread in the Javascript forum:

"Cannot read properties of undefined" in a third party script

We found the answer to the original question in that thread, so I didn't want to convolute it with this subsequent issue.

I'm using "fineuploader" (a third party script) to allow users to upload images. It seems to work just fine, but had an error in the console when loading the page for the first time. At that point sessionData would come through as undefined. Everything still worked, it just threw errors on all of the expected keys in the console.

My fix at this point is to declare sessionData as an object.

So here is the function I'm playing with now:

qq.basePrivateApi = {
 // the modification I made is the "= {}" here:
 _addCannedFile: function(sessionData = {}) {
  var self = this;

  return this._uploadData.addFile({
   uuid: sessionData.uuid,
   name: sessionData.name,
   size: sessionData.size,
   status: qq.status.UPLOAD_SUCCESSFUL,
   onBeforeStatusChange: function(id) {
    sessionData.deleteFileEndpoint && self.setDeleteFileEndpoint(sessionData.deleteFileEndpoint, id);
    sessionData.deleteFileParams && self.setDeleteFileParams(sessionData.deleteFileParams, id);

    if (sessionData.thumbnailUrl) {
     self._thumbnailUrls[id] = sessionData.thumbnailUrl;
    }

    self._netUploaded++;
    self._netUploadedOrQueued++;
   }
  });
 },
 [1100 more lines of stuff]
};

On the initial page load, there's a button that the user can click to upload new images. After they're uploaded, there's an inline thumbnail gallery for each picture.

After I declared sessionData as an object by default, though, on the initial page load I'm getting 2 placeholder images instead of an empty gallery. Which is what I don't want.

For testing I made this modification:

onBeforeStatusChange: function(id) {
 console.log('id -> ' + id);
 ...
}

and it displays twice: id -> 0 and id -> 1. I have no idea where those numbers are coming from, but the fact that there are two of them and there are two placeholders... eh? eh? LOL

My next attempt was to wrap the return statement with if (Object.values(sessionData).length > 0) { ... } else return false; so that, when sessionData is empty, the function would run but nothing would happen. Which I thought would emulate when it had an error. But alas, I still get the placeholders :-/

It's worth knowing that when I add a new image at this point, it shows up in the 2nd element position while keeping placeholders in the 0 and 1 element positions. And it doesn't appear to trigger _addCannedFile, so I don't even know what this function does.

Any other thoughts on forcing this function to act the same way that it does when it dies from errors?

[csdude55]

You all aren't going to believe this, but I fixed the problem!

The complicated solution was to go to the "addFile:" section and wrap the whole thing in if (Object.values('imgObj').length > 0) { ... }. I don't remember if I created imgObj or if it's defined in fineuploader, so you might have to change that to whatever the object name is that you're using.

But that led me to bug that messed it all up in the first place!

In the very beginning, I had defined imgObj = [];

It should have been imgObj = {};

I changed that, and it solved everything.

So about a week's worth of work boiled own to the wrong type of brackets.

I hope this helps someone in the future!