File Uploader
A comprehensive file upload component with drag & drop support, progress tracking, and file validation.
Installation
Install the File Uploader component using your preferred package manager.
Usage
The File Uploader component provides a complete file upload interface with drag & drop, progress tracking, and validation. It handles file selection, validation, and preview generation.
Upload Files
Drag and drop files here or click to browse
Max 3 files, up to 5 MB each
Discover Its Features
The File Uploader component is packed with powerful features designed to provide an exceptional user experience.
Drag & Drop Support
Users can drag and drop files directly onto the upload area for seamless file selection.
File Validation
Automatically validates file types, sizes, and counts with customizable restrictions.
Upload Progress
Real-time progress indicators show upload status with visual feedback for each file.
Image Previews
Automatically generates preview thumbnails for uploaded image files.
Multiple Files
Support for uploading multiple files simultaneously with individual progress tracking.
File Management
Easy file removal with automatic cleanup of preview URLs.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| onFilesReady | (files: File[]) => void | undefined | Callback function called when files are ready or changed |
| maxFiles | number | 10 | Maximum number of files that can be uploaded |
| maxSize | number | 10 * 1024 * 1024 (10MB) | Maximum file size in bytes |
| accept | string[] | ['image/*', 'application/pdf', 'text/*'] | Array of accepted file types (e.g., ["image/*", "application/pdf"]) |
| className | string | undefined | Additional class names for styling |
Advanced Usage
Explore different configurations and use cases for the File Uploader component.
Basic File Uploader
Simple file uploader with default settings supporting images, PDFs, and text files.
Upload Files
Drag and drop files here or click to browse
Max 10 files, up to 10 MB each
Single Image Uploader
Restrict uploads to a single image file with a smaller size limit, perfect for profile pictures or avatars.
Upload Files
Drag and drop files here or click to browse
Max 1 files, up to 2 MB each
Document Uploader
Accept only document files (PDF, DOC, DOCX) with larger size limits for business documents.
Upload Files
Drag and drop files here or click to browse
Max 5 files, up to 15 MB each
Media Files Uploader
Upload various media types including images, videos, and audio files with appropriate size limits.
Upload Files
Drag and drop files here or click to browse
Max 8 files, up to 50 MB each
Complete Upload Flow
Full implementation with server upload, progress tracking, and success/error handling.
Upload Files
Drag and drop files here or click to browse
Max 3 files, up to 10 MB each
Custom Styled Uploader
Customize the appearance and behavior with specific styling and constraints.
Upload Files
Drag and drop files here or click to browse
Max 2 files, up to 3 MB each