即使我使用预览，整个表单上的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的边框。之后，我不得不改变设置“可点击”的预览元素。所以，在我的情况我已经使用：

形式：

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