development

Started POST "/admin/images.js?subdomain_name=get" for 127.0.0.1 at Tue Nov 16 00:21:37 +0800 2010
  Processing by Admin::ImagesController#create as JS
  Parameters: {"authenticity_token"=>"Rf47eL6W+rbeE6qEgnHcn9hZci0CvfNFhHXqRoBKpJE=", "utf8"=>"✓", "to"=>"/admin/pages/home/edit?subdomain_name=get#fragment-3", "imageable_type"=>"Page", "upload_id"=>"upload_id_1289838097073", "imageable_id"=>"24", "subdomain_name"=>"get", "image"=>{"file"=>#<File:/tmp/RackMultipart20101116-26840-1ndwdte-0>}}

images_form.html.haml

- content_for :javascript do
  :javascript
    $(function () {
      $("form#new_image :file").change(function() {
        $("form#new_image").submit();
      });
      $("li.image span.copy-link").zeroclipboard();
      $("form#new_image").bind("ajax:before", function() {
        var uploadId = new Date().getTime();
        var uploadIdString = "upload_id_" + uploadId;
        $('#image-list').append('<li id="' + uploadIdString + '">' + $('form#new_image :file').val() + ' <span>(uploading...)</span></li>');
        $('input#upload_id').val(uploadIdString);
      });
    });

%div#images
  %h2 Images
  = form_for [:admin, Image.new], :html => {:multipart => true}, :remote => true do |f|
    = hidden_field_tag :imageable_id, parent.id
    = hidden_field_tag :imageable_type, parent.class.name
    = hidden_field_tag :upload_id, ''
    = hidden_field_tag :to, to
    %fieldset
      = f.file_field :file, :label => "Image"
  %ul#image-list
    - images.each do |image|
      = li_for(image) do
        = links_to_image_functions(image, :to => to)

jquery.remotipart.js

jQuery(function ($) {
  $.fn.extend({
    /**
     * Handles execution of remote calls involving file uploads, firing overridable events along the way
     */
    callRemotipart: function () {
      var el      = this,
          url     = el.attr('action');

      if (url === undefined) {
        throw "No URL specified for remote call (action must be present).";
      } else {
        if (el.triggerAndReturn('ajax:before')) {

          // force rails to respond to respond to the request with :format = js
          // Add .js to the right part of the URL
          splitUrl = url.split("?");
          var path = splitUrl[0];
          var request_string = splitUrl[1];
          if (path.substr(-3) != '.js') path += '.js'; 
          url = path + "?" + request_string;

          el.ajaxSubmit({
            url: url,
            dataType: 'script',
            beforeSend: function (xhr) {
              el.trigger('ajax:loading', xhr);
            },
            success: function (data, status, xhr) {
              el.trigger('ajax:success', [data, status, xhr]);
            },
            complete: function (xhr) {
              el.trigger('ajax:complete', xhr);
            },
            error: function (xhr, status, error) {
              el.trigger('ajax:failure', [xhr, status, error]);
            }
          });
        }
        el.trigger('ajax:after');
      }
    },
    _callRemote: $.fn.callRemote, //store the original rails callRemote
    callRemote: function() { //override the rails callRemote and check for a file input
      if(this.find('input:file').length){
        this.callRemotipart();
      } else {
        this._callRemote();
      }
    }
  });
});

test_or_cucumber

Started POST "/admin/images.js?subdomain_name=fancake" for 127.0.0.1 at Tue Nov 16 00:21:25 +0800 2010
  Processing by Admin::ImagesController#create as JS
  Parameters: {"utf8"=>"✓", "to"=>"/admin/pages/some-album/edit?subdomain_name=fancake#fragment-3", "imageable_type"=>"Page", "upload_id"=>"upload_id_1289838085846", "imageable_id"=>"1839", "subdomain_name"=>"fancake"}