File Upload Dropzone
Explore interactive examples and all component variations in our Storybook.
The FileUploadDropzone component provides a complete file upload solution with drag & drop functionality, file previews, progress tracking, and validation. Built with react-dropzone, it offers an intuitive interface for handling single or multiple file uploads with comprehensive error handling and customization options.
Basic Usage
Drag files here or click to select
Maximum 5 files • Up to 10MB each
With Custom Configuration
Upload up to 3 images or PDFs (max 5MB each)
Maximum 3 files • Up to 5MB each
Single File Upload
Upload a profile picture
Maximum 1 file • Up to 10MB each
With Upload Progress
Files will show upload progress
Maximum 5 files • Up to 10MB each
Document Upload Form
Image Gallery Upload
Disabled State
Upload is currently disabled
Maximum 5 files • Up to 10MB each
File upload is temporarily unavailable. Please try again later.
Properties
FileUploadDropzone
| Property | Type | Description |
|---|---|---|
config | FileUploadConfig | Configuration object for upload behavior. |
onFilesChange | (files: UploadedFile[]) => void | Callback fired when file list changes. |
onFileUpload | (file: UploadedFile) => Promise<void> | Function to handle individual file upload. |
className | string | Additional CSS classes for the container. |
placeholder | string | Text displayed in the drop zone. |
FileUploadConfig
| Property | Type | Default | Description |
|---|---|---|---|
maxFiles | number | 5 | Maximum number of files allowed. |
maxSize | number | 10MB | Maximum file size in bytes. |
acceptedFileTypes | string[] | ['image/*', 'application/pdf', '.doc', '.docx'] | Accepted file types/extensions. |
multiple | boolean | true | Whether multiple files are allowed. |
disabled | boolean | false | Whether the upload is disabled. |
showPreview | boolean | true | Whether to show image previews. |
showProgress | boolean | true | Whether to show upload progress bars. |
UploadedFile
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the file. |
name | string | Original filename. |
size | number | File size in bytes. |
type | string | MIME type of the file. |
preview | string | Preview URL for images (optional). |
progress | number | Upload progress percentage (0-100). |
error | string | Error message if upload failed (optional). |
File Type Examples
Common MIME Types
- Images:
image/*,image/jpeg,image/png,image/gif,image/webp - Documents:
application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document - Text:
text/plain,text/csv - Archives:
application/zip,application/x-rar-compressed
File Extensions
- Images:
.jpg,.jpeg,.png,.gif,.webp,.svg - Documents:
.pdf,.doc,.docx,.txt,.rtf - Spreadsheets:
.xls,.xlsx,.csv - Presentations:
.ppt,.pptx
Accessibility
The FileUploadDropzone component includes comprehensive accessibility features:
- Keyboard Navigation - Full keyboard support for file selection
- Screen Reader Support - Proper ARIA labels and file status announcements
- Focus Management - Clear focus indicators and logical tab order
- Drag and Drop - Accessible drag and drop with keyboard alternatives
- Error Handling - Clear error messages for validation failures
- Progress Indicators - Accessible progress bars and status updates
Common Use Cases
The FileUploadDropzone component is perfect for:
- Profile Pictures - Single image upload with preview
- Document Management - Multiple document upload with validation
- Media Galleries - Batch image upload for galleries
- Form Attachments - File attachments in contact or support forms
- Content Management - Article images and media uploads
- Data Import - CSV and Excel file uploads
- Backup Uploads - Archive and backup file handling
Best Practices
- File Validation - Always validate file types and sizes on both client and server
- Progress Feedback - Show upload progress for better user experience
- Error Handling - Provide clear, actionable error messages
- Preview Images - Show thumbnails for image files when possible
- Size Limits - Set reasonable file size limits based on your use case
- Security - Scan uploaded files for malware and validate content
- Storage Management - Implement proper file storage and cleanup
- Mobile Support - Ensure the component works well on touch devices