CODEWITHSUNDEEP
javascriptreactjsreact-dropzone
Roest
Roest

Reputation: 818

Dropzone accepted files filter

I'm trying to create a file upload for STL files. The code below works as in that in the onDrop function the console.log shows an empty array for all other file types and the files if they are of type STL. So it does what it's supposed to do.

However the line

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

always fires, even for stl files. Which certainly would confuse the user.

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;

Upvotes: 0

Views: 1273

Answers (1)

Vadim Sirbu
Vadim Sirbu

Reputation: 681

This is a bug, please see details here: https://github.com/react-dropzone/react-dropzone/issues/888

Solution: Downgrade to previous version of DropZone.

Upvotes: 1

Related Questions