# Uploading pictures with ajax

**URL:** <https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732>\
**Category:** Rails\
**Created:** [October 18, 2006, 4:23pm UTC](https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732 "2006-10-18T16:23:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![shai](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c77e96/32.png) [@shai](https://www.ruby-forum.com/u/shai)\
**Post date:** [October 18, 2006, 4:23pm UTC](https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732/1 "2006-10-18T16:23:38Z")

</div>

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

harp

---

<div class="post-metadata">

**Author:** ![shai](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c77e96/32.png) [@shai](https://www.ruby-forum.com/u/shai)\
**Post date:** [October 18, 2006, 5:18pm UTC](https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732/2 "2006-10-18T17:18:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![shai](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c77e96/32.png) [@shai](https://www.ruby-forum.com/u/shai)\
**Post date:** [October 18, 2006, 5:33pm UTC](https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732/3 "2006-10-18T17:33:31Z")

</div>

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](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 (  
[Peak Obsession](http://api.rubyonrails.com/classes/ActionView/Helpers/PrototypeHelper.html))

Hope this helps  
Jason

```auto

<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"
id="uploadbutton"
onclick="document.getElementById('files_list').innerHTML = 
progress_text;">
        </form>
        <!-- This is where the output will appear -->
        <div id="files_list" style="border: 1px solid #ccc; width:
500px;"></div>
                <script>
                    <!-- 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' ) );
                </script>
   </div>

```

---

<div class="post-metadata">

**Author:** ![shai](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c77e96/32.png) [@shai](https://www.ruby-forum.com/u/shai)\
**Post date:** [November 7, 2006, 11:06am UTC](https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732/4 "2006-11-07T11:06:37Z")

</div>

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"

```

name="\_hidden"\>

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)  
end

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

# Associations

belongs\_to :page\_attribute  
acts\_as\_attachment :storage =\> :file\_system  
validates\_as\_attachment

etc…

---

<div class="post-metadata">

**Author:** ![shai](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c77e96/32.png) [@shai](https://www.ruby-forum.com/u/shai)\
**Post date:** [November 7, 2006, 11:07am UTC](https://www.ruby-forum.com/t/uploading-pictures-with-ajax/72732/5 "2006-11-07T11:07:47Z")

</div>

Hi~

On Nov 6, 2006, at 6:54 AM, removed\_email\_address@domain.invalid wrote:

> ```
> Upload file: <%= file_field( "file", "uploaded_data" ) -%>
> 
> ```
> 
> this renders the partial file\_upload into the iframe
> 
> etc…  
> 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  
> window

[http://sean.treadway.info/svn/plugins/responds\_to\_parent/README](http://sean.treadway.info/svn/plugins/responds_to_parent/README)

Cheers

– Ezra Z.  
– Lead Rails Evangelist  
– removed\_email\_address@domain.invalid  
– Engine Y., Serious Rails Hosting  
– (866) 518-YARD (9273)