File Upload

New

A drag-and-drop file upload component with validation, image previews, and full accessibility support. Perfect for forms and content management.

Preview

Click to upload or drag and drop

Any file type • Max size: 5 MB

Features

Drag & Drop

Intuitive drag-and-drop interface with visual feedback

File Validation

Validate file types and sizes with clear error messages

Image Previews

Automatic image thumbnails for visual confirmation

Multiple Files

Support for single or multiple file uploads

File Icons

Contextual icons for different file types

Accessible

Full keyboard navigation and screen reader support

Examples

Images Only

Click to upload or drag and drop

Accepted formats: image/* • Max size: 5 MB

tsx

Multiple Files

Click to upload or drag and drop

Any file type • Max size: 5 MB • Max 5 files

tsx

Custom Size Limit

Click to upload or drag and drop

Any file type • Max size: 2 MB

tsx

Usage with Backend

Uploading Files to Server

Example of uploading files using FormData

Common File Type Patterns

Images

accept="image/*"

Accepts all image formats (JPEG, PNG, GIF, WebP, etc.)

Documents

accept=".pdf,.doc,.docx"

Accepts PDF and Word documents

Videos

accept="video/*"

Accepts all video formats (MP4, WebM, AVI, etc.)

Spreadsheets

accept=".xlsx,.xls,.csv"

Accepts Excel and CSV files

Props

Name	Type	Default	Description
`onUpload`	`(files: File[]) => void`	—	Callback fired when files are successfully uploaded
`onChange`	`(files: File[]) => void`	—	Callback fired when the file list changes
`maxSize`	`number`	—	Maximum file size in bytes
`maxFiles`	`number`	—	Maximum number of files allowed
`accept`	`string`	—	Accepted file types (e.g., "image/*", ".pdf,.doc")
`multiple`	`boolean`	—	Allow multiple file uploads
`disabled`	`boolean`	—	Disable the file upload
`className`	`string`	—	Additional CSS classes
`value`	`File[]`	—	Controlled value for file list

Best Practices

Do

✓ Always validate files on the server-side as well, client-side validation can be bypassed
✓ Set reasonable file size limits to prevent abuse and improve upload performance
✓ Provide clear error messages when validation fails
✓ Clean up object URLs to prevent memory leaks (automatically handled by this component)
✓ Consider adding upload progress indicators for large files

Don't

✗ Don't rely solely on client-side validation
✗ Don't allow unlimited file sizes
✗ Don't use generic error messages
✗ Don't forget to handle upload failures gracefully
✗ Don't allow all file types without restrictions

Accessibility

✓Full keyboard navigation (Tab, Enter, Space)
✓ARIA labels for screen readers
✓Error messages are announced to screen readers
✓Visual feedback for drag-and-drop state
✓Focus management and visible focus indicators