useFileDialog

輕鬆選取文件

Usage

即時編輯器

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

  return (
    <div>
      <button onClick={() => open()}> 選擇文件</button>
      <button
        style={{ marginLeft: 20 }}
        disabled={!files}
        onClick={() => {
          reset();
        }}
      >
        重置
      </button>
      {files && (
        <div>
          <p>
            您已選擇：<b>{files.length} 個文件</b>
            {Array.from(files).map((file) => {
              return <li key={file.name}>{file.name}</li>;
            })}
          </p>
        </div>
      )}
    </div>
  );
};

結果

API

useFileDialog

Returns

readonly [FileList | null, (localOptions?: Partial<UseFileDialogOptions> | undefined) => Promise<FileList | null | undefined>, () => void]: 包含以下元素的元組：

• 檔案陣列。
• 打開檔案選擇器函數。
• 重設函數。

Arguments

參數名	描述	類型	預設值
options	-	UseFileDialogOptions | undefined	-

UseFileDialogOptions

參數名	描述	類型	預設值
multiple	选择多个文件	boolean	true
accept	可以接受的文件类型	string	'*'
capture	指定设备，可以从麦克风或者摄像头中获取文件	string	-