15

Is there any easy way how to handle AJAX file upload in Rails? e.g. with a plugin

Jakub Arnold
  • 85,596
  • 89
  • 230
  • 327
  • Have a look at [**this answer**](https://stackoverflow.com/a/67876477), easy and simple integration with example. – Adwin Jun 21 '21 at 18:23

4 Answers4

19

If you're using Rails 3, I've written a plugin that makes AJAX style file uploads relatively trivial to implement.

http://rubygems.org/gems/remotipart

leppert
  • 805
  • 9
  • 11
  • Pretty awesome - do you know of any similar prototype solutions? This is really useful stuff. – Brian Armstrong Aug 13 '10 at 03:45
  • I don't know of any Prototype style solutions but the jQuery code was so trivial to implement I can't imagine it would be difficult to modify. If you'd like to help, feel free to fork Remotipart on github and I'll merge it into trunk. http://github.com/formasfunction/remotipart – leppert Nov 05 '10 at 17:21
  • Note to those reading this post: remotipart has important bugs (such as: not working with multiple level of quoted text, which is known since 2 years) and the repo owner is not actively trying to fix this. So consider this before you waste hours (like I did) implementing it then replacing it with another solution. – Benjamin Bouchet Oct 08 '15 at 06:13
4

JQuery File Upload is very active and versatile file upload widget project.

See the demo here: http://blueimp.github.com/jQuery-File-Upload/

Here's a Gem: http://rubygems.org/gems/jquery.fileupload-rails

The wiki also has Rails examples: https://github.com/blueimp/jQuery-File-Upload/wiki

Dan Sandland
  • 7,095
  • 2
  • 29
  • 29
0

It's not really necessary to use some special plugins for that. Easiest way to do ajax picture upload for me was just make form that uploading pictures to act like ajax. For that I use ajaxForm jQuery plugin: http://www.malsup.com/jquery/form/ Than return to js uploaded picture and put it to your page.

So, you should make your form be ajaxForm:

$('#uploader').ajaxForm({dataType: "script",
         success: ajaxFormErrorHandler,
         error: ajaxFormSuccessHandler
}

controler looks like that:

  def add_photo
    @photo = PhotosMeasurement.new(params[:user_photo])
    respond_to do |format|
      if @photo.save
         format.json { render :json =>  @photo}
      else
         format.json { render :json =>  nil}
      end
    end
  end

and in ajaxFormSuccessHandler you simply get picture object:

var photo = jQuery.parseJSON(responseText.responseText);

and put photo wherever you like:

target.find('.addPhoto').before(''+
       '<input class="imageId" type="hidden" value='+photo.id+' > '+
       '<img src='+photo.photo.thumb.url+' alt="Thumb_1"> ');

P.S: Don't really know why but if you return to ajaxForm handler something, it handle that request as ERROR not SUCCESS.

P.P.S: surely jQuery-File-Upload plugin makes more but if you don't need all that, you can use this way.

P.P.P.S: you should have already functional non-ajax file upload for do that =)

Vladyslav
  • 31
  • 1
0

You can use Jquery Form

  • download jquery.form.min.js and put it to vendor/assets/javascripts folder
  • in your application.js

    //= require jquery.form

  • in your view (haml sample):

    = form_for user, authenticity_token: true, :multipart => true, id: 'user_form' do |f|

      = f.label :avatar, t("user.avatar")

      = f.file_field :avatar, accept: 'image/png,image/gif,image/jpeg'

      = f.submit t(user.new_record? ? 'add' : 'update'), class: 'btn btn-primary', data: {disable_with: t(user.new_record? ? 'adding' : 'updating')}

    :javascript

      $('#user_form').ajaxForm()

  • here is Rails app sample https://github.com/serghei-topor/ajax-file-upload-rails-sample

Serghei Topor
  • 11
  • 4