# simple AJAX file upload for Rails

**URL:** <https://discuss.rubyonrails.org/t/simple-ajax-file-upload-for-rails/15095>\
**Category:** rubyonrails-talk\
**Created:** [June 29, 2007, 7:16pm UTC](https://discuss.rubyonrails.org/t/simple-ajax-file-upload-for-rails/15095 "2007-06-29T19:16:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rain\_Chen](https://avatars.discourse-cdn.com/v4/letter/r/c5a1d2/32.png) [@Rain\_Chen](https://discuss.rubyonrails.org/u/Rain_Chen)\
**Post date:** [June 29, 2007, 7:16pm UTC](https://discuss.rubyonrails.org/t/simple-ajax-file-upload-for-rails/15095/1 "2007-06-29T19:16:31Z")

</div>

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| -%\> &nbsp;&nbsp;&nbsp;&nbsp;\<p\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<label for=""\>Upload A Image:\</label\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<%= form.file\_field :uploaded\_data %\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<%= submit\_tag 'Upload' %\> &nbsp;&nbsp;&nbsp;&nbsp;\</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| -%\> &nbsp;&nbsp;&nbsp;&nbsp;\<p\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<label for=""\>Upload A Image:\</label\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<%= form.file\_field :uploaded\_data %\> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\<%= submit\_tag 'Upload' %\> &nbsp;&nbsp;&nbsp;&nbsp;\</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:

&nbsp;&nbsp;&nbsp;&nbsp;# iframe request &nbsp;&nbsp;&nbsp;&nbsp;if params[:HTTP\_X\_REQUESTED\_WITH] && request.post? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;render :template =\> 'photos/create.rjs', :layout =\> false, :content\_type =\> 'text/html' &nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;# normal request &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;respond\_to do |format| &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format.html {redirect\_to :action =\> 'new', :id =\> @photo if request.post?} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format.js &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end &nbsp;&nbsp;&nbsp;&nbsp;end

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

The js code could down from: [http://www.rainchen.com/rails/photo\_upload/application.js](http://www.rainchen.com/rails/photo_upload/application.js)

and a complete photo upload rails demo project: [http://www.rainchen.com/rails/photo\_upload/photo\_upload.rar](http://www.rainchen.com/rails/photo_upload/photo_upload.rar) 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: [http://clarkware.com/cgi/blosxom/2007/02/24#FileUploadFu](http://clarkware.com/cgi/blosxom/2007/02/24#FileUploadFu)

RMagick for windows: [http://rubyforge.org/frs/download.php/15132/RMagick-1.14.1\_IM-6.3.0-7-Q8.zip](http://rubyforge.org/frs/download.php/15132/RMagick-1.14.1_IM-6.3.0-7-Q8.zip)

sqlite3 lib for windows: [http://www.sqlite.org/sqlite-3\_4\_0.zip](http://www.sqlite.org/sqlite-3_4_0.zip)[http://www.sqlite.org/sqlitedll-3\_4\_0.zip](http://www.sqlite.org/sqlitedll-3_4_0.zip)

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

---

<div class="post-metadata">

**Author:** ![Chamnap](https://avatars.discourse-cdn.com/v4/letter/c/779978/32.png) [@Chamnap](https://discuss.rubyonrails.org/u/Chamnap)\
**Post date:** [July 16, 2007, 2:32am UTC](https://discuss.rubyonrails.org/t/simple-ajax-file-upload-for-rails/15095/2 "2007-07-16T02:32:25Z")

</div>

Hi,

why need to add :ajaxupload =\> true?

---

<div class="post-metadata">

**Author:** ![jc-denton](https://avatars.discourse-cdn.com/v4/letter/j/54ee81/32.png) [@jc-denton](https://discuss.rubyonrails.org/u/jc-denton)\
**Post date:** [July 26, 2007, 12:47pm UTC](https://discuss.rubyonrails.org/t/simple-ajax-file-upload-for-rails/15095/3 "2007-07-26T12:47:39Z")

</div>

> > 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=""?