Home > database >  React-Dropzone, accepted files MIME type error
React-Dropzone, accepted files MIME type error

Time:05-11

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!

CodePudding user response:

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