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

Question

I cannot access the width and height keys of my object.

I am using dropzone.js, which has an event for addFile that returns the file and the first parameter.

So:

var myDropzone = new Dropzone('#dropzone', {url: '/'}); myDropzone.on('addedFile', function(file) { console.log(file); }); 

The callback works very well, in my console I see:

As you can see, there are height and 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 }); 

Here is a screenshot:

My question is: why is the name available but not width or height? Is it because they just read, or something like that? If so, is it possible to access it?

Answer 1

The File.width property is an extension of DropzoneJS and is not part of the main File API ; It is added later.

Dropzone adds data to a file that you can use when events fire. You can access File.width and file.height if this is an image.

If applicable, image size information becomes available at the time of the "thumbnail" event. It cannot be installed before this event.

The documentation is not very clear in this case, if you only refer to "when the sketch was created", but this is the source behavior (see createThumbnail / resize) - the image size is collected when the sketch is created.

---

The original behavior is visible due to the fact that console.log (in browsers such as Chrome, which relate to it similarly to console.dir ) displays a "live" object. This, in turn, provided enough time to generate an asynchronous sketch and the associated image size measurement to complete before the browser displays the objects currently in the console. (This also explains why using a timeout to read the value of a property works - although this is not a reliable approach.)

On the other hand, direct access to File.width leads to an immediate evaluation of the properties of the fixed object, which results in undefined in the "addedFile" .

Answer 2

So simple that everything is clear. As user2864740 said, you need to wait for the thumbnail event. This will produce this code:

 myDropzone.on('addedFile', function(file) { myDropzone.on("thumbnail", function(file){ console.log(file); console.log(file.width); // returns width console.log(file['width']); // returns width }); }); 

You can even use it in the accept method, for example:

 myDropzone.on('accept', function(file, done){ myDropzone.on("thumbnail", function(file){ if(file.width != 728 && file.height != 90){ done("Resolution is not correct (Super Banner (728x90))"); } else { done(); } }); } 

Answer 3

Adding a dirty timeout will not work every time, you will get some undefined value when you send huge files or multiple files.

I got the same headache, and personnaly refused to check the width and height before loading and checking on the server side. In fact, you can display dropzone errors by returning a header error:

 $size = getimagesize(current($_FILES['value']['tmp_name'])); if($size[0] == 840 && $size[1] == 570){ //perfect } else{ header("HTTP/1.0 406 Not Acceptable"); echo 'Your image must be 840x570px'; exit(); } 

Answer 4

From you, to write code to see nothing wrong, perhaps the file type is not an object, but a string, you can try the JSON.parse (file) method, and then get the width key.