I'm using / 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

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

• javascript
• reactjs
• material-ui
• react-dropzone

• 2 I had the same problem. Just trying to figure out what I did to solve. – Praveen Kumar Purushothaman Commented Aug 1, 2020 at 6:00
• Do you mean the exact file twice or just the same filename in different directories? – Mordechai Commented Aug 3, 2020 at 21:05
• @Mordechai The exact file, i've updated my question to make it clearer – Sheshank S. Commented Aug 3, 2020 at 21:25
• 2 I am a contributor for Material-ui-dropzone If you raise an issue detailing what you need perhaps we can discuss and schedule it for development. One possibility would be that we provide a way to reject the file from within the onChange method, – Max Carroll Commented Aug 4, 2020 at 6:56
• 1 @Max Carroll Sure: github./Yuvaleros/material-ui-dropzone/issues/230 – Sheshank S. Commented Aug 4, 2020 at 16:12

1 Answer 1

You can use DropzoneAreaBase which allows you to fine tune the ponent. 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.