File upload
A drag-and-drop file uploader with previews, validation states and a built-in file list. Toggle Vue / CSS to switch the live demo and source together.
Basic
Single-file upload with default styling.
Vue SFC
Compact
Reduced padding via variant="compact".
Vue SFC
Icon
Replace the default 📎 with an iconify class via the icon prop (e.g. icon="i-mdi-cloud-upload"), or pass a slot="icon" child — the slot wins over the prop. Use remove-icon for the file list's remove button.
Vue SFC
Multiple
Allow multiple files with optional max-files / max-file-size.
Vue SFC
Image
Image-only upload with previews.
Vue SFC
Validation
Valid, invalid and warning states with messages.
Vue SFC
States
Disabled and required examples.
Vue SFC
Preloaded
Initialize the uploader with existing files.
Vue SFC
Event log
Live log of mno-change, mno-remove and mno-error events.
Vue SFC
Customized
Override per-element styling with the cssClass prop (Vue) or extra utility classes (CSS).
Vue SFC
Types
Import
import { FileUploadProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
label | string | '' | Field label shown above the dropzone. |
helperText | string | '' | Helper text shown below the dropzone. |
placeholder | string | 'Klik atau seret file ke sini' | Primary prompt text inside the dropzone. |
subtext | string | 'Pilih file untuk diunggah' | Secondary hint text inside the dropzone. |
accept | string | '' | Accepted file types for the file input. |
icon | string | '' | Dropzone icon. An iconify utility class (e.g. `i-mdi-cloud-upload`) renders the icon; any other string renders as text/emoji. A `slot="icon"` child takes priority over this prop. |
removeIcon | string | '' | Remove (✕) button icon — iconify class or text. |
multiple | boolean | false | Allows selecting multiple files at once. |
disabled | boolean | false | Disables interaction and dims the component. |
required | boolean | false | Marks the field as required with an indicator. |
dragdrop | boolean | true | Enables drag-and-drop file selection. |
maxFileSize | number | 0 | Maximum allowed size per file, in bytes. |
maxFiles | number | 0 | Maximum number of files allowed. |
modelValue | FileUploadItem[] | [] | Two-way bound list of selected files. |
variant | 'default' | 'compact' | 'default' | Layout style: default or compact. |
validationState | 'warning' | 'default' | 'valid' | 'invalid' | 'default' | Validation state styling the component. |
validationMessage | string | '' | Validation message shown below the dropzone. |
cssClass | FileUploadCssClass | {} | Per-element class overrides for internal parts. |