Skrypter Skrypter - 5 months ago 53x
Javascript Question

Dropzone display on whole form even if i use previewsContainer

Im try to solve my problem last 2 days and there is no right solution and im really need help.

This is my form:

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

and 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);

Upload working properly, everything works except preview.


I have resolved problem. When you put dropzone to form element, it give you extra border on all form. So to set up dropzone preview properly i had to add style to form and set border on element where i want to see dropzone. After that i had to change set up "clickable" on that preview element. So in my case i have used:

in form:

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

in js:

clickable: ".dropzone-previews"