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)