How to resize images client side using jquery file upload

Question

I am using blueimp jquery-file-upload in a Rails 3.2 app, via the jquery-fileupload-rails gem.

I am trying to resize images on the client side prior to uploading, bu

Answer 1

If that is still relevant- I found out that once you use the add callback, it is your responsibility to add whatever processing stages that you require. So for that matter if you remove the add callback it will resize the image with your settings. what you should do is register the resize processing settings to each file in the add function

hope that helps

Answer 2

I had trouble getting Image resize to work. In the end I started again. I had added image resize to an existing working file upload code. For me, it was the custom add that was hindering the resize. Once I removed the custom add, it was hunky-dorey. Just wanted to put it out there for the benefit of other strugglers.

Answer 3

I solved it by calling the process within the add callback like so:

add: (e, data) ->
  current_data = $(this)
  data.process(->
    return current_data.fileupload('process', data);
  ).done(->
    data.submit(); 
  )

also remember to load your JS files in the right order in application.js....(this wasted several hours of my life):

//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/vendor/load-image
//= require jquery-fileupload/vendor/canvas-to-blob
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require jquery-fileupload/jquery.fileupload-ui
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-image