File Drop
A file drop component for uploading files
Drop files here, or click to select
The FileDrop component provides a user-friendly drag-and-drop interface for uploading files.
It supports customization of text, color, icon, and much more.
Want a single file upload? Check out the FileInput component.
Usage
javascript
1import FileDrop from "@/components/atoms/FileDrop"; 2 3<FileDrop 4 onDrop={(files) => console.log(files)} 5/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Drop files here, or click to select" | The text to display in the component. |
| subtext | string | "" | The subtext to display in the component. |
| color | string | "gray" | The base color (use tailwind.config). |
| activeColor | string | "primary" | The base color (use tailwind.config). |
| icon | ReactNode | - | The icon to display in the component. |
| borderRadius | string | "lg" | The border radius of the component. |
| borderClass | string | "border-2 border-dashed" | The border class of the component. |
| accept | string | "*" | The file types to accept. |
| multiple | boolean | true | If true, multiple files can be uploaded. |
| className | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes. |
Examples
Basic Usage
Drop files here, or click to select
Customized FileDrop
Upload your documents
We accept .pdf, .docx, and .txt files