无法将正常形式与 Dropzone.js 组合

Question

在我的 Rails 应用程序中，我需要用户能够 post Facebook 风格的 posts，它总是包含文本和可选的图像。我需要在不重新加载页面的情况下发生这种情况。

因为我想使用 Dropzone.js 来管理异步图片上传，所以我一直在尝试将我的表单与 Dropzone 结合，但没有成功。我主要使用this source。

我有点迷路了。我试过的是下面。你能给我指出正确的方向吗？

我的表格在这里

    <%= 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 %>

结果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=>&quot;submit-all&quot;}" 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();
     });
  }
}

在帖子控制器中创建操作

  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

目前，如果我点击 'submit'，我会得到流动的参数

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

因此似乎没有与图像相关的参数发送到控制器，我不确定如何解决这个问题。

Answer 1

我最终找到了问题所在。

图像的输入字段（下方）不应包含在表单助手中

<%= f.input :post_image, :label => false %>

而且我在设置提交按钮的 ID 时犯了一个错误。我正在使用：

<%= f.button :submit, input_html: {id: 'submit-all' }  %>

而不是：

<%= f.button :submit, id: 'submit-all'   %>

这阻止了 JS select 适当的表单按钮。

无法将正常形式与 Dropzone.js 组合

Unable to combine a normal form with Dropzone.js

forms

ruby-on-rails

dropzone.js

asynchronous-javascript