react-dropzone：拖拽文件时（未放下前）预检查文件问题求助

我懂你想要实现的效果——在用户把文件拖到上传区域但还没松手放下的那一刻，就提前检查文件是否符合要求，而不是等文件放下后才提示。确实react-dropzone默认提供的draggedFiles、acceptedFiles这些参数，都是在文件完成拖拽放下动作后才会更新的，没法满足你提前校验的需求。

这里有个可行的解决方案，核心是直接监听拖拽过程中的onDragOver事件，从事件对象的dataTransfer里拿到当前拖拽的文件，然后实时做校验：

函数组件版本（推荐） #

用useDropzone钩子的话，你可以在getRootProps里自定义onDragOver事件处理函数：

import { useDropzone } from 'react-dropzone';
import { useState } from 'react';

const FileUpload = () => {
  const [hasInvalidFiles, setHasInvalidFiles] = useState(false);

  const handleDragOver = (event) => {
    // 必须阻止默认行为，不然浏览器会直接打开拖拽的文件
    event.preventDefault();
    // 从dataTransfer中提取拖拽的文件列表
    const draggingFiles = Array.from(event.dataTransfer.files);
    // 这里做你需要的文件检查，比如校验是否为PDF
    const invalid = draggingFiles.some(file => file.type !== 'application/pdf');
    setHasInvalidFiles(invalid);
  };

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: 'application/pdf',
    onDrop: (acceptedFiles) => {
      // 处理文件放下后的逻辑
      console.log('已接受的PDF文件:', acceptedFiles);
      setHasInvalidFiles(false);
    }
  });

  return (
    <div 
      {...getRootProps({ onDragOver: handleDragOver })}
      style={{
        border: hasInvalidFiles ? '2px solid red' : isDragActive ? '2px solid green' : '2px dashed gray',
        padding: '2rem',
        textAlign: 'center',
        cursor: 'pointer'
      }}
    >
      <input {...getInputProps()} />
      {hasInvalidFiles ? (
        <p style={{ color: 'red' }}>请拖拽PDF格式的文件！</p>
      ) : isDragActive ? (
        <p>松开即可上传</p>
      ) : (
        <p>拖拽PDF文件到这里，或点击选择文件</p>
      )}
    </div>
  );
};

类组件版本 #

如果你还在使用类组件，可以直接在Dropzone的子元素上绑定onDragOver事件：

import Dropzone from 'react-dropzone';
import React from 'react';

class FileUpload extends React.Component {
  state = { hasInvalidFiles: false };

  handleDragOver = (event) => {
    event.preventDefault();
    const draggingFiles = Array.from(event.dataTransfer.files);
    const invalid = draggingFiles.some(file => file.type !== 'application/pdf');
    this.setState({ hasInvalidFiles: invalid });
  };

  handleDragDrop = (acceptedFiles) => {
    console.log('已上传文件:', acceptedFiles);
    this.setState({ hasInvalidFiles: false });
  };

  render() {
    const { hasInvalidFiles } = this.state;
    return (
      <Dropzone accept="application/pdf" onDrop={this.handleDragDrop}>
        {({ isDragActive }) => (
          <div
            onDragOver={this.handleDragOver}
            style={{
              border: hasInvalidFiles ? '2px solid red' : isDragActive ? '2px solid green' : '2px dashed gray',
              padding: '2rem',
              textAlign: 'center',
              cursor: 'pointer'
            }}
          >
            {hasInvalidFiles ? (
              <p style={{ color: 'red' }}>仅支持PDF文件，请重新拖拽！</p>
            ) : isDragActive ? (
              <p>松开完成上传</p>
            ) : (
              <p>拖拽PDF文件到这里，或点击选择</p>
            )}
          </div>
        )}
      </Dropzone>
    );
  }
}

关键要点 #

• 一定要调用event.preventDefault()，否则浏览器会触发默认的文件打开行为，打断你的组件逻辑。
• dataTransfer.files返回的是FileList对象，需要转成数组才能用数组方法进行过滤、遍历。
• 你可以根据校验结果更新组件状态，比如改变上传区域的边框颜色、显示错误提示，给用户实时的视觉反馈。

内容的提问来源于stack exchange，提问作者PeteMeier