simple AJAX file upload for Rails

Normally, to upload file,we will write some codes in the view page like:

<% form_for(:photo, :url => {:action => :create}, :html => { :multipart => true}) do |form| -%>     <p>       <label for="">Upload A Image:</label>       <%= form.file_field :uploaded_data %>       <%= submit_tag 'Upload' %>     </p> <% end -%>

Now,I coded some line of js, append to public/javascript/ application.js now we just need to change little things as: change: form_for => remote_form_for add: :ajaxupload => true

Then we got:

<% remote_form_for(:photo, :url => {:action => :create}, :html => { :multipart => true, :ajaxupload => true}) do |form| -%>     <p>       <label for="">Upload A Image:</label>       <%= form.file_field :uploaded_data %>       <%= submit_tag 'Upload' %>     </p> <% end -%>

Now, file upload will post via a iframe without refresh the page.

But how about the rjs? We won't forget it. Add some codes in the controller as bellow:

    # iframe request     if params[:HTTP_X_REQUESTED_WITH] &&       render :template => 'photos/create.rjs', :layout => false, :content_type => 'text/html'     else     # normal request       respond_to do |format|         format.html {redirect_to :action => 'new', :id => @photo if}         format.js       end     end

Now we can render different views by the request type automatically.

The js code could down from:

and a complete photo upload rails demo project: use attachment_fu plugin (require RMagick) and sqlite3 db engline

Tested with IE6,FireFox2.0 on windows XPsp2. With Safari, upload OK,but evalScripts false.

some helpful links:

attachment_fu tutorial:

RMagick for windows:

sqlite3 lib for windows:

last line: I'm new to Rails, sorry for the rough codes. Any improvement is wellcome.


why need to add :ajaxupload => true?

why need to add :ajaxupload => true?

that's the magic tag to tell the program to process using AJAX way.

That's exactly that kind of answer that I HATE, because it's as good as not answering it. Please provide a real answer. I could not find this option in the API, does it have something to do with the javascript that you include, does it alter the stuff in onclick=""?