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

no no, it's not the real indentation. If it was I would get an error in rails. — dannio, Mar 31 '14 at 06:19
If you solved this, you should post an answer and mark it. Not sure if the correct order is what you put at the beginning, or at the end within the edit section. — raul782, Sep 15 '14 at 03:39
This has been really helpful, I got the processing working thanks to this post. Now I have found that multiple uploads do not work though. Did you figure out how to make that work? — Brandon, Mar 30 '15 at 16:38
Oops, I had some code in an `unless` that should not have been indented that far. Your code worked great, thank you so much! — Brandon, Mar 30 '15 at 17:07
@dannio put your solution into an answer and accept it, so it wont stay unanswered and SO stays clean ;) — frhd, Apr 14 '15 at 14:17

dannio · Accepted Answer · 2015-04-16T01:39:04.747

-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

edited Apr 16 '15 at 01:39

answered Apr 01 '14 at 03:46

dannio

900
8
12

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – Kumar V Apr 01 '14 at 04:13

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

1 Answers1

Linked