reactjstypescripttypesmime-typesreact-dropzone

React-Dropzone, accepted files MIME type error


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!


Solution

  • 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'] 
    },