AJAX upload using Prototype.js plugin

Question

Hi friend,

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 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 2

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.