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?!?!?

If you switch the logo file-field with a simple text-field, does it work? — crispychicken, May 20 '14 at 07:58

score 6 · Accepted Answer · edited May 23 '17 at 12:30

6

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:

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

edited May 23 '17 at 12:30

Community

1
1

answered May 20 '14 at 07:56

crispychicken

2,592
2
33
50

Well that probably explains it. Did come across these other ruby gems to resolve ajax file uploads issues such as these. On dear... Another ruby gem I need to learn to make things work... Thanks for the big help! – awongCM May 20 '14 at 08:05

Confused about how Rails 4 handling AJAX file upload with Paperclip

1 Answers1