In this lesson, we will be creating an Image model that will process file uploads via AJAX. This lesson is going to use CarrierWave to handle uploads, but this can be adapted to work with other gems such as paperclip, dragonfly, or refile.
The main challenge is that browsers prevent file uploads with AJAX by default for security concerns. There are several workarounds, but the quickest solution is to use the remotipart gem.
gem 'carrierwave' gem 'mini_magick' gem 'remotipart', '~> 1.2'
- Rails 4.2
- Lesson: AJAXify a Rails App
- Lesson: Upload Images to Google Cloud Storage
1. Enable CarrierWave File Uploads
$ rails g scaffold Image name:string file:string $ rails g uploader Image
class Image < ActiveRecord::Base mount_uploader :file, ImageUploader end
//= require jquery.remotipart
2. Code the AJAX Image Upload
First, we need to make the Image form remote.
<%= form_for(@image, remote: true) do |f| %>
Next, we need to create a partial that will render the uploaded image.
<%= @image.name %> <%= image_tag(@image.file) %>
Lastly, we need to create a
js.erb file to modify the DOM after the AJAX request is complete. To keep things simple, we are going to use jQuery to append the image after the form.
$('form').append('<%= j render “image” %>');
3. Start Uploading
Now your form is ready to accept AJAX Image uploads. When you click the submit button, the uploaded image should be appended after the form.