使用 React-dropzone 拖放空文件夹

Posted 2023-05-08

【中文标题】使用 React-dropzone 拖放空文件夹

【英文标题】：Drag and Drop empty folders with React-dropzone

【发布时间】：2022-01-20 17:42:22

【问题描述】：

我正在处理一个文件夹上传项目并为此使用 React-dropzone。

但是，当我删除一个文件夹并且该文件夹不包含任何内容时，则接受了文件 保持空白。我注意到acceptedFiles，每个文件对象都包含一个给出位置的“路径”属性，这是因为react-dropzone使用文件选择器库。

const onDrop = useCallback((acceptedFiles) => console.log(acceptedFiles)

但是根据文档，我可以创建一个自定义的 drop 事件，它可以检测文件夹是否被删除（即使它是空的） const getRootProps, getInputProps, isDragActive = useDropzone(onDrop, getFilesFromEvent: event => myCustomFileGetter(event))

有谁知道如何为我的空文件夹结构生成路径？ 这是一个问题，因为如果我要删除一个包含多个子文件夹的文件夹，只有那些文件夹会被其中包含文件的文件选择器检测到。

【参考方案1】：

似乎它使用的库会查找要上传的文件，如果文件夹中没有文件，则不会上传该文件夹。这源于“为什么需要上传一个空文件夹？”的想法。自己上传文件时。

这是文件选择器库本身的限制，因此最好找到另一个解决方案。

https://github.com/react-dropzone/react-dropzone/issues/934

【讨论】：

知道如何为空文件夹创建该路径吗？

文件选择器通过上传文件及其路径来工作，并根据路径创建文件夹结构。它无法在没有文件的情况下采用路径。但是，可能有不同的解决方案。为什么需要一个空文件夹？

例如，如果我们删除一个包含多个子文件夹的文件夹，其中一个不包含文件，它不会检测到它，我正在使用文档管理器软件，每当我删除一个文件夹时后端需要在删除文件夹结构时重新创建它，即使它是空的，并且该路径将是关键

这将与您打算执行的操作和您接受它的方法脱节，因为它只接受文件本身，而不是文件夹。也许更好的方法是接受一个压缩文件并使用您的后端解压缩并使用它，因为它将保存整个文件夹结构。你觉得这样行吗？

可能会，谢谢