How to clear the Dropzone in React Dropzone Component after file upload?

Question

I need to destroy the dropzone component after file upload, not able to get the dropzone object to apply the dropzone.destroy() method.

Answer 1

To clear the dropzone, we need to get the dropzone object and use the dropzone.destroy() method. We need to first initialize a variable outside the complete component as:

var myDropzone;

To get the dropzone object we need to use the init event of the dropzone which gives us the dropzone object like below:

initCallback (dropzone) {
        myDropzone = dropzone;
        console.log("dropzone"+myDropzone);
    }
const eventHandlers = {
            addedfile: this.onDrop.bind(this),
            removedfile: this.removeFile.bind(this),
            init: this.initCallback.bind(this)
    }

Then we can call the dropzone.destroy() method after our upload is completed like this:

myDropzone.destroy();

It will reset our files array to [] and remove the files from the view also.