Using jquery fileupload with coffeescript - resizing image when using add callback

Question

SOLVED It turns out the order of the js being loaded in the application.js were wrong:

original:
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-image
//= require jquery-fileupload/jquery.fileupload-validate

correct version:
//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-image

I'm trying to use BlueImp's jquery fileuploader and I've managed to get everything working but the resizing.

I'm trying to resize the images on the add callback and then submitting to avoid any server side processing.

I know using the add callback causes the process function to be skipped, but I called that manually in the add callback itself and it should work but it doesn't.

here's my code:

$('.jquery-fileupload').fileupload
  dataType: "script"
  imageMaxWidth: 480
  imageMaxHeight: 360
  disableImageResize: false
  autoUpload: false
  process:[
    {
      action: 'load',
      fileTypes: /^image\/(gif|jpeg|png)$/,
      maxFileSize: 20000000
    },
    {
      action: 'resize',
      maxWidth: 480, // the images are to be loaded into a pdf later so they have to be skept small
      maxHeight: 360,
      minWidth: 480,
      minHeight: 360
    },
    {
      action: 'save'
    }
  ]
  progress: (e, data) ->
    progress = parseInt(data.loaded / data.total * 100, 10);
    $('#progress_'+data.formData.token+' .bar').css('width', progress+'%')

  add: (e, data) ->
    unique_token = token();
    if (data.files && data.files[0])
      if(data.files[0].size < 200000000)
        if(data.files[0].type.substr(0, data.files[0].type.indexOf('/')) != 'image')
          alert("Please upload a file with the correct format")
        else
          current_data = $(this)
          data.process(->
            return current_data.fileupload('process', data); //call the process function
          ).done(->
            data.formData = {token: unique_token};
            data.context = $('.preview:last');
            data.context.find('.abort').click(abortUpload);
            xhr = data.submit();
            data.context.data('data',{jqXHR: xhr});
          )
      else
        alert("one of your files is over 200MB")
  done: (e, data) ->
    console.log(data);

any help over this would be greatly appreciated, as I've been banging my head on the table for 2 days straight over this!

edit forgot to mention, here's my js files:

//= 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-image
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/vendor/tmpl
//= require jquery-fileupload/locale

Answer 1

SOLVED It turns out the order of the js being loaded in the application.js were wrong:

original:

//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-image
//= require jquery-fileupload/jquery.fileupload-validate

correct version:

//= require jquery-fileupload/jquery.fileupload-process
//= require jquery-fileupload/jquery.fileupload-validate
//= require jquery-fileupload/jquery.fileupload-image