How to resize images client side using jquery file upload

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?

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