File Upload
Drag & drop file upload with progress tracking and automatic image previews in the free tier, plus an enterprise Pro tier with direct cloud storage integration, duplicate detection, bulk operations, and comprehensive validation.
Pro features
What the Pro version adds to this component.
Duplicate Detection
SHA-256 file hashing to catch duplicate uploads
Rich Previews
Image and video thumbnails with audio playback
Bulk Operations
Multi-select, bulk delete, and batch processing
Cloud Integration
Direct upload to AWS S3, Cloudinary, or Firebase
Image Resize
Canvas-based image downscaling before upload
Status & Progress Tracking
Six-state per-file tracking with progress, speed, and ETA readouts
Validation
MIME whitelist, size limits, and async custom validation
Enterprise Ready
Custom endpoints, auth headers, and file metadata
Installation
Install via CLI
npx @moontra/moonui-cli add file-uploadUsage
Basic Usage
Upload files
Drag & drop files here, or click to select
Max 5 files, 10 MB each
Pro Usage
Examples
Basic Upload
Drag & drop or click to select, with simulated progress and per-file removal
Image Upload with Preview
Image files render an automatic thumbnail preview after selection
Multiple File Types
Accept several types at once and cap the total number of files
Single File
Restrict selection to a single file with multiple={false} and maxFiles={1}
Disabled
Non-interactive dropzone for read-only or gated states
Advanced Upload with Duplicate Detection
Enterprise upload with SHA-256 duplicate detection, rich previews, and per-file status tracking
Image Gallery with Bulk Operations
Grid variant with multi-select, metadata, and bulk actions
Document Upload with Validation
MIME whitelist plus an async custom validator for document types
Progress Tracking
Per-file progress reporting via onProgress; speed and ETA are rendered on each file row. Without a serviceConfig the built-in transfer is a demo simulation — wire a cloud integration or onUpload for real uploads
Enterprise Configuration
Custom upload endpoint with authentication headers
Compact View
Space-efficient variant for forms and tight layouts
AWS S3 Integration
Direct upload to Amazon S3 via the built-in serviceConfig integration
Cloudinary Integration
Upload images to Cloudinary with client-side resize before transfer
Firebase Storage Integration
Upload files to Firebase Storage using the built-in serviceConfig integration