[BUG] File dialog enables only the first file type from accept, others are disabled

Describe the bug When defining the accept object like

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

the file drop option works properly. In case the user wants to pick a file from file dialog, only the first file type from accept is enabled, the rest are disabled and greyed out.

To Reproduce Steps to reproduce the behavior:

1. Go to “Accepting specific file types”: Click me
2. Click on the dropzone field
3. File dialog opens up
4. User can select a .jpeg file, but not a .png file

Expected behavior All defined file types in the accept object should be enabled for selection via file dialog

Desktop:

• OS: macOS Monterey (Version 12.3.1)
• Browser: Chrome (Version 101.0.4951.54 (Official Build) (x86_64))
• React DropZone: 14.2.0

[GlennBlicharzBounteous]

@shomyx - I had the same issue/confusion. It wasn’t obvious to me that only one file type was selected, because MacOS Catalina doesn’t show the “Options” select box by default. I read the discussion / tickets that @rolandjitsu provided on the File System Access API, and opted to disable that feature by adding useFsAccessApi: false to the useDropzone configuration.

const { fileRejections, getRootProps, getInputProps, open, isDragActive } = useDropzone({
    onDrop,
    noClick: true,
    noKeyboard: true,
    useFsAccessApi: false,
    accept: {
        'image/png': ['.png'],
        'image/jpeg': ['.jpg', '.jpeg'],
        'application/pdf': ['.pdf'],
        'application/msword': ['.doc'],
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx']
    },
    maxSize: 2000000,
    multiple: true
});

This, to me, works as expected. The one drawback, is that it combines all of the accepted file types into a single “Custom Files” entry in the “Options” select box. You may want to vote on having the File System Access API disabled by default: https://github.com/react-dropzone/react-dropzone/discussions/1186

[rolandjitsu]

@shomyx that’s expected behaviour when using the File System Access API. If you check the screencast I’ve attached, you’ll see that you need to select the option to select other mime types based on the accept attr.

https://user-images.githubusercontent.com/1479737/167239126-15ef8900-ecad-4b13-9605-e2a217b72b7a.mp4