How can I process an image data uri and upload to S3 via paperclip?

Question

I'm writing a Rails app that captures an image from the webcam, overlays it on an image in /public, and uploads the result to Amazon S3 via paperclip. I wrote some Javascript to get the webcam image as a data uri but I don't know how I would send it to my server to process it and upload the result to S3 via paperclip.

I've looked at https://gist.github.com/WizardOfOgz/1012107, How to save a raw_data photo using paperclip, and read the paperclip source code but I still haven't been able to figure it out.

score 1 · Answer 1 · answered Jul 07 '14 at 06:38

I ended up sending an AJAX request with my model's image attribute set to the data uri. Paperclip automatically detects that it's a data uri and handles it appropriately. I wrote a custom paperclip processor to do the image editing and make the edited image available on S3.

score 0 · Answer 2 · edited May 23 '17 at 11:57

I just ran into this problem myself. The solution I came up with works for modern browsers (IE9+/chrome/FF/Safari). Not sure if that's something you can live with. If so:

1) You have to post the dataURI to your server. I don't think that's possible via standard form submission, but you can do it using HTML5 FormData sent via an XHR. Check out this SO entry on the basics of asynchronously posting a form using jQuery: How can I upload files asynchronously?

Alternatively, if you happen to be using Angular like me, you can use the angular-file-upload library https://github.com/danialfarid/angular-file-upload

Once you've created a formData object as described in that post, you can add your dataURI to it:

var formData = new FormData($('form')[0]);
formData.uploadImage = yourDataURI;
$.ajax({ // ... set up your ajax post as described in https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery
});

2) Once you post the data uri, the server-side is easy. Paperclip supports data uris out of the box, just set the paperclip attachment equal to your data uri. If you had an ActiveRecord object named ImagePost, with a paperclip attachment property named overlayed_image you controller might look like:

def update
  image_post = ImagePost.find(params[:id])
  if params['uploadImage']
    image_post.overlayed_image = params[:uploadImage]
  end
  # rest of your controller code goes here
end

How can I process an image data uri and upload to S3 via paperclip?

2 Answers2