Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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.

share|improve this question

1 Answer

up vote 0 down vote

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');
});
share|improve this answer
 
You haven't read the question, have you? –  nikans Aug 23 at 12:42
 
@nikans care to elaborate? –  enyo Sep 2 at 17:16
 
One does not simply read file.width & file.height when working with loaded file. You need to use FileReader() and do some weird stuff. –  nikans Sep 25 at 21:44
 
That's how I managed to accept files only larger than 1024x768 (I've been using it for steganography so I just needed about 786432 pixels to cipher data into the image..) accept: function(file, done) { var pixels = 0; var reader = new FileReader(); reader.onload = (function(file) { var image = new Image(); image.src = file.target.result; image.onload = function() { pixels = this.width * this.height; if (pixels < 786432) { done("blah"); } else { done(); } }; }); reader.readAsDataURL(file); }, –  nikans Sep 25 at 21:47
 
@nikans : As I said in my answer: file.width and file.height are set by dropzone, when the thumbnail is generated. Dropzone does the work for you. I clarified my answer a bit. –  enyo Oct 3 at 12:44
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.