Strange Routing Behavior in Rails on Image Upload Using Carrierwave - ruby-on-rails

Question

I'm working on creating a new edit/update view and routes for a fairly large Rails (v4.0.3) app. I'm using remote: true to submit sections of the form without reloading the whole page, and then simply replacing the form HTML with the response HTML (which is the form partial). The URL (.../edit) should remain the same.
It works fine to update text fields, but when I upload an image (using Carrierwave) I get this strange behavior where the image uploads fine but then I get redirected to the controller action URL (.../update) and the browser displays the raw partial out of context.
Here's the relevant method from my resource controller:
def update
respond_to do |format|
if #provider.update_attributes(admin_provider_params)
if params[:provider][:logo]
#provider.logo = params[:provider][:logo]
#provider.save
elsif params[:provider][:remove_logo] == '1'
#provider.remove_logo!
#provider.save
end
format.html { render partial: "provider_form", locals: { provider: #provider } }
format.json { render json: #provider }
else
format.html { render action: "edit" }
format.json { render json: #provider.errors, status: :unprocessable_entity }
end
end
end
And here's some selected code from my view partial:
= simple_form_for [:admin, #provider],
remote: true,
html: { class: 'form-horizontal', multipart: true, id: 'provider-data-form' },
authenticity_token: true,
wrapper: :horizontal_form do |f|
-# (SOME OTHER FORM FIELDS HERE)
-# LOGO UPLOAD ELEMENTS
.form-group.file.optional.provider_logo
= f.input :logo, input_html: { id: "provider-logo-upload-real", class: "hidden"}, :as => :file, wrapper: false
%button#provider-logo-upload-btn= #provider.logo_url.nil? ? "Upload Logo" : "Replace Image"
%img#logo-upload-img{src: #provider.logo_url}
-# SUBMIT FORM
= f.button :submit, translate_helper(:save), id: "save-provider-form-btn"
:javascript
$(document).ready(function() {
// Handle logo upload via proxy button
$('#provider-logo-upload-btn').on("click", function(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
$('#provider-logo-upload-real').click();
});
// Preview logo before upload
$('#provider-logo-upload-real').change(function(e) {
$('#logo-upload-img').attr("src", URL.createObjectURL(event.target.files[0]));
});
// Handle Form submit
$('#provider-data-form')
.on("ajax:success", function(evt, data, status, xhr) {
console.log("AJAX Success!", arguments);
// On success, refresh just the provider form partial
$('#provider-data-form').replaceWith(xhr.responseText);
});
});
I think this is all the relevant code, but I'm happy to provide more on request. There's not much additional logic tacked on the CarrierWave Uploader classes.
Finally, here are my server logs (edited slightly for brevity) when I submit the form with a new image for upload:
I, [2016-10-17T10:09:24.745387 #1219] INFO -- : Started PATCH "/en/admin/providers/8" for 127.0.0.1 at 2016-10-17 10:09:24 -0400
I, [2016-10-17T10:09:24.754005 #1219] INFO -- : Processing by Admin::ProvidersController#update as JS
I, [2016-10-17T10:09:24.754133 #1219] INFO -- : Parameters: application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01", "locale"=>"en", "id"=>"8"}
I, [2016-10-17T10:09:24.754187 #1219] INFO -- : Parameters: {
// LISTS PARAMETERS, INCLUDING IMAGE UPLOAD DATA
}
I, [2016-10-17T10:09:25.105809 #1219] INFO -- : Rendered admin/providers/_provider_form.html.haml (52.9ms)
I, [2016-10-17T10:09:25.106381 #1219] INFO -- : Completed 200 OK in 352ms (Views: 43.8ms | ActiveRecord: 51.8ms)
// IF NO IMAGE WAS INCLUDED, NORMALLY IT STOPS AT THIS POINT, BUT...
I, [2016-10-17T10:09:25.111315 #1219] INFO -- : Started PATCH "/en/admin/providers/8" for 127.0.0.1 at 2016-10-17 10:09:25 -0400
I, [2016-10-17T10:09:25.122752 #1219] INFO -- : Processing by Admin::ProvidersController#update as HTML
I, [2016-10-17T10:09:25.122925 #1219] INFO -- : Parameters: {
// LISTS PARAMETERS, NO IMAGE UPLOAD DATA
}
I, [2016-10-17T10:09:25.268027 #1219] INFO -- : Rendered admin/providers/_provider_form.html.haml (43.9ms)
I, [2016-10-17T10:09:25.268360 #1219] INFO -- : Completed 200 OK in 145ms (Views: 35.2ms | ActiveRecord: 39.5ms)
// PAGE DISPLAYS PARTIAL ONLY, URL IS FOR UPDATE ROUTE RATHER THAN EDIT
Sorry for such a long question; I've been puzzled by this for over a week. I'd appreciate any help I can get!

Answer 1

I guess that is because Rails remote form with file falls back to HTML submission instead of regular JS submission . Try using remotipart Gem.

Answer 2

Okay, I think I've been able to solve it. Thanks to #sajan, I found this issue on the Remotipart github page: https://github.com/JangoSteve/remotipart/issues/129
By preventing default on my submit button click events and then submitting the form itself, I was able to stop the multiple form submit issue.