File Upload
A drag-and-drop file upload component with support for multiple files, file type filtering, size limits, and preview functionality.
Basic File Upload
Click to upload or drag and drop
All file types accepted
Multiple Files
Click to upload or drag and drop
All file types accepted
You can upload multiple files
With Helper Text
Click to upload or drag and drop
All file types accepted
Upload your profile picture in JPG or PNG format
Images Only
Click to upload or drag and drop
Accepted: image/*
Upload images in any format
Documents Only
Click to upload or drag and drop
Accepted: .pdf,.doc,.docx
Accepted formats: PDF, DOC, DOCX
With Max File Size
Click to upload or drag and drop
All file types accepted (Max: 2 MB)
Maximum file size: 2MB
With Max Files Limit
Click to upload or drag and drop
All file types accepted
You can upload up to 3 files
With Preview
Click to upload or drag and drop
Accepted: image/*
Uploaded images will show a preview
Without Preview
Click to upload or drag and drop
Accepted: image/*
Files listed without preview
States
Click to upload or drag and drop
All file types accepted
File size exceeds maximum limit of 5MB
Click to upload or drag and drop
All file types accepted
File upload is currently disabled
Click to upload or drag and drop
All file types accepted
You must upload at least one file
Combined Use Case
Click to upload or drag and drop
Accepted: .pdf,.jpg,.jpeg,.png (Max: 5 MB)
Upload up to 5 files (PDF or images, max 5MB each)
Props
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | File upload label text |
accept | string | - | Accepted file types (e.g., "image/*", ".pdf") |
multiple | boolean | false | Allow multiple file selection |
maxSize | number | - | Maximum file size in bytes |
maxFiles | number | 10 | Maximum number of files allowed |
showPreview | boolean | true | Show preview for image files |
disabled | boolean | false | Whether file upload is disabled |
required | boolean | false | Whether file is required (shows * indicator) |
error | string | - | Error message to display |
helperText | string | - | Helper text below file upload |
value | File[] | - | Controlled array of uploaded files |
onChange | (files: File[]) => void | - | Callback when files change |
onBlur | () => void | - | Callback when upload loses focus |
Usage Guidelines
When to use
- •For uploading documents, images, or other files
- •When users need to attach files to forms or submissions
- •For profile pictures or avatar uploads
- •When importing data from files (CSV, JSON, etc.)
Best practices
- •Clearly indicate accepted file types and size limits in helper text
- •Use meaningful labels that describe what files are being uploaded
- •Provide visual feedback during upload progress for large files
- •Enable preview for image uploads so users can verify their selection
- •Show clear error messages for file validation failures
- •Set reasonable maxFiles and maxSize limits based on use case
Accessibility
- •Keyboard accessible (Tab, Enter, Space for interaction)
- •ARIA attributes: aria-invalid, aria-describedby, aria-label
- •Error messages announced with aria-live for screen readers
- •Focus indicator visible on dropzone for keyboard navigation
- •Label properly associated with file input using htmlFor
- •Required fields indicated with * and aria-required attribute
- •File list accessible with proper ARIA labels and roles
- •Remove buttons labeled with descriptive aria-label for screen readers
Do's and Don'ts
✓ Do
- •Specify accepted file types to prevent invalid uploads
- •Set maxSize limits appropriate for your use case
- •Provide clear helper text about file requirements
- •Enable showPreview for image uploads
- •Use descriptive labels that indicate what to upload
Click to upload or drag and drop
Accepted: image/* (Max: 2 MB)
Upload JPG or PNG, max 2MB
✗ Don't
- •Don't allow unlimited file sizes without validation
- •Don't use vague labels like "Upload File" without context
- •Don't skip helper text for complex requirements
- •Don't disable preview for images without good reason
- •Don't forget to handle error states and validation
Click to upload or drag and drop
All file types accepted
Related Components
Input
For text and basic data entry
Textarea
For multi-line text input
Button
For triggering form submissions