Dropzone.js remove link hidden behind pop-up message

Question

I am using Dropzone.js to add file drag and drop functions to an upload form, and it looks good and all works great.

However, when a file is rejected, if it is too large or not an allowed extension, the pop up error message hides the "remove" link, so you cant remove that bad file icon.

Is there any way around this?

I think you can set to remove bad items from the queue automatically, but then the user wouldnt get the explanation message.

Maybe hide the "remove" text for a bad file and add a link to the pop up message?

Or change the "remove" links to a small "X" icon at the bottom right corner of the icon that wouldnt be hidden?

Not sure how to do either of these, or if there is a better solution to this?

Ilium

Answer 1

One solution is customize the dropzonejs CSS for the preview template to adjust the error message. For example, in your case you could update:

.dropzone .dz-preview .dz-error-message {
    top: 150px!important;
}

And this is the result:

Roble

Is the !important strictly necessary? I don't find that it is in my case. – Caneghem

@BenJohnson It depends, but probably not, so you can remove it. – Roble

Answer 2

When faced with the same problem I chose to solve it by both shifting the tooltip a little lower and changing the position and size of its arrow to not obscure the remove link. I also shortened the text of the link to just "remove" and styled it to look better.

Here are my CSS customizations:

.dropzone .dz-preview .dz-image img {
    margin: auto;   /* center the image inside the thumbnail */
}
.dropzone .dz-preview .dz-error-message {
    top: 140px;     /* move the tooltip below the "Remove" link */
}
.dropzone .dz-preview .dz-error-message:after {
    left: 30px;     /* move the tooltip's arrow to the left of the "Remove" link */
    top: -18px;
    border-bottom-width: 18px;
}
.dropzone .dz-preview .dz-remove {
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
}

Subsidy

Answer 3

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block; 
  position: absolute; /* add this */
  top: 150px;         /* add this */
}

Dyslexia

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Impaste

Answer 4

One of the suggestions in your question could also work as an alternative solution. Instead of moving the tooltip, you could also move the "remove" button and even change the text to something like this "✖️" or custom html.

/* Change position of remove button */
.dz-remove {
    z-index: 999;
    position: absolute;
    display: block;
    top: 0%;
    left: 100%;
    margin-left: 5px;
    margin-top: -15px;
}

const myDropzone= new Dropzone('#myDropzone',{
    ...
    addRemoveLinks: true,
    dictRemoveFile: "<div><span class='fa fa-trash text-danger' style='font-size: 1.5em;'></span></div>", // Or simply replacing it by "✖️" 
    ...
})

Cathepsin