How do I make a material ui dropzone area not allow duplicates?

Question

I'm using https://yuvaleros.github.io/material-ui-dropzone/ and I'm trying to make it so that it doesn't allow uploading duplicates of previously uploaded files.

I've tried on onchange function that removes the file from the <input type="file"> if there's already a file with that name that is embedded into <DropzoneArea> but I don't know how to remove this graphic:

I've also looked at the documentation of the Material UI Dropzone, without any luck

Answer 1

You can use DropzoneAreaBase which allows you to fine tune the component. You can control the files list via passing the files in the fileObjects array and updating in the onAdd/onDelete using your logic.

Note, you can play around with the snackbar to not show anything when an existing file was added, I'll leave this up to you.