useFileDialog

轻松选取文件

useFileDialog 提供了一种以编程方式打开浏览器原生文件选择器的方法，无需可见的 <input type="file"> 元素。它返回一个包含选择的 FileList（或 null）、触发对话框的 open 函数和清除选择的 reset 函数的元组。你可以配置接受的文件类型、多选和设备捕获（摄像头/麦克风）。

使用场景

• 构建不依赖默认 <input> 外观的自定义样式文件上传按钮
• 实现拖放上传区域，附带可选的”浏览文件”备选方案
• 从任何交互元素（例如卡片、图标或上下文菜单项）触发文件选择

注意事项

• SSR 安全：在服务端渲染期间文件列表返回 null，函数返回空操作。服务端不会访问 DOM。
• 文件过滤：使用 accept 选项限制可选文件类型（例如 "image/*"、".pdf,.doc"），遵循 HTML accept 属性语法。
• 捕获：使用 capture 选项可在移动设备上直接从设备摄像头或麦克风请求文件。

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

UseFileDialogOptions