How to clear dropzone.js dropzone

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?

Kathrynkathryne

Answer 1

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

Demigod

Answer 2

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)

Lohner

This is actually a much cleaner, and preferable method. Tested 100% works. – Prehensible

Answer 3

With jquery you can make something like this.

var dZUpload = $('#dZUpload).dropzone({
  ..
})

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

Bitstock

Thanks for the added info. – Kathrynkathryne

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

Artair

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

Kindliness