File uploaders
Single Image Upload
A customizable single image upload component with drag and drop support, image preview, and upload progress.
Features
- Drag and drop support
- Image preview
- Upload progress indication
- Direct or manual upload modes
- Error handling
- Customizable styles
- Dark mode support
- Display modes (Grid/List)
Installation
Usage
Examples
The examples below uses the useFileUpload hook to handle the upload process.
Direct Upload
This example demonstrates direct file upload upon selection with a linear progress bar indicator.
Drag & drop your image here
or
Up to 2 MB
Manual Upload
This example shows manual upload control with a circular progress indicator.
Drag & drop your image here
or
Up to 5 MB
React Hook Form
Add New Product
Reference
| Prop | Type | Default |
|---|---|---|
width | string | 100% |
height | string | 200px |
className | string | - |
value | File | string | - |
onChange | (file?: File) => void | Promise<void> | - |
disabled | boolean | - |
dropzoneOptions | Omit<DropzoneOptions, 'disabled'> | - |
directUpload | boolean | true |
progress | number | - |
progressType | 'circular' | 'linear' | circular |
Edit on GitHub
Last updated on