useFileDialog

Open file dialog with ease

Usage

Live Editor

function Demo() {
  const [files, open, reset] = useFileDialog();

  return (
    <div>
      <button onClick={() => open()}> Choose files</button>
      <button
        style={{ marginLeft: 20 }}
        disabled={!files}
        onClick={() => {
          reset();
        }}
      >
        Reset
      </button>
      {files && (
        <div>
          <p>
            You have selected: <b>{files.length} files</b>
            {Array.from(files).map((file) => {
              return <li key={file.name}>{file.name}</li>;
            })}
          </p>
        </div>
      )}
    </div>
  );
};

Result

Loading...

API

useFileDialog

Returns

readonly [FileList | null, (localOptions?: Partial<UseFileDialogOptions> | undefined) => Promise<FileList | null | undefined>, () => void]: A tuple with the following elements:

• file array.
• A function to open file dialog.
• A function to reset files

Arguments

Argument	Description	Type	DefaultValue
options	-	UseFileDialogOptions | undefined	-

UseFileDialogOptions

Property	Description	Type	DefaultValue
multiple	choose multiple file	boolean	true
accept	accept file type	string	'*'
capture	Specify the device to obtain files from the microphone or camera	string	-