File uploaders
Universal File Upload
A versatile file upload component that supports any file type with preview functionality, drag-and-drop, progress tracking, and intelligent file type detection.
Features
- Support for any file type
- Intelligent file type detection and icons
- Drag and drop support
- 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
Direct Upload
This example shows direct file upload upon selection.
Drop your files here
or
Max 10 files, up to 10 MB
Manual Upload
The example below demonstrates manual file upload with a grid layout.
Drop your files here
or
Max 10 files, up to 10 MB
Form Integration
This example demonstrates integration with React Hook Form, including validation and form submission.
Create Document
File Type Support
The component includes intelligent file type detection and displays appropriate icons for different file types:
- Images (jpg, jpeg, png, gif, webp)
- Videos (mp4, webm, ogg)
- Audio (mp3, wav)
- Documents (pdf, doc, docx)
- Spreadsheets (xls, xlsx, csv)
- Code files (js, ts, jsx, tsx, html, css)
- Archives (zip, rar, 7z, tar, gz)
- And more…
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