react-dropzone 在文件“聚合”期间向用户提供状态

问题描述

我打算使用 react-dropzone，但用户可能可以拖动包含 10000 多个文件的文件夹。对于该文件量，即使是该步骤的“聚合”元数据收集也需要大约 10-20 秒。是否可以获得该特定活动/功能的状态？

我尝试了一些钩子变量，例如 isDropActive - 但是当我将鼠标悬停在放置区域上时这似乎是正确的，而当我放置时它立即为 false。当我释放它时，它立即是错误的，然后开始收集大约 10000+ 个文件的数据。然后触发 onDrop 函数。

无论如何，我会拒绝超过特定文件号的文件上传，但我想在文件元数据步骤中显示进度。编辑：通过进度，我只是想展示一个微调器或类似“验证”的东西。一旦文件得到验证，我就会明白我将如何显示下一个操作的实际进度（在我的情况下上传）。

我只是使用最基本的代码：

import React,{useCallback} from 'react'
import {useDropzone} from 'react-dropzone'

function MyDropzone() {
  const onDrop = useCallback(acceptedFiles => {
      // for 10000+ files this only runs after ~10s+
      console.log(acceptedFiles)
  },[])
  const {getRootProps,getInputProps,isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ? // this status does not help me
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here,or click to select files</p>
      }
    </div>
  )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）