React + react-dropzone: select "all file formats" by default, allowing to select any format within the specified

421 Views Asked by At

I'm using react-dropzone in a project to allow the user to select some files to upload. I've seen that I need to specify the files' format with their MIME types, which is not that convenient, but I can bypass that.

However, whenever the system file picker pops up, the file type selected to filter the user's files is set to the first one I specified in the accept parameter. So, for example, for the following code:

const {
    acceptedFiles,
    getInputProps,
    getRootProps
} = useDropzone({
    accept: {
        'application/pdf': ['.pdf'],
        'application/json': ['.json'],
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
        'image/bmp': ['.bmp'],
        'image/jpeg': ['.jpg', '.jpeg'],
        'image/png': ['.png'],
        'image/tiff': ['.tiff'],
        'image/x-pcx': ['.pcx'],
        'image/x-tiff': ['.tiff'],
        'text/plain': ['.txt'],
    },
    multiple,
});

The following select window pops up:

enter image description here

As you can see, the first type selected is the first one provided in the accept parameter, but the user may not notice that, and will just see only PDF files in their folder and won't see (maybe) the one they wanted to select.

Is there anyway I can provide "All types" as a default value, which displays all the files whose type fits inside all the provided types in accept?

So, basically, I'd like to display by default all files that have an accepted extension, without any prior specific filtering applied. If the user needs to narrow down that filtering, they can always do so by specifying the exact type in the window's type selector.

Thank you!

0

There are 0 best solutions below