- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
File upload component with drag-and-drop, file validation, preview, and progress tracking. Supports 4 variants and collection layouts.
Basic Usage
Upload a file
Click to browse or drag and drop
Variants
Dropzone Variant
Large drag-and-drop area perfect for prominent upload sections.
Drop your files here
or click to browse
Button Variant
Compact button-style uploader for toolbars and inline forms.
Card Variant
Card-based uploader with title and description wrapper for form sections.
Add project files
Upload project documents, images, or other assets
File Types & Validation
Image Upload
Upload images with type validation and file preview.
Upload images
Supports JPG, PNG, GIF, WebP
Max size: 5 MB • Accepted: image/*
Document Upload
Accept specific document types like PDF, Word, or Excel files.
Upload documents
PDF, DOC, DOCX accepted
Max size: 10 MB • Accepted: application/pdf,.doc,.docx
Accept Format:
- MIME types:
"image/*","application/pdf","video/mp4" - Extensions:
".jpg",".png",".pdf",".doc" - Combined:
"image/*,.pdf,.doc,.docx"
Common Size Limits:
1024 * 1024= 1MB5 * 1024 * 1024= 5MB10 * 1024 * 1024= 10MB
Multiple Files
Allow users to upload multiple files at once.
Upload multiple files
0 file(s) uploaded
Progress Tracking
Show upload progress for better user feedback during async operations.
Upload with progress
Watch the upload progress
Error Handling
Display validation errors and handle upload failures gracefully.
Upload file
Max size: 100 KB
Collections
Stack Layout
Stack multiple uploaders vertically, perfect for forms.
Profile Picture
Upload your profile picture
Max size: 2 MB • Accepted: image/*
Resume/CV
Upload your resume (PDF only)
Max size: 5 MB • Accepted: application/pdf
Cover Letter
Upload your cover letter
Max size: 5 MB • Accepted: application/pdf,.doc,.docx
Form Integration
Integrate file uploads seamlessly into forms.
API Reference
FileUploaderItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Upload files" | Label text displayed in the dropzone |
description | string | - | Optional description text |
title | string | - | Title for container variant |
accept | string | - | Accepted file types (MIME types or extensions) |
maxSize | number | - | Maximum file size in bytes |
maxFiles | number | 1 | Maximum number of files allowed |
multiple | boolean | false | Allow multiple file selection |
disabled | boolean | false | Disable the uploader |
required | boolean | false | Mark as required (for forms) |
error | string | - | Error message to display |
allowDragDrop | boolean | true | Enable drag and drop functionality |
showPreview | boolean | true | Show file preview after upload |
showProgress | boolean | false | Show upload progress bar |
onUpload | (files: File[]) => void | Promise<void> | - | Callback fired when files are uploaded |
onRemove | (file: File) => void | - | Callback fired when a file is removed |
onError | (error: string) => void | - | Callback fired on validation errors |
dropzoneVariant | "default" | "dropzone" | "button" | "card" | "default" | Visual variant of the dropzone |
dropzoneSize | "sm" | "md" | "lg" | "md" | Size of the dropzone |
showContainer | boolean | false | Show container wrapper with title |
containerVariant | "card" | "outline" | "ghost" | "minimal" | "card" | Container visual variant |
containerSize | "sm" | "md" | "lg" | "md" | Container size |
className | string | - | Additional CSS classes |
ariaLabel | string | - | Accessibility label |
FileUploaderCollection Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | FileUploaderItemProps[] | Required | Array of uploader configurations |
layout | "stack" | "grid" | "inline" | "stack" | Layout direction for the collection |
columns | 1 | 2 | 3 | 4 | 1 | Number of columns (grid layout only) |
gap | "sm" | "md" | "lg" | "md" | Gap between items |
dropzoneVariant | "default" | "dropzone" | "button" | "card" | "default" | Shared dropzone variant |
dropzoneSize | "sm" | "md" | "lg" | "md" | Shared dropzone size |
showPreview | boolean | true | Shared preview setting |
showProgress | boolean | false | Shared progress setting |
allowDragDrop | boolean | true | Shared drag & drop setting |
onItemUpload | (item, files, index) => void | - | Callback fired when any item uploads |
className | string | - | Additional CSS classes |