Unable to combine a normal form with Dropzone.js - ruby-on-rails

Question

In My Rails app I need the user to be able to post Facebook-style posts that would always contain text and optionally an image. I need this to happen without a page reload.
Since I'd like to use Dropzone.js to manage the asynchronous image uploads, I've been trying to combine my form with Dropzone without success. I've used mainly this source.
I'm a bit lost here. What I've tried is below. Could you point me into the right direction?
My form here
<%= simple_form_for(#post, remote: true, :authenticity_token => true, html: { multipart: true, class: 'form-inline dropzone', id: 'new_post_form'}) do |f| %>
<div class="dropzone-previews"></div>
<%= f.input :content, :label => false, :placeholder => " Say something here!", as: :text, :required => true, :autofocus => true, :input_html => { id: "new_post_content_field" } %>
<%= f.input :poster_id, :as => :hidden, :required => true, :autofocus => true, input_html: {value: current_user.id } %>
<%= f.input :poster_type, :as => :hidden, :required => true, :autofocus => true, input_html: {value: current_user.class } %>
<%= f.input :community_id, :as => :hidden, :required => true, :autofocus => true, input_html: {value: #community.id } %>
<div class="fallback">
<%= f.input :post_image, :label => false %>
</div>
<%= f.button :submit, input_html: {id: 'submit-all' } %>
<% end %>
The resulting html
<form class="simple_form form-inline dropzone dz-clickable" id="new_post_form" novalidate="novalidate" enctype="multipart/form-data" action="/posts" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="3OC6YhVKtCvjXk0QIHQUUG+72PtkkN3NieWvtLmYzitsh2vDvhu2ggPJBcbDII+39CHuFaRqdRHXK27eR6W1Bw==">
<div class="dropzone-previews"></div>
<div class="form-group text required post_content"><textarea class="form-control text required" id="new_post_content_field" autofocus="autofocus" required="required" aria-required="true" placeholder=" Say something here!" name="post[content]"></textarea></div>
<div class="form-group hidden post_poster_id"><input class="form-control hidden" value="2" autofocus="autofocus" required="required" aria-required="true" type="hidden" name="post[poster_id]" id="post_poster_id"></div>
<div class="form-group hidden post_poster_type"><input class="form-control hidden" value="Participant" autofocus="autofocus" required="required" aria-required="true" type="hidden" name="post[poster_type]" id="post_poster_type"></div>
<div class="form-group hidden post_community_id"><input class="form-control hidden" value="1" autofocus="autofocus" required="required" aria-required="true" type="hidden" name="post[community_id]" id="post_community_id"></div>
<input type="submit" name="commit" value="Create Post" input_html="{:id=>"submit-all"}" class="btn btn-default" data-disable-with="Create Post">
<div class="dz-default dz-message"><span>Drop files here to upload</span></div></form>
application.js
Dropzone.options.newPostForm = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
paramName: "post[post_image]",
init: function() {
var myDropzone = this;
$("#submit-all").click(function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
}
Create Action in the Posts controller
def create
#post = Post.new(post_params)
respond_to do |format|
if #post.save
#post_comment = Comment.new()
format.js
format.json { render json: { message: "success", fileID: #post.id }, :status => 200 }
else
format.js {render inline: "toastr.error('Something went wrong');"}
format.jsnon { render json: { error: #post.errors.full_messages.join(',')}, :status => 400 }
end
end
end
Currently, if I hit 'submit' I get the flowing params
<ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"3OC6YhVKtCvjXk0QIHQUUG+72PtkkN3NieWvtLmYzitsh2vDvhu2ggPJBcbDII+39CHuFaRqdRHXK27eR6W1Bw==", "post"=>{"content"=>"ddddddd", "poster_id"=>"2", "poster_type"=>"Participant", "community_id"=>"1"}, "commit"=>"Create Post", "controller"=>"posts", "action"=>"create"} permitted: false>
So it seems no params that are related to the image are sent to the controller and I'm not sure how I can solve this.

Answer 1

I ended up finding what was the issue.
The input field for the image (below) shouldn't have been included in the form helper
<%= f.input :post_image, :label => false %>
And I was making a mistake setting the id of the submit button. I was using:
<%= f.button :submit, input_html: {id: 'submit-all' } %>
instead of:
<%= f.button :submit, id: 'submit-all' %>
This prevented the JS to select the appropriate form button.