ruby-on-railsruby-on-rails-3.2jquery-file-uploadjquery-fileupload-rails

Rails - resize image before upload to s3


I am using the s3_direct_upload gem to upload images to s3 with Rails. This gem is based on this Railscast and uses jQuery-file-upload. It is working well.

I would now like to resize my images before uploading them. A fork was created for a way to implement this but the author mentioned that:

"I had to comment out the add method since it halts the process queue. I'm not sure why... But since I was not uploading many files at the same time, it seems I did not need that callback anyway."

I have been able to implement this fork but the progress bar and upload events are no longer called so I have tried to implement a fork myself to implement all of my features.

The coffeescript code below does not throw any error but it does not do the resize either:

setUploadForm = ->
$uploadForm.fileupload
  disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator && navigator.userAgent)
  imageMaxWidth: settings.image_max_width
  imageMaxHeight: settings.image_max_height
  disableImagePreview: true

So now I am trying to replace the add event as suggested by the author but I am struggling with the logic. The original code looks like:

  add: (e, data) ->
   file = data.files[0]
   file.unique_id = Math.random().toString(36).substr(2,16)     

  unless settings.before_add and not settings.before_add(file)
      current_files.push data
      if $('#template-upload').length > 0
        data.context = $($.trim(tmpl("template-upload", file)))
        $(data.context).appendTo(settings.progress_bar_target || $uploadForm)
      else if !settings.allow_multiple_files
        data.context = settings.progress_bar_target
      if settings.click_submit_target
        if settings.allow_multiple_files
          forms_for_submit.push data
        else
          forms_for_submit = [data]
      else
        data.submit()

and the author replaced the above with:

   send: (e, data) ->
    file = data.files[0]
    if settings.before_send
      settings.before_send(file)

I would like to replace add with send if it is going to allow the images to resize but I also want to keep the upload progress bar and upload events. I have tried replacing before_add with before_send but it creates an infinite loop:

unless settings.before_send and not settings.before_send(file)

My fork can be found here


Solution

  • The problem was in the initialize function:

    this.initialize = function() {
      $uploadForm.data("key", $uploadForm.find("input[name='key']").val());
    
      //binded add function here to let the plugin execute it's default add behaviour
      setUploadForm().bind('fileuploadadd' , function(e, data) {
          var file;
          file = data.files[0];
          file.unique_id = Math.random().toString(36).substr(2, 16);
          if (!(settings.before_add && !settings.before_add(file))) {
            current_files.push(data);
            if ($('#template-upload').length > 0) {
              data.context = $($.trim(tmpl("template-upload", file)));
              $(data.context).appendTo(settings.progress_bar_target || $uploadForm);
            } else if (!settings.allow_multiple_files) {
              data.context = settings.progress_bar_target;
            }
            //this part was causing the problem it was adding images for processing which hasn't been processed.
            /*if (settings.click_submit_target) {
              if (settings.allow_multiple_files) {
                return forms_for_submit.push(data);
              } else {
                return forms_for_submit = [data];
              }
            } else {
              return data.submit();
            }*/
          }
        });
      return this;
    };