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.
Unlock Advanced File Upload Features
Get access to powerful pro features that enhance your file upload component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
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
Upload Files
Drag and drop files or click to select
Examples
Basic Upload
Drag & drop or click to select, with simulated progress and per-file removal
Upload files
Drag & drop files here, or click to select
Max 5 files, 10 MB each
Image Upload with Preview
Image files render an automatic thumbnail preview after selection
Upload files
Drag & drop files here, or click to select
Max 4 files, 5 MB each
Multiple File Types
Accept several types at once and cap the total number of files
Upload files
Drag & drop files here, or click to select
Max 3 files, 10 MB each
Single File
Restrict selection to a single file with multiple={false} and maxFiles={1}
Upload files
Drag & drop files here, or click to select
Max 1 files, 2 MB each
Disabled
Non-interactive dropzone for read-only or gated states
Upload files
Drag & drop files here, or click to select
Max 5 files, 10 MB each
Advanced Upload with Duplicate Detection
Enterprise upload with SHA-256 duplicate detection, rich previews, and per-file status tracking
Upload Files
Drag and drop files or click to select
Image Gallery with Bulk Operations
Grid variant with multi-select, metadata, and bulk actions
Upload Files
Drag and drop files or click to select
Document Upload with Validation
MIME whitelist plus an async custom validator for document types
Upload Files
Drag and drop files or click to select
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
Upload Files
Drag and drop files or click to select
Enterprise Configuration
Custom upload endpoint with authentication headers
Upload Files
Drag and drop files or click to select
Compact View
Space-efficient variant for forms and tight layouts
Upload Files
Drag and drop files or click to select
AWS S3 Integration
Direct upload to Amazon S3 via the built-in serviceConfig integration
Upload Files
Drag and drop files or click to select
Cloudinary Integration
Upload images to Cloudinary with client-side resize before transfer
Upload Files
Drag and drop files or click to select
Firebase Storage Integration
Upload files to Firebase Storage using the built-in serviceConfig integration
Upload Files
Drag and drop files or click to select