typescript 如何选择目录中的文件并以包含相对路径的状态捕获它们

soat7uwm 于 2023-01-14 发布在 TypeScript

关注(0)|答案(2)|浏览(304)

我正在寻找一种通过文件对话框选择文件的方法。文件选择器需要：

仅限于目录选择
捕获所有选定的文件在一个单一的回调，以便他们可以被设置为一个状态
包括文件列表中所有文件的相对路径

我已经尝试了一些库中的文件选择器组件，如antd、react-dropzone、@rpldy/uploady、react-file-reader和react-file-picker，但似乎没有一个能够满足所有这三个要求。

typescript

来源：https://stackoverflow.com/questions/75089312/how-to-select-files-within-a-directory-and-capture-them-in-a-state-including-rel

2条答案

按热度按时间

1u4esq0p1#

您可以使用Uploady实现这一点。
当为文件输入元素使用webkitdirectory标志时，您确实会根据规范在所有浏览器（至少chrome和firefox）中获得webkitRelativePath属性。
现在，要获取文件列表，可以使用useBatchAddListener钩子。

import React, { useState } from "react";
import Uploady, { useBatchAddListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const MyUploadButton = ({ addFilesToState }) => {
  useBatchAddListener((batch) => {
    addFilesToState(batch.items.map(({ file }) => file));
  });

  return <UploadButton>Upload Files</UploadButton>;
};

const Uploader = () => {
  const [_, setFiles] = useState([]);

  return (
    <MyUploadButton
      addFilesToState={(files) => setFiles((prev) => [...prev, ...files])}
    />
  );
};

export default function App() {
  return (
    <Uploady destination={{ url: "[upload-url]" }} webkitdirectory="true" debug>
      <div className="App">        
        <Uploader />
      </div>
    </Uploady>
  );
}

参见sandbox。

赞(0）回复(0）举报 2023-01-14

xuo3flqw2#

不确定是否有一个React库，但你可以看看File System Access API。虽然它只在Chrome中工作，但也许<input type="file" webkitdirectory>在其他浏览器中也能工作，足以满足你的需要。

赞(0）回复(0）举报 2023-01-14