FileUpload
Drag-and-drop file upload zone with file previews and validation.
Live Demo
Single file
Multiple images, max 2MB
Props
| Prop | Type | Default | Description |
|---|---|---|---|
accept | string | — | Accepted file types (e.g. image/*) |
multiple | boolean | false | Allow multiple file selection |
maxSize | number | — | Maximum file size in bytes |
maxFiles | number | — | Maximum number of files |
onFilesChange | (files: FileUploadFile[]) => void | — | Callback with current file list |
disabled | boolean | false | Disables the upload zone |
label | string | 'Drop files here or click to upload' | Primary label text |
hint | string | — | Hint text (e.g. file types) |
error | string | — | Error message |
Usage
import { FileUpload, FileUploadFile } from '@ghiberti85/ui'
const [files, setFiles] = useState<FileUploadFile[]>([])
// Basic
<FileUpload onFilesChange={setFiles} />
// Images only, max 5MB
<FileUpload
accept="image/*"
multiple
maxSize={5_000_000}
maxFiles={10}
label="Upload images"
hint="PNG, JPG, GIF up to 5MB"
onFilesChange={setFiles}
/>
// Access file data
files.forEach(({ file, id, preview }) => {
console.log(file.name, file.size)
})