How to determine file sizes using File API and Dropzone.js

Question

Using Dropzone.js, I need to determine the decimal values ​​of the image when adding files and apply them to its parent .details div. The following code works and returns a warning with the added image width.

 myDropzone.on("addedfile", function(file, xhr) { var fr; fr = new FileReader; fr.onload = function() { var img; img = new Image; img.onload = function() { return alert(img.width); }; return img.src = fr.result; }; return fr.readAsDataURL(file); }); 

The thing is, I have no idea how to assign a width to its parent .details element, which sets the width of the preview preview.

I am trying to replace the warning for this code, but it does nothing.

 $(this).parent('.details').css('height',img.height); 

I lost a little how to associate the value inside the onload function with its application to its parent class.

Answer 1

With the latest version of dropzone, you do not need to write this code yourself.

Just read the file.width and file.height that are set in the file object when creating the sketch.

The problem, why your CSS does not affect the element, is that you did not specify a unit, px in this case. So your code could be:

 myDropzone.on("thumbnail", function(file) { $(this.element).parent('.details').css('height', file.height + 'px'); });