Dropzone
Demo
Drop or select files...
Max of 2 files in type png
Props
| Prop | Type | Description |
|---|---|---|
title | string | The title displayed inside the dropzone area. |
description | string (optional) | A description or instructions displayed inside the dropzone. |
icon | LucideIcon (optional) | A custom icon to display inside the dropzone area. |
accept | Accept (optional) | File type restrictions for the dropzone. |
maxFiles | number (optional) | The maximum number of files allowed in the dropzone. |
onChanges | (files?: File[]) => void (optional) | Callback function when files are added or removed. |
classNames | { root?: string; dropzone?: string; fileitem?: string } (optional) | Custom class names for the dropzone and file item components. |
Styles
This component allows for custom styles via the classNames prop:
root: CSS class for styling the overall Dropzone component.dropzone: CSS class for styling the dropzone area.fileitem: CSS class for styling the file item list.
Functionality
- Supports file drag-and-drop, as well as file selection.
- Displays custom icons and file size information.
- Users can remove files from the list.
- Customizable to restrict file types and limit the number of files.