File Upload
A component for creating drag-and-drop file upload interfaces with support for single or multiple files, custom triggers, and visual feedback during file dragging operations.
Examples
File Upload with Prompt Input
You can combine the file upload component with the Prompt Input component to create a full-featured input component with file upload support. You can
try to drop a file to see the visual feedback.
Installation
Copy and paste the following code into your project.
Component API
FileUpload
| Prop | Type | Default | Description |
|---|---|---|---|
onFilesAdded | (files: File[]) => void | - | Function called when files are added |
children | Snippet | - | Child components |
multiple | boolean | true | Allow selection of multiple files |
accept | string | - | File types to accept (e.g., ".jpg,.png") |
FileUploadTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Use child element as the trigger |
className | string | - | Additional CSS classes |
children | Snippet | - | Child components |
...props | HTMLAttributes<HTMLButtonElement> | - | All other button props |
FileUploadContent
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All other div props |