React-Dropzone, accepted files MIME type error

Question

I´m currently building a react drop zone for obvious reason, but am getting those weird errors:

Skipped "accepted" because it is not a valid MIME type. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types for a list of valid MIME types.

You can define the data type, which will be accepted by the dropzone. It looks as follows:

useDropzone({
    accept: { accepted: ['image/png', 'image/jpeg'] },
    maxFiles: 1,
    multiple: false,
    onDrop: (acceptedFiles) => {
      setFiles(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    }
  });

there you can also see the accept key, from which im getting the error message. It has that weird syntax because of TypeScript:

export interface Accept {
  [key: string]: string[];
}

That´s the expected type for the accept- key.

Any ideas on why I´m getting this weird error message? (I also deactivated TS in that line and got the same message.

For some reason the code still works tho... So other files, which aren´t images are accepted... Glad for any help- cheers!

Answer 1

@arfi720 's answer does work for some browsers, but if you try to accept .png, .jpeg, and .jpg and following the documentation it won't work.

Here's an example

// Does not work

  const { getRootProps, getInputProps } = useDropzone({
    accept: {
      'image/png': ['.png'],
      'image/jpg': ['.jpg'],
      'image/jpeg': ['.jpeg'],
    },
  });

// Does work

  const { getRootProps, getInputProps } = useDropzone({
    accept: {
     'image/*': ['.jpeg', '.jpg', '.png'],
    },
  });

This is explained in the Browser limitations section in the documentation