javascript - 使用 Paperclip 使用 Dropzone.js 上传 Rails 4 文件

Question

我有一个可以有一个图像的模型对象。当我创建新对象时，我希望能够使用 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>

Answer 1

您可以使用与 Dropzone 的 previewsContainer 选项不同的容器。例如，您可能只使用一个 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 defines where to display the file previews – if null the Dropzone element is used. Can be a plain HTMLElement or a CSS selector. The element should have the dropzone-previews class so the previews are displayed properly.