Rails - resize image before upload to s3

Question

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

Answer 1

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;
};

Answer 2

You can use the rmagick gem. In your gemfile

gem 'rmagick', '2.13.2'

then bundle install.

Rmagick gem

You will also have to install ImageMagick on your system:

ImageMagick binaries

You can then use it from within your app. See this railscast:

Image Manipulation Railscast

The relevant code:

require "rmagick"

source = Magick::Image.read("octocat.png").first
source = source.resize_to_fill(70, 70)