[BUG] Clicking the dropzone area won't open the choose file dialog on newest Chrome

[xpyx]

Hello and thanks for the great hook. I came across this bug this morning and thought that it should be reported.

Describe the bug
When clicking the dropzone, the dialog for choosing files does not appear. This might be due to browser update. Yesterday the click to open dialog was working as expected.

To Reproduce

    const { getRootProps, getInputProps } = useDropzone({
        validator: duplicateFileValidator,
        onDrop: (files: File[]) => {
            const uniques = Array.from(new Set(filesArray))
            setFilesArray([...uniques, ...files])
        },
        accept: acceptedFileTypes,
        maxSize: maxSizeBytes,
    })

<div className={styles.dropZone} {...getRootProps()} id="upload-file">
                    <input {...getInputProps()}/>
</div>

Expected behavior
A dialog for choosing a file should open. Works as expected in Firefox.

Desktop (please complete the following information):

• OS: macOS 12.5.1
• Chrome 105.0.5195.102 (Official Build) (arm64)
• React-dropzone version: 11.4.2

I tried it also on the latest 14.2.2, but same bug there.

[immutable-pro]

I can confirm I am seeing the same behavior, using 14.2.2. It works on Firefox 104.0.2 and Gnome Web Browser 42.4, but not in Chrome 105.0.5195.125.

Some more details:

In openFileDialog callback function, window.showOpenFilePicker throws:

DOMException: Failed to execute 'showOpenFilePicker' on 'Window': Must be handling a user gesture to show a file picker.

When it tries to fall back to the inputRef click function, it fails, but it logs a warning in the console:

File chooser dialog can only be shown with a user activation.

Weirdly, some times window.showOpenFilePicker throws:

The user aborted the request

[immutable-pro]

This is very likely a duplicate of #1127

[ahmedmukhtar1133]

Facing same issue:
OS: macOS 12.5.1
Chrome 105.0.5195.125 (Official Build) (arm64)

[nettum]

I can confirm that I got the same issue in chrome when the accept-option is set.

Not working on Google Chrome Version 106.0.5249.61 (Official Build) (64-bit).
Working on Firefox Browser 105.0.1 (64-bit).
Both tests on Ubuntu 22.04.1 LTS.

Example code:

  const {
    acceptedFiles,
    fileRejections,
    getRootProps,
    getInputProps,
    isDragActive
  } = useDropzone({
    accept: {
      'image/jpeg': [],
      'image/png': [],
    },
    maxSize: 10485760
  });

If I remove the accept-option from the hook it also works in chrome, e.g:

  const {
    acceptedFiles,
    fileRejections,
    getRootProps,
    getInputProps,
    isDragActive
  } = useDropzone({
    maxSize: 10485760
  });

[merveillevaneck]

can also confirm that this fails on latest chrome version. tested safari as well and that seems to be working fine. So must be something api related on google chrome's side.

update: after snooping around i found an open pr that is being blocked from merging due to no one having reviewed it yet #1233 . I have no idea if this might be related to this bug popping up recently. Other than his pr, there's nothing chrome api related in pr's from what i can see.

[godinhojoao]

Hi, just trying to help who needs.

I was having this same problem and I tried to change my react-dropzone version from 14.2.2 to 11.4.2 and other older versions, but it didn't work.

I also tried to use the property: useFsAccessApi: false, but it didn't work too.

So I decided to solve this problem on my own. As I already knew that the problem was ocurring because of the property accept: { 'image/jpeg': [], 'image/png': [] }, I did remove this property and then I created my expected validation into the onDrop function.

Example:

 async function uploadImage (currentFile) {
    const acceptedFormats = ['image/jpeg', 'image/png', 'image/jpg']
    const file = currentFile && currentFile[0]
  
    const isFileValid = file && acceptedFormats.includes(file.type)
    if (!isFileValid) { // return error  }
    
    // do upload
 }

[Egr711]

Can confirm was having the same issue in Chrome 105.0.5195.125
upgrading to version 14.2.3 and updating chrome to latest 106.0.5249.119 fixed it

[panta82]

Disabling useFsAccessApi worked for me.
DropZone 14.2.3, Chrome Version 115.0.5790.102 (Official Build) (64-bit)

[dahyeyudev]

I was having this same problem in Chrome 115.0.5790.114 (arm64) and
updating chrome to latest version 115.0.5790.170 (arm64) fixed this problem.

[actuallymentor]

Can confirm this issue, updating to 116.0.5845.163 did NOT solve the issue.

[ndvo]

Disabling useFsAccessApi worked for me as well.