CODEWITHSUNDEEP
reactjsnext.jsfile-uploadtsxreact-dropzone
InfernalCoder
InfernalCoder

Reputation: 1

"Accept" giving headaches in React Dropzone

Error thrown in terminal: Argument of type '{ accept: { 'image/png': string[]; 'text/html': string[]; }; maxFiles: number; onDrop: (acceptedFiles: T[]) => void; }' is not assignable to parameter of type 'DropzoneOptions'. Type '{ accept: { 'image/png': string[]; 'text/html': string[]; }; maxFiles: number; onDrop: (acceptedFiles: T[]) => void; }' is missing the following properties from type 'Pick<React.HTMLProps, PropTypes>': multiple, onDragEnter, onDragOver, onDragLeave

Error thrown when using npm run dev: Skipped "0" 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.

Here's my code for the FileUpload component:


import { Inbox } from 'lucide-react'
import React from 'react'
import { useDropzone } from 'react-dropzone'

const FileUpload = () => {
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: {
      'application/pdf': ['.pdf'],
    },
    maxFiles: 1, 
    onDrop: (acceptedFiles) => {
      console.log(acceptedFiles)
    }
  });

  return (
    <div className="p-2 bg-white rounded-xl">
      <div
        {...getRootProps({
          className: 'border-dashed border-2 rounded-xl cursor-pointer bg-gray-50 py-8 flex justify-center items-center'
        })}
      >
        <input className="input-zone" {...getInputProps()}/>
        <div className="flex-col">
          <Inbox className="w-10 h-10 text-purple-500 ml-9" />
          <p className="mt-2 text-sm text-slate-400">Drop your PDF here</p>
        </div>
      </div>
    </div>
  )
}

export default FileUpload

I searched all of the docs, the accept key in the code is giving issues and i'm not sure if it's the formatting or something. Somebody please help!!

Upvotes: 0

Views: 68

Answers (0)

Related Questions