File Upload
Drag-and-drop file upload with preview, validation, and multiple file support.
Basic File Upload
Single file upload with drag and drop
Drop files here or click to upload
Max 10.0 MB per file • Up to 1 files
Inline Variant
Input field style with browse button
Choose a file...
Select files...
Multiple Files
Upload multiple files at once
Drop files here or click to upload
Max 5.0 MB per file • Up to 5 files
Custom Settings
Custom file size and count limits
Drop files here or click to upload
Max 2.0 MB per file • Up to 3 files
Disabled State
File upload in disabled state
Drop files here or click to upload
Max 10.0 MB per file • Up to 5 files
API Reference
Props and usage details
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange | (files: File[]) => void | - | Callback when files are added/removed |
| label | string | - | Label text above the upload area |
| accept | string | "*" | Accepted file types |
| multiple | boolean | false | Allow multiple file selection |
| maxSize | number | 10485760 | Maximum file size in bytes (10MB) |
| maxFiles | number | 5 | Maximum number of files |
| disabled | boolean | false | Whether the upload is disabled |
Features
- ✓Drag and drop support
- ✓File type filtering
- ✓File size validation
- ✓Image preview thumbnails
- ✓Individual file removal
- ✓Error messages for validation failures
- ✓Full design system token support
- ✓Dark mode support