How to clear dropzone.js dropzone - dropzone.js

Question

I am starting to use dropzone.js and have run into a minor problem. I am able to upload files. I use a modal popup to get the file information.
The problem is when I go back the files I previously uploaded are still in the drop zone (with checkmarks). I want an empty dropzone.
Ideas?

Answer 1

All the answers I've seen involve assigning a variable when you initialize dropzone. If you don't want to do this extra step and already have your dropzone element: You can use Dropzone's forElement method to directly target your dropzone without the need for any variables:
Dropzone.forElement('#myDropzoneElementID').removeAllFiles(true)

Answer 2

Did you tried to call the "removeAllFiles" function of your dropzone object after the upload ?
See documentation : http://www.dropzonejs.com/#dropzone-methods
In the first answer of this post, the solution is also to call the "removeAllFiles" function :
removing all manually added files from Dropzone.js?
If it doesn't solve your problem, please give us more information

Answer 3

With jquery you can make something like this.
var dZUpload = $('#dZUpload).dropzone({
..
})
$('.click').click(function() {
dZUpload[0].dropzone.removeAllFiles();
})

Answer 4

You can call removeAllFiles function to clear dropzone object before upload.So when ever you try to upload something using dropzone it will be always clear.
myDropzone.removeAllFiles();

Answer 5

This may help someone who could not solve the problem because of the next scenario.
When i call removeFile i catch the removedfile event to send the remove request to the backoffice. So when i use removeAllFiles it's not only the preview that is removed but also the file itself from the server.
So I came up with this solution:
//I had the request depending on a flag
this.on("removedfile", function (file, hardRemove = 1) {
if(hardRemove){
// request the server to delete the file
}
});
// I created a new event for visual reset that calls the removedfile event with the
// hardRemove flag disabled, resets the array of files and emits the reset event
// to reset the dropzone initial layout
this.on("resetFiles", function () {
for (let file of this.files) {
this.emit("removedfile", file, 0);
}
this.files = [];
return this.emit("reset");
});
So whenever i want to reset the dropzone i just call the new event:
dropzone.emit("resetFiles");