[BUG] `accept` ignores extensions when used with wildcards

Describe the bug

Using a wildcard for image/* and then declaring file extensions doesn’t seem to work as expected in Firefox and Brave/Chrome.

The following code will let users drop any image type and the jpeg/png file extensions are ignored.

Note (and this is almost more important as we don’t need to react to drop events): The same behaviour can be observed when the file picker dialog opens, it will allow picking other image extensions, not just jpeg and png.

useDropzone({
    accept: {
      'image/*': ['.jpeg', '.png']
    }
})

To Reproduce

Steps to reproduce the behavior:

1. Go to https://react-dropzone.js.org/#section-accepting-specific-file-types
2. Scroll to the 2nd example in the Browser limitations section (the one that “works”).
3. Drag a webp, jpg, gif, heic, heif file onto it
4. See “all files will be accepted” message

Expected behavior Should only accept jpeg and png.

The desired behaviour can be achieved by using multiple MIME types matching their extension:

useDropzone({
    accept: {
      'image/png': ['.png'],
      'image/jpeg': ['.jpeg'],
   }
})

or leaving out the MIME type entirely (which doesn’t seem to work on Windows as it reverts back to “All files (.)), unless FsAccess is disabled”:

useDropzone({
    accept: {
      '': ['.png', '.jpeg'],
   }
})

See: https://codesandbox.io/s/react-dropzone-example-forked-qcic4f?file=/src/App.js

Screenshots

Desktop (please complete the following information):

• OS: macOS 11.6.8
• Browser: Brave v1.41.100
• Version react-dropzone@14.2.2

[Haraldson]

Just came here now after a too optimistic upgrade (didn’t read up on the breaking change introduced in v13), and wanted to leave my +1: This format is way too limited and/or verbose, depending on how you see it. Having the wildcard mime type from the key added to the accept attribute is not expected behavior.

[akamfoad]

It would have been very helpful if the library accept a more generic data structure for accept, one I can think of is:

useDropzone({
    accept: [
        ".ext", "mime/type", { "mime/type": [ ".ext1, ".ext2"] }
    ]
})

This way, you can specify a specific extension without the need to specify the whole mimetype, for example when I want only .jpg and .jpeg files, I shouldn’t need to specify image/jpeg because this makes the input to accept every file extension that have the image/jpeg mimetype, for example .jfif files.

The current accept has limitations.