CODEWITHSUNDEEP
dropzone.js
mlewis54
mlewis54

Reputation: 2380

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?

Upvotes: 28

Views: 48738

Answers (5)

Tiago_nes
Tiago_nes

Reputation: 923

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

Upvotes: 2

chevybow
chevybow

Reputation: 11888

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)

Upvotes: 40

Druta Ruslan
Druta Ruslan

Reputation: 7402

With jquery you can make something like this.

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

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

Upvotes: 7

humble_code
humble_code

Reputation: 51

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

Upvotes: 5

Aliz
Aliz

Reputation: 756

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

Upvotes: 22

Related Questions