Jquery Fileupload set the size of uploaded image

Question

I'm using jquery fileupload in a project. I'd like to know if there is a way to set the size of the displayed image after its upload.

For example, the code it generates is:

<span class="preview">
  <a href="/static/media/asd/espiro_gray.jpg" title="espiro_gray.jpg" download="espiro_gray.jpg" data-gallery=""><img src="/static/media/asd/espiro_gray.jpg"></a>
</span>

Answer 1

You can use 'fileuploadadded' event of the Jquery fileupload and add the image resizing code in it.

Try something like:

$(selector).bind('fileuploadadded', function (e, data) { 
// add your image resize code here
}

Answer 2

Solved doing the following:

// listen to the table for any new element
$('.table').bind("DOMNodeInserted", function(e){
   // get the new element
   var elem = e.target.nodeName;
   // if the element is 'TR' I continue
   if (elem == 'TR'){
      // there are two cases: 1) the image is 
      // added as preview: in this case 
      // there is not 'img' element generate. 
      // 2) the image is uploaded: in this case
      // we do generate a 'img' element, so I get
      // it with the following line
      var img = $(this).find("img");
      // undefined check
      if (img != undefined) {
         // set the right values
         img.attr('height', '100');
         img.attr('width', '100');
      }
    }
});

I hope this can help someone else.

Cheers.