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, but am having trouble following the documentation. My code is below. Currently uploading works perfectly, but the images are not resized.

What is the correct syntax to resize images via jquery-file-upload.

(Two approaches shown in the coffeescript based on this and this documentation. Neither works for me.)

#Coffeescript

jQuery ->
  if $("#new_asset").length
    $("#new_asset").fileupload 
      dataType: "script"
      add: (e, data) ->
        types = /(\.|\/)(jpe?g|png)$/i
        file = data.files[0]
        if types.test(file.type) || types.test(file.name)
          data.context = $(tmpl("template-upload", file))
          $('#progress-container').append(data.context)
          jqXHR = data.submit()
          $("button.cancel").click (e) ->
            jqXHR.abort()
        else
          alert("#{file.name} is not a jpeg or png image file")
      progress: (e, data) ->
        if data.context
          progress = parseInt(data.loaded / data.total * 100, 10)
          data.context.find('.bar').css('width', progress + '%')
      stop: (e, data) ->
        $('.upload').hide()
      process: [
        action: "load"
        fileTypes: /^image\/(gif|jp?g)$/
        maxFileSize: 20000000 # 20MB
      ,
        action: "resize"
        imageMaxWidth: 1500
        imageMaxHeight: 1500
      ,
        action: "save"
      ]
      dropZone: $(".dropzone")
      sequentialUploads: true
      disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator and navigator.userAgent)
      imageMaxWidth: 1500
      imageMaxHeight: 1500
      downloadTemplateId: null

#application.js
//= require jquery-fileupload

EDIT

According to Matanza's answer, the add callback in my code prevents any processing functions from being called automatically. So I assume I need to do something like

...
add: (e, data) -> 
  $.each data.result, (index, file) ->
    // processing code goes here

But I'm having a lot of trouble working out the correct syntax or making sense of the guides that are available.

How do I apply the resize processing to each file in the add callback?

Answer 1

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

Answer 2

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 3

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.