Dropzone 接受的文件过滤器答案

【问题标题】：Dropzone accepted files filterDropzone 接受的文件过滤器
【发布时间】：2020-11-26 11:39:03
【问题描述】：

我正在尝试为 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;

【问题讨论】：

请自带一个可以工作的sn-p，如果你有一个sn-p可以清楚地显示你的问题，它会比没有sn-p更快地解决你的问题，例如，你可以从代码沙箱创建一个 sn-p

标签： javascript reactjs react-dropzone

【解决方案1】：

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

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

【讨论】：