caboose

Here’s how to upload without leaving the page. It’s not ajax, but it feels like it. Sorry for the misleading heading :)

First, install the respondsto_parent plugin. Read more about respondsto_parent This plugin lets you fake rjs from an iframe response. Doesn’t make sense? Don’t worry, it will later.

script/plugin install http://sean.treadway.info/svn/plugins/responds_to_parent

Now, in your page, let’s say it’s an article editing form.

<form method="post" action="/articles">
  Title: <input type="text" name="article[name]" />
  &#8230;

Forget about this form.

Add a new form somewhere like the sidebar, looks like this:

<div id="asset_list">
  <%= render :partial => &#8216;asset&#8217;, :collection => @assets %>
</div>
<form method="post" action="/assets.js" target="background-uploader" enctype="multipart/form-data" id="background-upload-form">
  File: <input type="file" name="asset[uploaded_data]" />
  <input type="submit" value="Upload" />
</form>
<iframe width="1" height="1" name="background-uploader" src="about:blank"></iframe>

So, we have a multipart form that points to assets.js with a target, a 1x1 iframe, and a file field. These are all required. Optional, the div with the asset list, but it’s helpful for the user to see all the assets, or perhaps the most recent.

Open up your asset controller and modify the create action.

def create
  @asset = Image.create! params[:asset]
  respond_to do |wants|
    wants.html { redirect_to asset_path(@asset) }
    wants.js do
      responds_to_parent do
        render :update do |page|
          page.insert_html :top, ‘asset_list’, render(:partial => ‘articles/asset’, :object => @asset)
          page.visual_effect :highlight, “asset_#{@asset.to_param}”
          page[‘background-upload-form’].reset
        end # render
      end # responds_to_parent
    end # wants
  end # respond_to
rescue ActiveRecord::RecordInvalid
  # eep! you’re screwed!
end

What does this do? Well.. first, it creates the asset. Remember how we pointed the form to “assets.js”? This tells rails that we wants.js and rails sets the content-type accordingly. This has the benefit of allowing us to create assets with the same action regardless of iframe or as before.

Unfortunately, since this isn’t ajax, it’s going to dumping its contents as text in the iframe and it won’t work. Enter the responds_to_parent plugin, which does some magic and makes our rjs response activate as expected.

Inside the responds_to_parent block we insert the new asset partial in the top of the list, flash it so the user is aware, and reset the upload form.

And that’s it. Error checking is left to the reader :)