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)

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