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

Pierian

I had the same problem. Just trying to figure out what I did to solve. – Ceiba

Do you mean the exact file twice or just the same filename in different directories? – Tyree

@Tyree The exact file, i've updated my question to make it clearer – Pierian

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, – Mice

@Max Carroll Sure: github.com/Yuvaleros/material-ui-dropzone/issues/230 – Pierian

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.

Tyree

I tried this, and I couldn't get it to work. Could you post a code snippet where you got this to work? Thanks! – Pierian

You could use something like codesandbox.io – Pierian

@SheshankS. Done – Tyree

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. – Tyree

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 [email protected] I'm abe to use Dropzone without the Base – Surgeon