Shannon Hochkins Shannon Hochkins - 5 months ago 28
jQuery Question

"undefined" returned when accessing some listed properties of File object

I can't seem to access the width or height keys of my object.

I'm using dropzone.js which has an event for addedFile which returns the file and the first param.

so:

var myDropzone = new Dropzone('#dropzone', {url: '/'});

myDropzone.on('addedFile', function(file) {
console.log(file);
});


The callback works just fine, in my console I see:
enter image description here

As you can see, there's clearly the height & width keys available.

myDropzone.on('addedFile', function(file) {
console.log(file.name); // returns the whole strong
console.log(file.width); // returns undefined
console.log(file['width']); // returns undefined
});


Heres a screenshot:

enter image description here

My question is, why is name available, but not width or height? Is it because they're readonly or something? If that's the case, is it even possible to access it?

Answer

The File.width property is a DropzoneJS extension and is not a part of the core File API; it is added later.

Dropzone adds data to the file object you can use when events fire. You can access file.width and file.height if it's an image..

If applicable the image size information is made available by the time the "thumbnail" event occurs. It is not guaranteed to be set before this event.

The documentation isn't very clear on this only alluding to "when the thumbnail has been generated", but such is the behavior of the source (see the createThumbnail/resize functions) - the image size is collected when the thumbnail is generated.


The initial behavior is seen because console.log (in browsers, eg. Chrome, that treat it similar to console.dir) displays the "live" object. This in turn has given enough time for the asynchronous thumbnail generation, and associated image dimension gathering, to complete before the browser displays the object's now-assgined properties in the console. (This also explains why using a timeout to read the property value works - even though such is not a reliable approach.)

On the other hand, directly accessing the file.width forces immediate evaluation of the still-not-set property, which results in undefined in the "addedFile" callback.

Comments