AJAX upload using Prototype.js plugin

Question

How to upload a image file using ajax by using prototype.js plugin, I need to display those image after it is uploaded please help to solve this problem.

Thanks

Answer 1

You will need something on the server, too.

I recommend using paperclip for storing the files on your server.

Once you have it set up, you should make your ajax generate one form with a "file" field. Also, remember that the form must be multipart.

<% form_for @picture, :html => { :multipart => true } do |f| %>
  <%= f.file_field :file %>
  <%= f.submit "Submit" %>
<% end %>

If you just need to upload one file, you probably don't need full AJAX - only plain javascript - for showing/hiding the form. Like this:

<%= link_to_function 'Show/Hide image upload') do |page|
      page.visual_effect :toggle_blind, 'upload_image'
    end
%>

<div id='upload_image' style='display:none'>
  <% form_for @picture, :html => { :multipart => true } do |f| %>
    <%= f.file_field :file %>
    <%= f.submit "Submit" %>
  <% end %>
</div>

Notice that for hiding/showing the div I'm using a Scriptaculous effect, not just prototype - scriptaculous gets included by default on rails anyway.

Answer 2

you can use remote_form_for with a file upload plugin like attachment_fu or paperclip and then render the image back on the view once it is uploaded. May be using update_page in controller.

Answer 3

https://github.com/JangoSteve/remotipart

Remotipart is a Ruby on Rails gem enabling AJAX file uploads with jQuery in Rails 3.0 and Rails 3.1 remote forms. This gem augments the native Rails jQuery remote form functionality enabling asynchronous file uploads with little to no modification to your application.

gem 'remotipart', '~> 1.0'
bundle install