Rails 4 not using Remotipart to remotely submit form

Question

It looks like Remotipart isn't actually being used to submit my form, so the image is completely left out when I look at the params where the form gets submitted to.

remotipart_submitted? returns false

params: {"utf8"=>"✓", "product"=>{"name"=>"RemotipartFails", "price"=>"10", "description"=>"Please work"}, "action"=>"create", "controller"=>"products"}

Below is more relevant code

Gems

gem "jquery-rails"
gem "remotipart", "~> 1.2"

Javascript

//= require jquery
//= require jquery_ujs
//= require jquery.remotipart

Form

<%= form_for(:product, url: products_path, remote: true, html: { multipart: true, class: "form-horizontal" }) do |f| %>
  <div class="margin-top-10 margin-bottom-10">
    <div class="input-left">
      <%= f.text_field :name, { placeholder: "Name", class: "form-control" } %>
    </div>
    <div class="input-right">
      <%= f.number_field :price, { placeholder: "Price", class: "form-control" } %>
    </div>
    <div class="clearfix margin-bottom-10"></div>
    <div class="input-full">
      <%= f.text_field :description, { placeholder: "Description", class: "form-control" } %>
    </div>
    <div class="clearfix margin-bottom-10"></div>
    <div class="input-full">
      <%= f.file_field :image, { class: "form-control" } %>
    </div>
    <div class="clearfix margin-bottom-10"></div>
    <%= f.submit "Add Product", class: "btn btn-green" %>
  </div>
<% end %>

I've tried it without the multipart: true because I think form_for adds it automatically, but that didn't help.

At this point I'm open to alternative solutions (hopefully allowing me to submit the form remotely with an image still)

Lifeless

Did you ever find a solution for this? i'm running into the same issue. :( – Handal

@SwaathiK Not quite, I added an issue on their Github but they never responded. I offered an alternative library there: github.com/JangoSteve/remotipart/issues/109 – Lifeless

Great! Thanks. But I just tried with remote true without any gem. I have jquery file uploads though. And it just seems to work. The form submits via AJAX. Is this correct? – Handal

I am facing same issue and tried whatever suggested in github.com/JangoSteve/remotipart/issues/109. I am still far from the solution. – Hawkins

Ok, I don't know why there is no answer in the github issues but this seems working for me when trying with exact same fields as in question with Rails 4.2.6. @TMP can you check if it's working for you? or let me know what can I do to show that it's working? – Feoffee

@BrianRusselDavis Feel free to follow up in the issue. People there have had the issue much more recent than I. I recommend moving away from it anyways due to the lack of response by the maintainers – Lifeless

Hi, actually, I was facing the same issue, I used Remoteparti gem but the page is still loading while uploading. Then, I used to upload the image through iframe technique see here. This will not reload the page. – Volcanism

Have you tried adding data: {type: :json} to your form_for tag? I'm using carrierwave and remotipart to ajax create/update records with images and adding that was the magic that got it working for me. – Hotblooded

Answer 1

Bellow code working for me to submit the form via ajax with image. Even though its form_tag, It can be easily changed to form_for syntax.

<!--In View-->
<%= javascript_include_tag "jquery", "jquery_ujs", "jquery.remotipart"%>

<%= form_tag({:controller=>controller,:action=>action},{:method => 'post' ,:name=>'upload-data',:id=>'upload-data', :multipart => true, :target =>'upload_frame' }) do -%>
          <!--Form fields here-->
<%end %>

<script type="text/javascript">
 $("#upload_frame").load(function() {
   var responseText = $("#upload_frame").contents().find('body').html();
   if(responseText != ""){
     $("#element_to_update").html(responseText);
   }
 });
</script>

I hope this will be useful to someone facing issue.

Superannuated