react-dropzone accepts all uploaded file types instead of specified file type(s) in "accept" parameter

Question

My react-dropzone 'accept': { .. } parameter seems to be totally ignored when I am uploading files.

My useDropzone({}):

    const {getRootProps, getInputProps, isDragActive} = useDropzone({
        onDrop,
        noClick: true,
        'accept': {
            'video/mp4': ['.mp4', '.MP4'],
        },
    })

My onDrop Callback:

    const onDrop = useCallback((acceptedFiles, rejectedFiles) => {

        let test =  acceptedFiles.length || rejectedFiles.length
            ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
            : "Try dropping some files.";

        console.log(test);

        if (acceptedFiles.length > 0) {
            setSelectedFiles(acceptedFiles);
        }

        acceptedFiles.forEach((file, index, array) => {

            const reader = new FileReader()

            reader.onabort = (event) => {
                console.log('file reading was aborted')
            }

            reader.onerror = (event) => {
                console.log('file reading has failed')
            }

            reader.onload = (event) => {

                // Do whatever you want with the file contents
                const binaryStr = reader.result
                console.log(binaryStr)

            }

            reader.readAsArrayBuffer(file)

        })


    }, [])

The code:

        let test =  acceptedFiles.length || rejectedFiles.length
            ? `Accepted ${acceptedFiles.length}, rejected ${rejectedFiles.length} files`
            : "Try dropping some files.";

always returns: Accepted 1, rejected 0 files

no matter what, rejected will always be 0 even when I uploaded pdf, jpg, txt etc

Here is the codesandbox Link: https://codesandbox.io/s/kind-frost-zmyhd8?file=/pages/index.js

Anyone knows what is wrong with my code?

Uribe

Answer 1

You would have to give different mime types for different file formats: After reviewing different this way I was able to resolve the issues that I faced related to MIME types.

For doc, text, or pdf files:

useDropzone({
      accept: {
        "application/pdf": [".pdf"],
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
          [".docx"],
        "application/msword": [".doc"],
        "text/plain": [".txt"],
      },
    });

For audio/video files:

 useDropzone({
      onDrop,
      maxFiles: 1,
      accept: {
        "audio/mpeg": [".mp3"],
        "audio/wav": [".wav"],
        "audio/webm": [".webm"],
        "audio/flac": [".flac"],
        "audio/x-m4a": [".m4a"],

        "video/mp4": [".mp4"],
        "video/mpeg": [".mpeg"],
        "video/webm": [".webm"],
      },
    });

You guys can also refer to official common MIME types -> https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

Rectocele

Answer 2

According to documentation you need to provide accept prop like below (without quotes) :

useDropzone({
  accept: {
    'video/mp4': ['.mp4', '.MP4'],
  }
})

Here is working solution.

Karelian

Hi thanks for the reply, I have changed to: ` accept: { 'video/mp4': ['.mp4', '.MP4'], }` but sadly it makes no difference still, I still get Accepted 1, rejected 0 files – Uribe

Can you create codesandbox? – Karelian

Hi, I have added the codesandbox link – Uribe

I updated my answer with working example – Karelian

Answer 3

The documentation now says:

Note that the onDrop callback will always be invoked regardless if the dropped files were accepted or rejected. If you'd like to react to a specific scenario, use the onDropAccepted/onDropRejected props.

However the function signature is misleading because the parameter is named acceptedFiles even though it's a mix of both accepted and rejected files:

function onDrop(acceptedFiles)

Marmite

Answer 4

You can use fileRejections instead of rejectedFiles to achieve this

const {getRootProps, getInputProps, isDragActive, fileRejections, acceptedFiles} = useDropzone({
        onDrop,
        noClick: true,
        'accept': {
            'video/mp4': ['.mp4', '.MP4'],
        },
    })

Vuong