Uploading pictures with ajax

is this possible? any references, tips, help, other cool ideas like
this, are much appreciated. . .
many 10x,


I believe the only way to upload files using “AJAX” is to post the
upload to a hidden iframe and when the iframe reloads it executes
javascript in the main frame.

Took me a while to figure this one out, but I got it. Also got multiple
uploads, thanks to this guy(http://www.the-stickman.com).
Because of the custom javascript stuff, I couldn’t use the easy rails
tags to generate script.
The rails way is to use form_remote_tag and submit_to_remote prototype
helpers (

Hope this helps

<script src="/javascripts/multifile.js"></script>
    <iframe style="width: 0px; height: 0px; border: 0px"
src="/blank.html" name="_hidden"></iframe>

    <h2>Images and Videos</h2>

    <div id="upload01">
        <form enctype="multipart/form-data" action="file_upload" method
= "post" target = "_hidden" >
            <input id="my_file_element" type="file" name="file_1" >
            <input type="submit" value="Upload" name="submit"
onclick="document.getElementById('files_list').innerHTML = 
        <!-- This is where the output will appear -->
        <div id="files_list" style="border: 1px solid #ccc; width:
                    <!-- Create an instance of the multiSelector class,
pass it the output target and the max number of files -->
                    var multi_selector = new MultiSelector(
document.getElementById( 'files_list' ), 30 );
                    <!-- Pass in the file element -->
                    multi_selector.addElement( document.getElementById(
'my_file_element' ) );

Here’s how I did it:

In my .rhtml file:

<h3>Upload File</h3>
<form enctype="multipart/form-data" action="/admin/pages/upload"

method = “post” target = “_hidden” >

Upload file: <%= file_field( “file”, “uploaded_data” ) -%>
    <%= submit_tag "Upload", :id => 'upload-button' %>
	<%= link_to_function 'Close', "Element.hide('upload-popup')", :class

=> ‘close-link’ %>

<iframe style="width: 0px; height: 0px; border: 0px"


in my controller:

def upload
logger.debug(“params” + params.to_s)
@uploaded_file = UploadedFilePageAttribute.create! params[:file]
render(:partial => ‘file_upload’, :object => @uploaded_file,
:layout => false)

this renders the partial file_upload into the iframe
and the contents of _file_upload.rhtml were:

which called a javascript on the (parent of the iframe which is the
same as the page with the upload form) to populate a text field and
hidden field with the information about the just-uploaded file

my model is using acts_as_attachment:

class UploadedFilePageAttribute < ActiveRecord::Base


belongs_to :page_attribute
acts_as_attachment :storage => :file_system



On Nov 6, 2006, at 6:54 AM, [email protected] wrote:

  Upload file: <%= file_field( "file", "uploaded_data" ) -%>

this renders the partial file_upload into the iframe

The solution to this is a plugin called respond_to_parent. It allows
you to return rjs to the iframe that will get evaled in the parent



– Ezra Z.
– Lead Rails Evangelist
[email protected]
– Engine Y., Serious Rails Hosting
– (866) 518-YARD (9273)