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.

Thoracotomy

Why do you think it's a CSS issue, especially if there's no difference in the CSS between the two? – Hamitic

Sorry, by CSS I mean a styling issue like one doesn't have the proper styles applied. – Thoracotomy

That's what I meant, as well. – Hamitic

The form variant's icons were hidden, but the other's were not. – Thoracotomy

Did you ever resolve this issue? I'm experiencing the same thing, it's driving me nuts. – Bobstay

No, I switched to a different library. – Thoracotomy

Answer 1

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

Curlicue

I know it seems petty, but adding this as well made it look a lot better: .css('border-radius', '30px') – Appealing

Answer 2

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

Waiver

Answer 3

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

Chancelor