File uploaders
Multiple Image Upload
A versatile image upload component with drag-and-drop, preview modes, progress tracking, and form integration. Supports both grid and list layouts with customizable styling.
Features
- Drag and drop support
- Image previews in grid or list mode
- Upload progress indication
- Direct or manual upload modes
- Error handling
- Customizable styles
- Dark mode support
- Maximum file count and size limits
- Flexible display modes (Grid/List)
Installation
Usage
Examples
The examples below uses 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 images here
or
Max 6 files, up to 1 MB
Manual Upload
This example shows manual upload control with a list layout and linear progress indicators.
Drop your images here
or
Max 6 files, up to 1 MB
React Hook Form
This example demonstrates integration with React Hook Form for creating an image gallery.
Create Image Gallery
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