How to reset a dropzone to have no files?

[ndp]

I have a dropzone working well. Thanks!

But once I process the files with (with my external code), it's not obvious how to remove the acceptedFiles from the component. The acceptedFiles are controlled by the useDropzone state.

I have looked through the docs and code, and don't see anything. I've tried going after inputRef.current.value to no avail. Is there a good way to do this?

[danielnoravia]

Simply stop using acceptedFiles 🙂

Create your own file array with useState:

const [files, setFiles] = useState<File[]>([]);

Then write your onDrop callback (which gives you the File[] as the first agument) in such way that it will copy the files to your state:

onDrop: (newFiles: File[]) => {
  setFiles([ ...files, ...newFiles ]);
}

Of course you are encouraged to write your other callbacks as well (e.g., onFileDialogCancel: () => setFiles([]), etc) to handle your use case accordingly.

[rolandjitsu]

@danielnoravia thanks for helping @ndp out. That's exactly how it should be done. The internal state of this lib is not meant to be used by users and users should manage their own state.