Probably a CSS issue, but when I create a dropzone box programmatically I get the checkmark and x icons as well as other text after it finishes (see linked image).

<div id="header-dropzone"></div>
$("#header-dropzone").dropzone({ url: "/header" })

If I just use the form and just build it using the dropzone initialization, it doesn't show the icons after upload.

<form action="/header" class="dropzone"></form>

Why does the jquery-style one not hide those icons? They're using the same css.

Probably a CSS issue, but when I create a dropzone box programmatically I get the checkmark and x icons as well as other text after it finishes (see linked image).

<div id="header-dropzone"></div>
$("#header-dropzone").dropzone({ url: "/header" })

If I just use the form and just build it using the dropzone initialization, it doesn't show the icons after upload.

<form action="/header" class="dropzone"></form>

Why does the jquery-style one not hide those icons? They're using the same css.

• javascript
• css
• dropzone.js

• Why do you think it's a CSS issue, especially if there's no difference in the CSS between the two? – TylerH Commented Aug 21, 2015 at 5:13
• Sorry, by CSS I mean a styling issue like one doesn't have the proper styles applied. – voodoogiant Commented Aug 22, 2015 at 2:25
• That's what I meant, as well. – TylerH Commented Aug 22, 2015 at 2:38
• The form variant's icons were hidden, but the other's were not. – voodoogiant Commented Aug 23, 2015 at 3:09
• Did you ever resolve this issue? I'm experiencing the same thing, it's driving me nuts. – Jacob Joz Commented Jul 28, 2016 at 6:47

3 Answers 3

I just filed a bug at: https://gitlab.com/meno/dropzone/issues/57

Meanwhile, a workaround is to manually fix this up, by turning the white tick green and the white-cross invisible (or vice-versa):

theDropzone.on("success", function(file){   
  $(".dz-success-mark svg").css("background", "green");
  $(".dz-error-mark").css("display", "none");
});
theDropzone.on("error", function(file) {
  $(".dz-error-mark svg").css("background", "red");
  $(".dz-success-mark").css("display", "none");
});

I ran into this issue too. My solution was to add the dropzone class to the element after initializing it. This gets around the autoDiscover issue, but keeps the check/x behavior working.

Here's my code

$("#my-dropzone").dropzone({ /* options */ });
$("#my-dropzone").addClass("dropzone");

I ran into this issue and eventually determined that my document did not contain the CSS for the library (I had forgotten to import it). Importing the *.css into my master *.scss file resolved the issue.

(using .NET, node_modules (NPM), and *.scss):

@import "~dropzone/dist/dropzone.css";