[BUG] Input element not getting set in Chrome

Describe the bug The file input element is not getting populated with the selected files in Chrome when using the OS file dialog. This is working properly in Firefox and Safari. When dragging files to the dropzone, it works in none of the browsers, but this is to be expected. #1037 may be related, although no solution was found there.

To Reproduce Steps to reproduce the behavior:

1. Go to the basic example
2. Select any file
3. Disable the display: none styling on the input element
4. Firefox/Safari will display the input with the selected file, but in Chrome it’ll say “No file chosen”

Expected behavior Behavior should be consistent across browsers.

Screenshots Firefox: Chrome:

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 102.0.5005.61 (Official Build) (x86_64)

[bvangraafeiland]

After doing some research myself, I found out that this is due to the default use of the File System Access API. The showOpenFilePicker method is not implemented in Safari and Firefox (https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker#browser_compatibility), therefore this piece of codes disables the API.

In Chrome, the API is available, so the input element is skipped. Is this intended behavior though?

For now, I’ve fixed it by manually setting useFsAccessApi to false.

[wpickachu]

boom~~~ @bvangraafeiland This helped me a lot. I also spend a whole day to debug this.