File Uploader
A comprehensive file upload component with drag & drop support, progress tracking, file validation, and image cropping functionality.
Usage
Upload Files
Drag and drop files here or click to browse
Max 3 files, up to 5 MB each
import {
FileUploader,
FileUploaderDropZone,
FileUploaderFileList,
FileUploaderCrop
} from "@/components/file-uploader"
export default function MyComponent() {
const handleFilesReady = (files) => {
console.log('Files ready:', files)
// Handle the uploaded files
// Example: Create FormData to send to server
const formData = new FormData()
files.forEach((file, index) => {
formData.append(`file-${index}`, file)
})
// fetch('/api/upload', { method: 'POST', body: formData })
}
return (
<FileUploader
maxFiles={5}
maxSize={1024 _ 1024 _ 5} // 5MB
accept={['image/*', 'application/pdf']}
onFilesReady={handleFilesReady}
className="w-full max-w-lg"
>
<FileUploaderDropZone />
<FileUploaderFileList enableCropping />
<FileUploaderCrop
aspectRatio={16/9}
minWidth={100}
minHeight={56}
/>
</FileUploader>
)
}Installation
Install the File Uploader component using your preferred package manager.
npx shadcn@latest add https://rigidui.com/r/file-uploader.jsonFeatures
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.
Image Cropping
Built-in image cropping functionality with customizable aspect ratios and minimum dimensions.
Multiple Files
Support for uploading multiple files simultaneously with individual progress tracking.
File Management
Easy file removal with automatic cleanup of preview URLs.
Props
FileUploader
| Prop | Type | Default |
|---|---|---|
onFilesReady? | (files: File[]) => void | undefined |
maxFiles? | number | 10 |
maxSize? | number | 10 * 1024 * 1024 (10MB) |
accept? | string[] | ['image/*', 'application/pdf', 'text/*'] |
className? | string | undefined |
children? | React.ReactNode | undefined |
FileUploaderDropZone
| Prop | Type | Default |
|---|---|---|
className? | string | undefined |
disabled? | boolean | false |
FileUploaderFileList
| Prop | Type | Default |
|---|---|---|
className? | string | undefined |
showHeader? | boolean | true |
enableCropping? | boolean | false |
FileUploaderCrop
| Prop | Type | Default |
|---|---|---|
aspectRatio? | number | undefined |
minWidth? | number | 50 |
minHeight? | number | 50 |
Advanced Examples
Explore different configurations and specialized use cases for the File Uploader component.
Basic File Uploader
Simple file uploader with default settings using the new component-based architecture.
Upload Files
Drag and drop files here or click to browse
Max 10 files, up to 10 MB each
import {
FileUploader,
FileUploaderDropZone,
FileUploaderFileList
} from "@/components/file-uploader"
export default function BasicExample() {
const handleFilesReady = (files) => {
console.log('Files ready:', files)
}
return (
<FileUploader
onFilesReady={handleFilesReady}
className="w-full max-w-lg mx-auto"
>
<FileUploaderDropZone />
<FileUploaderFileList />
</FileUploader>
)
}Single Image with Cropping
Restrict uploads to a single image file with cropping functionality for profile pictures.
Upload Files
Drag and drop files here or click to browse
Max 1 files, up to 5 MB each
import {
FileUploader,
FileUploaderDropZone,
FileUploaderFileList,
FileUploaderCrop
} from "@/components/file-uploader"
export default function SingleImageExample() {
return (
<FileUploader
maxFiles={1}
accept={['image/*']}
maxSize={1024 * 1024 * 5}
onFilesReady={(files) => console.log('Image selected:', files[0])}
className="w-full max-w-md"
>
<FileUploaderDropZone />
<FileUploaderFileList enableCropping />
<FileUploaderCrop aspectRatio={1} minWidth={80} minHeight={80} />
</FileUploader>
)
}Complete Upload Flow
Full implementation with file selection, progress tracking, and upload simulation.
Upload Files
Drag and drop files here or click to browse
Max 3 files, up to 10 MB each
import {
FileUploader,
FileUploaderDropZone,
FileUploaderFileList
} from "@/components/file-uploader"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
export default function CompleteFlowExample() {
const [files, setFiles] = useState([])
const [uploading, setUploading] = useState(false)
const [uploadStatus, setUploadStatus] = useState('')
const handleFilesReady = (selectedFiles) => {
setFiles(selectedFiles)
setUploadStatus('')
}
const handleUpload = async () => {
if (files.length === 0) return
setUploading(true)
setUploadStatus('Uploading...')
try {
await new Promise(resolve => setTimeout(resolve, 2000))
setUploadStatus('Upload completed successfully!')
} catch (error) {
setUploadStatus('Upload failed. Please try again.')
} finally {
setUploading(false)
}
}
return (
<div className="space-y-4">
<FileUploader
maxFiles={3}
onFilesReady={handleFilesReady}
>
<FileUploaderDropZone />
<FileUploaderFileList enableCropping />
</FileUploader>
{files.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Files Selected</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2 mb-4">
{files.map((file, index) => (
<Badge key={index} variant="secondary">
{file.name}
</Badge>
))}
</div>
<Button
onClick={handleUpload}
disabled={uploading}
>
{uploading ? 'Uploading...' : 'Upload Files'}
</Button>
{uploadStatus && (
<p className="mt-2 text-sm">{uploadStatus}</p>
)}
</CardContent>
</Card>
)}
</div>
)
}Custom Theme
Custom theme effect with backdrop blur and translucent backgrounds.
Upload Files
Drag and drop files here or click to browse
Max 3 files, up to 5 MB each
import {
FileUploader,
FileUploaderDropZone,
FileUploaderFileList,
FileUploaderCrop
} from "@/components/file-uploader"
export default function GlassmorphismExample() {
return (
<FileUploader
maxFiles={3}
accept={['image/*']}
maxSize={1024 * 1024 * 5}
onFilesReady={(files) => console.log('Glassmorphism files:', files)}
className="w-full max-w-lg mx-auto"
>
<FileUploaderDropZone
className="relative backdrop-blur-md bg-white/30 dark:bg-black/30
border border-white/20 dark:border-white/10 rounded-3xl
shadow-2xl hover:shadow-3xl transition-all duration-500
hover:bg-white/40 dark:hover:bg-black/40
hover:border-white/30 dark:hover:border-white/20"
/>
<FileUploaderFileList enableCropping className="space-y-2" />
<FileUploaderCrop aspectRatio={1} />
</FileUploader>
)
}