How to detect dimensions of file using File API and Dropzone.js

Question

Using Dropzone.js, I need to detect the dimesions of the image when added files and apply them to its parent .details div. The following code code works and return an alert 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 that I have no idea how to assign the width to its parent .details element which set the preview width of the preview.

I try replacing the alert for this code but it doesn't do anything.

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

I'm a bit lost in how to relate the value inside the onload function to applying it to its parent class.

Answer 1

With the latest version of dropzone you don't have to write this code yourself.

Simply read the file.width and file.height properties that are set on the file object when the thumbnail is generated.

The problem, why your CSS doesn't affect the element, is because you didn't specify the unit, px in this case. So your code can be:

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