Question

I have a form with multiple file_field inputs (for images) being handled by Paperclip.

On my form, once I select an file to upload I want it to immediately upload (on selection!) and show the images thumbnail (without having to submit the completed form with the submit button)

I was able to submit the whole form via ajax using the remotipart gem… but im not sure how to achieve my goal.

Can anyone help? Please let me know if code or more explanation is needed. Many thanks.

Answer 1

I’d approach this problem in following way.

If you need to upload multiple files via XHR, use http://github.com/valums/file-uploader. It’s a great plugin and it will suit your needs.

Once you set that up, you should create Rails controller to handle these file uploads (or use existing one). Since you are manually uploading files, you have to write upload function yourself and use paperclip to upload and connect with your Model.

Let’s say you have a model called Photo. It has attached :photo.

class UploadsController < ApplicationController
  def upload_photo
    # In order to get contents of the POST request with the photo,
    # you need to read contents of request
    ajax_upload = params[:file].is_a(String)
    file_name = ajax_upload ? params[:file] : params[:file].original_filename
    extension = file_name.split('.').last

    # We have to create a temp file which is going to be used by Paperclip for
    # its upload
    tmp_file = "#{Rails.root}/tmp/file.#{extension}"
    file_id = 0

    # Check if file with the name exists and generate unique path
    while File.exists?(tmp_file) do
      tmp_file_path = "#{Rails.root}/tmp/file#{file_id}.#{extension}"
      id += 1
    end

    # Let's write the file from post request to unique location
    File.open(tmp_file_path, 'wb') do |f|
      if ajax_upload
        f.write request.body.read
      else
        f.write params[:file].read
      end
    end

    # Now that file is saved in temp location, we can use Paperclip to mimic one file
    # upload
    @photo = Photo.new :photo => File.open(tmp_file_path)

    # We'll return javascript to say that the file is uploaded and put its thumbnail in
    # HTML or whatever else you wanted to do with it
    respond_to do |format|
      if @photo.save
        format.js
      else
       format.js { render :json => { :errors => @photo.errors } }
      end
    end
  end
end

This is how you can do the AJAX upload of multiple files in Rails with Paperclip.