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!

Tophus

Answer 1

From the documentation

useDropzone({
  accept: {
    'image/png': ['.png'],
    'text/html': ['.html', '.htm'],
  }
})

I can't see anywhere that describes a structure like accept: {accepted: ['...']}

I'd say to change your code above to:

accept: {
  'image/png': ['.png'], 
  'image/jpeg': ['.jpg', '.jpeg'] 
},

Evidently

Oh it´s that simple. you´re a legend, thanks! – Tophus

Answer 2

@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

Indisputable