Drag and drop file upload region with automatic validation checking for size, count and support extensions.
default layoutInline form blocks requesting a fast document upload or receipt scannerdropzone variantDedicated media or content drop areas where rich instructions, drag alerts, and multi-file listings are expectedbutton variantCompact dialog forms or profile picture triggers where a full drag zone is visually overwhelmingaccept type constraintEnforcing strict file extensions (e.g. only JPEG/PNG images or PDF documents) before browser selection opensClick to upload or drag & drop
Supports: image/*,application/pdf (Max: 10MB)
Visual container styling format option
Allows uploading multiple items simultaneously
Comma-separated string of accepted formats
Maximum file size constraint limit in bytes (e.g. 10MB)
import { FileUpload } from "nexoreui"
<FileUpload />Click to upload or drag & drop
All files supported (Max: 10MB)
Click to upload or drag & drop
All files supported (Max: 5MB)
Click to upload or drag & drop
All files supported (Max: 10MB)
Click to upload or drag & drop
Supports: image/*,application/pdf (Max: 10MB)
| Prop | Type | Default | Description |
|---|---|---|---|
| onUpload* | (files: File[]) => void | — | Callback fired when files are validated and uploaded. |
| accept | string | — | Mime-type query string (e.g. "image/*,.pdf"). |
| maxSize | number | 10485760 (10MB) | Maximum file size threshold in bytes. |
| multiple | boolean | false | Allows uploading more than one item in sequence. |
| variant | "default" | "dropzone" | "button" | "default" | Display variant for file collection component. |
| className | string | — | Additional custom class names. |
<input type="file"> element to guarantee full compatibility with mobile devices, voice command utilities, and standard screen readers.