使用 Paperclip 使用 Dropzone.js 上传 Rails 4 文件答案

【问题标题】：Rails 4 file upload with Dropzone.js using Paperclip使用 Paperclip 使用 Dropzone.js 上传 Rails 4 文件
【发布时间】：2014-10-16 16:38:02
【问题描述】：

我有一个可以有一个图像的模型对象。当我创建新对象时，我希望能够使用Dropzone.js 拖放新图像。模型对象还具有其他属性，例如名称等。因此表单具有多个字段。我想要看起来像这样的东西：

 Name *:
 ------------------------ 
 I                       I
 ------------------------

Image:

---------------------------------
I                               I
I          Dropzone             I
I                               I
---------------------------------

                           Submit

我使用Boostrap JS modal 提交表单。我正在努力按照我的意愿（或根本没有）呈现放置区。我的表单目前看起来像这样（我使用HAML）：

= form_for @idea, remote: remote, html: {role: :form, "data-model" => 'idea', multipart: true}  do |f|

.form-group
  = f.label :name, "Title", :class => "required"
  = f.text_field :name, :class => "form-control"

# I have tried to create a form within the form (in some different ways), but I'm not sure if this is the correct approach...

%form{class: "dropzone"}
  .fallback
    = f.file_field :image

现在完全不显示放置区。我已验证文件已正确安装。如果我将class: "dropzone" 添加到我的form_for 行，则放置区会显示，但会覆盖整个表单（包括其他字段）。

我使用'dropzonejs-rails' 安装Dropzone。

有什么想法可以达到我想要的效果吗？

更新

生成的表单的相关部分如下所示：

<form accept-charset="UTF-8" action="/ideas" class="new_idea" data-model="idea" data-remote="true" enctype="multipart/form-data" id="new_idea" method="post" role="form">

    <form class='dropzone'></form>
      <div class='fallback'>
        <input id="idea_image" name="idea[image]" type="file" />
      </div>

    <div class='form-group'>
      <input class="btn btn-large btn-primary" name="commit" type="submit" value="Create Idea" />
    </div>
</form>

【问题讨论】：

浏览器控制台有报错吗？另外，你能把生成的 HTML 表单代码贴出来吗？
@EgeErsoz 我已经用生成的表单的相关部分更新了我的问题。找到<form class='dropzone'></form>，看起来不对。但是，我不确定这是否是正确的方法。
看起来差不多。 Dropzone.js 寻找具有dropzone 类的表单元素并将其自身附加到它们。浏览器控制台中是否有任何错误？如果您在那里复制 HTML 并包含所需的 javascript，您可以在 jsfiddle 中重现它吗？

标签： javascript jquery ruby-on-rails paperclip dropzone.js

【解决方案1】：

您可以拥有与带有previewsContainer 选项的表单不同的容器到 Dropzone。例如，您可能只使用 div 并添加 dropzone-previews 类，如下所示：

= form_for @idea, remote: remote, html: {role: :form, "data-model" => 'idea', multipart: true}  do |f|

  .form-group
    = f.label :name, "Title", :class => "required"
    = f.text_field :name, :class => "form-control"

  .dropzone-previews
    %p.dz-message You can drop an image here or click to upload.

    .fallback
      = f.file_field :image

:javascript
  Dropzone.options.#{@ideas} = {
    previewsContainer: '.dropzone-previews',
    ...
  }

如Dropzone.js page 中所述：

previewsContainer 定义显示文件预览的位置 - 如果为 null，则使用 Dropzone 元素。可以是普通的 HTMLElement 或 CSS 选择器。该元素应具有 dropzone-previews 类，以便正确显示预览。

【讨论】：