uploading pictures with ajax

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

Hope this helps Jason

[code]

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

[/code]

shai wrote:

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" >       <div>     Upload file: <%= file_field( "file", "uploaded_data" ) -%>

        <%= submit_tag "Upload", :id => 'upload-button' %>     <%= link_to_function 'Close', "Element.hide('upload-popup')", :class => 'close-link' %>       </div>   </form>

    <iframe style="width: 0px; height: 0px; border: 0px" name="_hidden"></iframe>

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:

<script type="text/javascript">   parent.frame_loaded("<%=@uploaded_file.id%>", "<%=@uploaded_file.filename%>"); </script>

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

Hi~

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" >       <div>     Upload file: <%= file_field( "file", "uploaded_data" ) -%>

        <%= submit_tag "Upload", :id => 'upload-button' %>     <%= link_to_function 'Close', "Element.hide('upload-popup')", :class => 'close-link' %>       </div>   </form>

    <iframe style="width: 0px; height: 0px; border: 0px" name="_hidden"></iframe>

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:

<script type="text/javascript">   parent.frame_loaded("<%=@uploaded_file.id%>", "<%=@uploaded_file.filename%>"); </script>

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

  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 Zygmuntowicz-- Lead Rails Evangelist -- ez@engineyard.com -- Engine Yard, Serious Rails Hosting -- (866) 518-YARD (9273)