CODEWITHSUNDEEP
javascriptreactjstypescriptreact-typescriptreact-dropzone
Bryan Dellinger
Bryan Dellinger

Reputation: 5304

react-dropzone Parameter acceptedFiles implicitly has an any type

I am using react 18.2.0 with typescript and react dropzone 14.2.2

 const onDrop = useCallback(acceptedFiles  => {
        setFiles(acceptedFiles.map((file: any) => Object.assign(file, {
            preview: URL.createObjectURL(file)
        })))
    }, [setFiles])
    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

I am receiving

Parameter 'acceptedFiles' implicitly has an 'any' type

my repository is here https://github.com/bryandellinger/Reactivities

from package.json

"dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.46",
    "@types/react": "^18.0.15",
    "@types/react-calendar": "^3.5.2",
    "@types/react-dom": "^18.0.6",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^0.21.0",
    "date-fns": "^2.29.1",
    "formik": "^2.2.9",
    "history": "^4.10.1",
    "mobx": "^6.6.1",
    "mobx-react-lite": "^3.4.0",
    "react": "^18.2.0",
    "react-calendar": "^3.7.0",
    "react-cropper": "^2.1.8",
    "react-datepicker": "^4.8.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.0.8",
    "semantic-ui-react": "^2.1.3",
    "typescript": "^4.7.4",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },

file in question PhotoWidgetDropzone.tsx

import { useCallback } from 'react'
import { useDropzone } from 'react-dropzone'
import { Header, Icon } from 'semantic-ui-react'

interface Props {
    setFiles: (files: any) => void;
}

    export default function PhotoWidgetDropzone({setFiles}: Props) {
        const dzStyles = {
            border: 'dashed 3px #eee',
            borderColor: '#eee',
            borderRadius: '5px',
            paddingTop: '30px',
            textAlign: 'center' as 'center',
            height: 200
        }
    
        const dzActive = {
            borderColor: 'green'
        }
    
        const onDrop = useCallback(acceptedFiles  => {
            setFiles(acceptedFiles.map((file: any) => Object.assign(file, {
                preview: URL.createObjectURL(file)
            })))
        }, [setFiles])
        const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })
    
       
    
        return (
            <div {...getRootProps()} style={isDragActive ? {...dzStyles, ...dzActive} : dzStyles} >
                <input {...getInputProps()} />  
                <Icon name='upload' size='huge' />
                <Header content='Drop image here' />
            </div>
        )
    }

Upvotes: 2

Views: 926

Answers (1)

Daniel Allegretti
Daniel Allegretti

Reputation: 1

To fix the parameter 'acceptedFiles' implicitly has an 'any' type warning, just import from react-dropzone:

import { FileWithPath, useDropzone } from 'react-dropzone'

and add the type FileWithPath[]:

const onDrop = useCallback(acceptedFiles: FileWithPath[]  => {
    setFiles(acceptedFiles.map((file: FileWithPath) => Object.assign(file, {
        preview: URL.createObjectURL(file)
    })))
}, [setFiles])

Upvotes: 0

Related Questions