reactjs - React-Dropzone, accepterade filer MIME-typ fel

Jag bygger för närvarande en React-dropzon av uppenbara skäl, men får de där konstiga felen:

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.

Du kan definiera datatypen som kommer att accepteras av droppzonen. Det ser ut som följer:

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

där kan du också se accepteringsknappen, från vilken jag får felmeddelandet. Den har den där konstiga syntaxen på grund av TypeScript:

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

Det är den förväntade typen för accept-tangenten.

Några idéer om varför jag får detta konstiga felmeddelande? (Jag avaktiverade också TS på den raden och fick samma meddelande.

Av någon anledning fungerar koden fortfarande ändå... Så andra filer, som inte är bilder, accepteras... Glad för all hjälp - tack!

Svar #1

@arfi720:s svar fungerar för vissa webbläsare, men om du försöker acceptera .png, .jpeg och .jpg och följa dokumentationen kommer det inte att fungera.

Här är ett exempel

// 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'],
    },
  });

Detta förklaras i avsnittet Webbläsarbegränsningar i dokumentationen

Svar #2

Från dokumentationen

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

Jag kan inte se någonstans som beskriver en struktur som accept: {accepted: ['...']}

Jag skulle säga att ändra din kod ovan till:

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

Relaterade artiklar