即使我使用 previewsContainer 也会在整个表单上显示 Dropzone

Question

我在过去 2 天尝试解决我的问题，但没有正确的解决方案，我真的需要帮助。

这是我的表格：

<% simple_form_for @something , html: { class: "form-horizontal dropzone"} do |f| %>
<% f.input :title %>
<% f.input :description %>
<div class="dropzone-previews">
    <div class="fallback">
      <%= f.simple_fields_for :uploads do |u| %>
        <%= u.input :attachment, as: :file, multiple: true %>
      <% end %>
    </div>
  </div>

和 js:

$(function () {
  Dropzone.autoDiscover = false;
  var mediaDropzone;
  mediaDropzone = new Dropzone(".dropzone", {
    maxFiles: 2,
    previewsContainer: '.dropzone-previews',
    addRemoveLinks: true,
    paramName: "issue[uploads_attributes][][attachment]",
    autoProcessQueue: true,
    clickable: true,
    headers: {
       'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
    }
  });
    mediaDropzone.on('sending', (file, xhr, formData) => {
       $.each(file.postData, function(k, v){
                formData.append(k, v);
            });
     });
});

上传工作正常，除预览外一切正常。

Answer 1

我已经解决了问题。当您将 dropzone 放置到表单元素时，它会在所有表单上为您提供额外的边框。因此，为了正确设置 dropzone 预览，我必须添加样式以形成并在我想看到 dropzone 的元素上设置边框。之后，我不得不更改该预览元素上的设置 "clickable"。所以在我的例子中，我使用了：

形式：

<% simple_form_for @something , html: { class: "form-horizontal dropzone" style: "border: 0"} do |f| %>
(...)
<div class="dropzone-previews" style="border-style: dashed;">
(...)
</div>

在 js 中：

clickable: ".dropzone-previews"

即使我使用 previewsContainer 也会在整个表单上显示 Dropzone

Dropzone display on whole form even if i use previewsContainer

javascript

ruby-on-rails-4

dropzone.js