Uploading pictures with ajax

Rails
1

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

harp

2

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.

3

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 (
Peak Obsession)

Hope this helps
Jason


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

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…

5

Hi~

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

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

Cheers

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