0

在 My Rails 应用程序中，我需要用户能够发布始终包含文本和可选图像的 Facebook 风格的帖子。我需要在不重新加载页面的情况下发生这种情况。

由于我想使用 Dropzone.js 来管理异步图像上传，我一直在尝试将我的表单与 Dropzone 结合起来，但没有成功。我主要使用这个来源。

我在这里有点迷路了。我尝试过的如下。你能指出我正确的方向吗？

我的表格在这里

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

应用程序.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();
     });
  }
}

在 Posts 控制器中创建操作

  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

目前，如果我点击“提交”，我会得到流动的参数

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

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

4

1 回答 1

0

我最终找到了问题所在。

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

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

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

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

代替：

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

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

于 2017-02-14T12:46:08.543 回答