dropzone.js: checkmark and x icons show after upload

Question

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.

Answer 1

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

Answer 2

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");
});