Using open() on Click does not work in some cases

[sdancer75]

Describe the bug

Using a modified version of the official example below to open the File Dialog Programmatically in my ReactJs project, it appears to be functioning properly under my local machine.

However, when I upload the code to AWS (Linux) server (non-secured) this functionality does not work.

I tested it, with all major browsers I had.

import React from 'react';
import {useDropzone} from 'react-dropzone';

function Dropzone(props) {
  const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({
    // Disable click and keydown behavior
    noClick: true,
    noKeyboard: true
  });

  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));

  return (
    <div className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here</p>
        <button type="button" onClick={open}>
          Open File Dialog
        </button>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </div>
  );
}

<Dropzone />

To Reproduce Run the Opening File Dialog Programmatically at https://react-dropzone.js.org/#section-basic-example

Expected behavior To open the file dialog

Screenshots

Desktop (please complete the following information):

• OS: Windows/Linux
• Browser [Firefox, chrome]
• Version [Firefox 124.01, Chrome 123.0.63]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

[sdancer75]

It seems that the problem is related to the secure content checking.

The https:// is not currently enabled in my AWS server & consequently, the fsAccessApiWorksRef() check below is always getting false.

const fsAccessApiWorksRef = useRef(typeof window !== 'undefined' && window.isSecureContext && useFsAccessApi && canUseFileSystemAccessAPI());
.....
 if (fsAccessApiWorksRef.current) {
......
    showOpenFilePicker();
......
}

i.e windows.isSecureContext returns false in the AWS server so, showOpenFilePicker is never called.

[todorpr]

I want to report the same issue - click doesn't open the window to select file. In Safari it works fine, but not in Chrome.

[george-eucare]

same issue , Safari works fine, but not in Chrome.