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

I had the same problem. Just trying to figure out what I did to solve. — Praveen Kumar Purushothaman, Aug 01 '20 at 06:00
Do you mean the exact file twice or just the same filename in different directories? — Mordechai, Aug 03 '20 at 21:05
@Mordechai The exact file, i've updated my question to make it clearer — Sheshank S., Aug 03 '20 at 21:25
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, Aug 04 '20 at 06:56
@Max Carroll Sure: https://github.com/Yuvaleros/material-ui-dropzone/issues/230 — Sheshank S., Aug 04 '20 at 16:12

Mordechai · Accepted Answer · 2020-08-06T15:54:16.380

6

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.

edited Aug 06 '20 at 15:54

answered Aug 03 '20 at 21:47

Mordechai

15,437
2
41
82

I tried this, and I couldn't get it to work. Could you post a code snippet where you got this to work? Thanks! – Sheshank S. Aug 04 '20 at 16:28
You could use something like https://codesandbox.io/ – Sheshank S. Aug 06 '20 at 04:15
@SheshankS. Done – Mordechai Aug 06 '20 at 15:54
1

Btw comparing the data string might not be the best solution for large files. You might rather use a combination of filename and size to assume the same file. – Mordechai Aug 07 '20 at 13:45
Just saying currently when you do npm install it goes to version 2.5.0 but in your sandbox, it's version 3. It's weird. Attempted import error: 'DropzoneAreaBase' is not exported from 'material-ui-dropzone'. and i got that error after doing `npm install material-ui-dropzone@3.3.1` I'm abe to use Dropzone without the Base – jack blank Apr 02 '21 at 02:48

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

1 Answers1