Dropzone

Dropzone is a component that allows you to drag-and-drop files into a container to process them.

react-dropzone

Lucide

Installation

npx kibo-ui@latest add dropzone

The dropzone component is made up of the following subcomponents:

Prop	Type	Default
`multiple?`	`boolean`	-
`onDragEnter?`	`DragEventHandler<HTMLElement>`	-
`onDragOver?`	`DragEventHandler<HTMLElement>`	-
`onDragLeave?`	`DragEventHandler<HTMLElement>`	-
`accept?`	`Accept`	-
`minSize?`	`number`	-
`maxSize?`	`number`	-
`maxFiles?`	`number`	-
`preventDropOnDocument?`	`boolean`	-
`noClick?`	`boolean`	-
`noKeyboard?`	`boolean`	-
`noDrag?`	`boolean`	-
`noDragEventsBubbling?`	`boolean`	-
`disabled?`	`boolean`	-
`onDropAccepted?`	`(<T extends File>(files: T[], event: DropEvent) => void)`	-
`onDropRejected?`	`((fileRejections: FileRejection[], event: DropEvent) => void)`	-
`getFilesFromEvent?`	`((event: DropEvent) => Promise<(File \| DataTransferItem)[]>)`	-
`onFileDialogCancel?`	`(() => void)`	-
`onFileDialogOpen?`	`(() => void)`	-
`onError?`	`((err: Error) => void)`	-
`validator?`	`(<T extends File>(file: T) => FileError \| readonly FileError[] \| null)`	-
`useFsAccessApi?`	`boolean`	-
`autoFocus?`	`boolean`	-
`src?`	`File[]`	-
`className?`	`string`	-
`onDrop?`	`((acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void)`	-
`children?`	`ReactNode`	-

Prop	Type	Default
`children?`	`ReactNode`	-

Prop	Type	Default
`children?`	`ReactNode`	-