File uploaders
Multi File Upload
A versatile file upload component that supports both images and PDFs with preview functionality, drag-and-drop, progress tracking, and form integration.
Features
- Drag and drop support for images and PDFs
- Preview functionality with modal viewer
- PDF viewer integration
- Grid or list display modes
- Upload progress indication
- Direct or manual upload modes
- Error handling
- Customizable styles
- Dark mode support
- Maximum file count and size limits
Installation
Usage
Examples
The examples below use the useMultipleFileUpload hook to handle the upload process.
Direct Upload
This example demonstrates direct file upload upon selection with a grid layout and circular progress indicators.
Drop your files here
or
Max 4 files, up to 2 MB
Manual Upload
This example shows manual upload control with a list layout and linear progress indicators.
Drop your files here
or
Max 4 files, up to 2 MB
Form Integration
This example demonstrates integration with React Hook Form, including validation and form submission.
Create Document
Reference
| Prop | Type | Default |
|---|---|---|
width | string | 100% |
height | string | 240px |
className | string | - |
value | FileState[] | - |
onChange | (files: FileState[]) => void | Promise<void> | - |
onFilesAdded | (addedFiles: FileState[]) => void | Promise<void> | - |
disabled | boolean | - |
dropzoneOptions | Omit<DropzoneOptions, 'disabled'> | - |
isDirectUpload | boolean | - |
onUpload | (files: File[]) => void | Promise<void> | - |
displayMode | 'grid' | 'list' | grid |
Edit on GitHub
Last updated on