Overview The File Uploader component provides a comprehensive solution for file uploads across Web and React Native platforms. It includes drag-and-drop support, real-time progress tracking, file validation, image previews, and advanced image cropping capabilities.
Installation npx shadcn@latest add https://rigidui.com/r/file-uploader.json
React Native Installation Install the required Expo dependencies:
npx expo install expo-document-picker npm install @react-native-vector-icons/ant-design
Then install the component:
npx shadcn@latest add https://rigidui.com/r/file-uploader-rn.json
Usage 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 > ) }
import { FileUploader , FileUploaderDropZone , FileUploaderFileList , FileUploaderCrop } from "@/components/file-uploader" export default function MyComponent () { const handleFilesReady = ( files : File []) => { console . log ( 'Files ready:' , files ) // Process files here } return ( < FileUploader maxFiles = { 5 } maxSize = { 1024 * 1024 * 5 } accept = { [ 'image/*' , 'application/pdf' ] } onFilesReady = { handleFilesReady } > < FileUploaderDropZone /> < FileUploaderFileList enableCropping /> < FileUploaderCrop aspectRatio = { 16 / 9 } /> </ FileUploader > ) }
import { FileUploader } from "@/components/file-uploader-rn" import { useState } from "react" export default function MyComponent () { const [ uploadedFiles , setUploadedFiles ] = useState ([]) const handleFilesReady = ( files ) => { console . log ( 'Files ready:' , files ) setUploadedFiles ( files ) // Handle the uploaded files } return ( < FileUploader maxFiles = { 5 } maxSize = { 1024 * 1024 * 5 } // 5MB accept = { [ 'image/*' , 'application/pdf' ] } onFilesReady = { handleFilesReady } /> ) }
Features
File Selection Users can select files through native file pickers on both Web and React Native platforms with seamless integration.
Cross-Platform Support Available for both Web and React Native with platform-specific optimizations and native document picker support.
File Validation Automatically validates file types, sizes, and counts with customizable restrictions across platforms.
Upload Progress Real-time progress indicators show upload status with visual feedback for each file (Web platform).
Image Previews Automatically generates preview thumbnails for uploaded image files with platform-appropriate display.
Multiple Files Support for uploading multiple files simultaneously with individual progress tracking and management.
File Management Easy file removal with automatic cleanup and organized file list display.
Image Cropping Advanced image cropping with aspect ratio controls and customizable crop areas.
API Reference FileUploader The main container component that manages file upload state and validation.
Callback function called when files are ready or changed.
Maximum number of files that can be uploaded.
maxSize
number
default: "10 * 1024 * 1024"
Maximum file size in bytes. Default is 10MB.
accept
string[]
default: "['image/*', 'application/pdf', 'text/*']"
Array of accepted file types (e.g., ['image/*', 'application/pdf']).
Additional class names for styling the container.
Child components (FileUploaderDropZone, FileUploaderFileList, etc.).
FileUploaderDropZone The drag-and-drop zone for file selection.
Additional class names for styling the drop zone.
Whether the drop zone is disabled.
FileUploaderFileList Displays the list of uploaded files with progress indicators.
Additional class names for styling the file list.
Whether to show the file list header with count and clear button.
Enable image cropping functionality for uploaded images.
FileUploaderCrop Provides image cropping functionality for uploaded images.
Fixed aspect ratio for cropping (e.g., 16/9, 1, 4/3). If undefined, free cropping is allowed.
Minimum width for the crop area in pixels.
Minimum height for the crop area in pixels.
TypeScript Interfaces FileWithPreview interface FileWithPreview { id : string file : File name : string size : number type : string progress : number status : 'uploading' | 'complete' | 'error' error ?: string | null preview ?: string | null croppedPreview ?: string | null originalFile ?: File }
FileUploaderProps interface FileUploaderProps { onFilesReady ?: ( files : File []) => void maxFiles ?: number maxSize ?: number accept ?: string [] className ?: string children ?: React . ReactNode }
When using the File Uploader with forms, combine it with form validation libraries like Zod for comprehensive file validation and error handling.
Always validate file uploads on the server-side in addition to client-side validation for security purposes.