On Firefox ver 112 (64 bit) dialog doesn't open

[GlutVonSmark]

Describe the bug On Firefox browser version 112 dialog doesn't open. Works on Chrome and Edge without issues

To Reproduce Here's the code

const { getRootProps, open } = useDropzone({ multiple: false, accept: { 'text/csv': ['.csv', '.CSV'], }, maxSize: maxSize, onDrop: (acceptedFiles, rejectedFiles) => { ...not related to opening the dialog } });

Have a button with onClick={open} and also a div that opens a dialog when clicked on other browsers

[fahmilatib]

Which react-dropzone version are you using? This might be related to https://github.com/react-dropzone/react-dropzone/issues/1239#issuecomment-1279389115 . Upgrading to v14.2.3 would solve it

[Rahulk4128]

facing same issue

[GlutVonSmark]

I'm using the latstes version "react-dropzone": "^14.2.3",

[Rahulk4128]

even using the latest version it is not working. it is woking fine with google chrome.

[StampixSMO]

This is also broken for me on 14.2.3

Edit: it does work in the example, so it must be us :) https://react-dropzone.js.org/#section-basic-example

[Brqqq]

Destructure getInputProps from the hook. Then add to your dropzone: <input {...getInputProps()} />. That should fix it.

Dropzone tries to use the new File System Access API if supported. It doesn't need a <input type="file" ... /> to open the dialog.

However if you set useFsAccessApi to false on Chrome or use Firefox/Safari (where the file access api isn't supported at all), it needs an <input type="file" /> to open the dialog.

[StampixSMO]

Thanks @Brqqq

For the sake of everyone else: my mistake was stupid. I abstracted react-dropzone away in a hook, but made a mistake where the open() function was not bound to any <input /> element (it was never rendered). Works fine now!

[GlutVonSmark]

Destructure getInputProps from the hook. Then add to your dropzone: <input {...getInputProps()} />. That should fix it.

Dropzone tries to use the new File System Access API if supported. It doesn't need a <input type="file" ... /> to open the dialog.

However if you set useFsAccessApi to false on Chrome or use Firefox/Safari (where the file access api isn't supported at all), it needs an <input type="file" /> to open the dialog.

What if i'm not using an input? I'm having a div for the drag and drop functionality. Can't set type="file" on a div. I'm assuming I can't open the dialog with a div click without FS Access API

[Brqqq]

What if i'm not using an input? I'm having a div for the drag and drop functionality. Can't set type="file" on a div. I'm assuming I can't open the dialog with a div click without FS Access API

The input isn't visible. It's only there so you have a way to open the dialog. Otherwise you have to use the FS access API which is still poorly supported.

[GlutVonSmark]

ok that works. Should I close this one? I mean we have a workaround and the problem is with the browser support. Maybe just need to update docs so people are aware of this

[aventide]

I encountered this issue as well. File browser button would work on chrome/edge but not firefox.

In my case, the code I was working with had multiple input elements (with the {...getInputProps()}) throughout the component containing the dropzone. I removed the extraneous inputs, leaving only one at the 'top' level, and the issue went away.

[phani1585]

in my case , i had conditionally rendered <input ref={ref} onBlur={onBlur} {...getInputProps()} /> that is becomes an issue in firefox. the solution is so simple it always should be on the DOM if you want to open to work

[asos-aaroncooper]

Destructure getInputProps from the hook. Then add to your dropzone: <input {...getInputProps()} />. That should fix it.

Dropzone tries to use the new File System Access API if supported. It doesn't need a <input type="file" ... /> to open the dialog.

However if you set useFsAccessApi to false on Chrome or use Firefox/Safari (where the file access api isn't supported at all), it needs an <input type="file" /> to open the dialog.

Turns out you can hide the input and it still works. :D

<div>
            <input type="file" {...getInputProps()} style={{ display: "none" }} />

            <div
                {...getRootProps({ className: "dropzone" })}
                style={{ border: "1px solid lightgray", padding: 10, borderRadius: 10 }}
            >
                <p style={{ cursor: "default" }}>Click or drag file here to upload</p>
            </div>
</div>