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`	-