Confused about how Rails 4 handling AJAX file upload with Paperclip

Question

In my html view code , I have two different forms but shared the same id name

<div class="editcompanyprofile_tab" style="display:block;">
<div class="inputfield-container clearfix">
  <%= form_for(@company, remote: true) do |f| %>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :name, "Company Name" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :name, :style => "width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :firstname, "First Name" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :firstname, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :lastname, "Last Name" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :lastname, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :title, "Title"%>
    </div>
    <div class="inputfield">

      <%= f.text_field :title, :style =>"width: 259px;"%>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :email, "Email" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :email, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :phonenumber, "Work Number" %>
    </div>
    <div class="inputfield">
      <%= f.text_field :phonenumber, :style =>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix" >

    <div class="field" style="width: 40px;">
      <%= f.label :faxnumber, "Fax"%>
    </div>
    <div class="inputfield" >
      <%= f.text_field :faxnumber, :style=>"width: 134px; margin-right: 5px;"%>
    </div>
    <div class="field" style="width: 60px;">
      <%= f.label :mobile, "Mobile"%>
    </div>
    <div class="inputfield">
      <%= f.text_field :mobile, :style=>"width: 129px;"%>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style ="width: 125px;">
      <%= f.label :streetaddress, "Street Address"%>
    </div>
    <div class="inputfield">
      <%= f.text_field :streetaddress, :style=>"width: 259px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="field" style="width: 40px;">
      <%= f.label :city, "City" %>
    </div>
    <div class="inputfield" >
      <%= f.text_field :city, :style =>"width: 134px; margin-right:5px;"%>
    </div>
    <div class="field" style="width: 60px;">
      <%= f.label :state, "State"%>
    </div>
    <div class="inputfield">
      <%= f.text_field :state, :style=>"width: 129px;" %>
    </div>
  </div>
  <div class="inputfield_row clearfix">
    <div class="inputfield">
      <%= f.text_area :notes, :placeholder =>'Notes' %>
    </div>
  </div>
  <div class="inputfield_buttons">
    <div class="inputaction_hc savechanges" style="margin-right:0; width:120px;">
      <%= f.submit "Save Changes", :name =>"SAVE", :value =>"Save Changes", :style=>"float: left;" %>
    </div>
    <div class="inputaction_hc cancel">
      <input type="button" name="CANCEL" value="Cancel" onclick="hideDiv('editcompanyprofile-menu');" style="float: left;">
    </div>
  </div>
  <% end %>

</div>
</div>

<div class="logodesign_tab" style="display:none;">
    <%= image_tag @company.logo.url(:thumb) %>
    <%= form_for(@company, :remote=>true, :html => { :multipart => true }) do |form| %>
        <%= form.file_field :logo, :class=>"button" %>
        <%= form.submit "Submit", :name =>"SAVE", :value =>"Submit" %>
        <input type="button" name="CANCEL" value="Cancel" onclick="hideDiv('editcompanyprofile-menu');">
    <% end %>
</div>

In my controller , this block of code will execute the update operations

def update
  respond_to do |format|
    if @company.update(company_params)
      format.html { redirect_to @company, notice: 'Company was successfully updated.' }
      format.json { head :no_content }
    else
      format.html { render action: 'edit' }
      format.json { render json: @company.errors, status: :unprocessable_entity }
    end
  end
end

The JS Ajax code

$("form[id^=edit_company]").on("ajax:success", function(e, data, status, xhr){
      alert('ajax succeeded!');
      window.location.reload(true);
});

Under the editcompanyprofile_tab div tag, when I edit any of the company's fields and save the changes, the js ajax code above gets executed and the alert message gets triggered. But for the logodesign_tab div tag, when I upload a logo image and save the changes, the same ajax code above did not get executed!! Thus the alert message didn't pop up.

Which is really puzzling because both of these two forms share the same id ie id^=edit_company so how come the editcompanyprofile_tab's form works but not for the logondesign's form???? What have I missed here?!?!?

Answer 1

Unfortunately, you can't upload files with remote: true . AJAX uploads do not work for files, at least not in the default way.

Possible solutions:

1. Remotipart Gem
2. HTML5 Formdata Object
3. JQuery File-Upload

Have a look at this question: How can I upload files asynchronously with jQuery?

Update 01/2015:

There is a new gem called Refile , that makes async file uploads much easier. There is also a good introduction video on GoRails.com: File Uploads with Refile