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

Question

Basically when I include and use a file uploader in my form it seems to cancel out the :remote => true functionality and processes the action as HTML in place of JS. any ide

Answer 1

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

create.js.erb

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

Answer 2

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!

Answer 3

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