Dropzone 接受的文件过滤器

Question

我正在尝试为 STL 文件创建文件上传。下面的代码在 onDrop 函数中工作，console.log 为所有其他文件类型和文件（如果它们是 STL 类型）显示一个空数组。所以它做了它应该做的事情。

不过行

{isDragReject && 'File type not accepted, sorry!'}

总是触发，即使是 stl 文件。这肯定会让用户感到困惑。

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

const FileDropzone = () => {
const maxSize = 100000000;

const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
}, []);

const {
    isDragActive,
    getRootProps,
    getInputProps,
    isDragReject,
    acceptedFiles,
    rejectedFiles,
} = useDropzone({
    onDrop,
    accept: '.stl',
    minSize: 0,
    maxSize,
});

const isFileTooLarge =
    rejectedFiles &&
    rejectedFiles.length > 0 &&
    rejectedFiles[0].size > maxSize;

return (
    <div className="container text-center mt-5">
        <div {...getRootProps()}>
            <input {...getInputProps()} />
            {!isDragActive && 'Click here or drop a file to upload!'}
            {isDragActive && !isDragReject && "Drop it like it's hot!"}
            {isDragReject && 'File type not accepted, sorry!'}
            {isFileTooLarge && (
                <div className="text-danger mt-2">File is too large.</div>
            )}
        </div>
    </div>
);
};

export default FileDropzone;

Answer 1

这是一个错误，请在此处查看详细信息：https://github.com/react-dropzone/react-dropzone/issues/888

解决方案：降级到之前版本的 DropZone。

Dropzone 接受的文件过滤器

Dropzone accepted files filter

javascript

reactjs

react-dropzone