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

CSS Variables

Vue SFC

Every uploader is themed through --mono-file-upload-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-file-upload> and the shadow build. To re-skin globally, set the underlying --theme-* tokens.

Variable	Default	Controls
--mono-file-upload-primary	--theme-primary	Accent (default icon, dropzone hover/drag)
--mono-file-upload-text	--theme-text	File name / body text color
--mono-file-upload-background	--theme-background	Dropzone / thumbnail background
--mono-file-upload-surface	--theme-surface	File-item background
--mono-file-upload-border	--theme-border	Dropzone / file-item border color
--mono-file-upload-success	--theme-success	Valid-state color
--mono-file-upload-danger	--theme-danger	Invalid / remove-hover color
--mono-file-upload-warning	--theme-warning	Warning-state color

Types

Importimport { 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	—	Primary prompt text inside the dropzone.
subtext	string	—	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	—	Allows selecting multiple files at once.
disabled	boolean	—	Disables interaction and dims the component.
required	boolean	—	Marks the field as required with an indicator.
dragdrop	boolean	—	Enables drag-and-drop file selection.
maxFileSize	number	—	Maximum allowed size per file, in bytes.
maxFiles	number	—	Maximum number of files allowed.
modelValue	FileUploadItem[]	—	Two-way bound list of selected files.
variant	'default' | 'compact'	—	Layout style: default or compact.
validationState	'warning' | 'default' | 'valid' | 'invalid'	—	Validation state styling the component.
validationMessage	string	—	Validation message shown below the dropzone.
cssClass	FileUploadCssClass	—	Per-element class overrides for internal parts.
visible	boolean	—	Whether the control is shown. Defaults to `true`.
visibleType	'invisible' | 'none'	—	How it hides when `visible` is `false`. Defaults to `'none'`.