:remote => true not working when a file uploader is used in form

I was just faced with the same issue and found the following alternatives to make it work:

Gem remotipart => http://www.alfajango.com/blog/rails-3-ajax-file-uploads-with-remotipart/

jQuery Plugin 'jaxy' => https://github.com/adamlogic/jquery-jaxy

I think I like the first option better. But it's good to have options. =)

You can't upload files via AJAX, so apparently your request comes as plain HTML, because you don't have anything specific to :js and rails thinks it's just a plain HTML POST request.

https://github.com/JangoSteve/remotipart

gem 'remotipart', '~> 1.2'

and then bundle install

//= require jquery.remotipart

sample_layout.html.erb

<%= form_for @sample, :html => { :multipart => true }, :remote => true do |f| %>  <div class="field">    <%= f.label :file %>    <%= f.file_field :file %>  </div>  <div class="actions">    <%= f.submit %>  </div><% end %>

in Controller

def create  respond_to do |format|    if @sample.save      format.js    end  endend

create.js.erb

// Display a Javascript alertalert('success!');<% if remotipart_submitted? %>  alert('submitted via remotipart')<% else %>  alert('submitted via native jquery-ujs')<% end %>

AJAX image uploads do not work, at least not in the standard way.

There are newer, HTML5 techniques that make it work, and workarounds using <iframe>

There is a great library that does multiple file ajax upload with progress meter and degrades to use different techniques depending on the browser.

AJAX Upload library: http://valums.com/ajax-upload/

It will require a little extra work, but the result can be really nice!