How to clear dropzone.js dropzone

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?

5 Answers

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) 

Did you tried to call the "removeAllFiles" function of your dropzone object after the upload ?

See documentation :

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

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

With jquery you can make something like this.

var dZUpload = $('#dZUpload).dropzone({ .. }) $('.click').click(function() { dZUpload[0].dropzone.removeAllFiles(); }) 

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