Forms

FileUpload

A drag-and-drop/click file picker with a list of selected files.

html
<UiFileUpload />

Model value

modelValue holds the selection, and its shape follows multiple: a single File (or null) on its own, an array of them once multiple is set. Bind it with v-model — the control also writes back when a file is removed from the list it renders, so the model and the list can't drift apart.

Drop your file here

or click to browse

Selected: nothing yet

Multiple

multiple lets more than one file be picked at a time, and switches modelValue from a single File to an array. Every selected file gets a row underneath the dropzone with its own remove button.

Drop your files here

or click to browse

Accept

accept is the comma-separated list of types the picker offers, in the same syntax a native file input takes — MIME types like image/* or extensions like .pdf. It filters what the file dialog shows; treat it as a convenience rather than a guarantee, and still check the type on the server.

Drop your files here

PNG, JPG up to 10MB

Disabled

disabled switches off the whole control — no dialog on click, no drop target — for a form that's saving or a step that isn't reachable yet.

Drop your file here

Label

label is the headline inside the dropzone, or the button's text in the button variant. Say what should be dropped rather than restating the control (“Drop your invoice here” beats “Upload”).

Drop your file here

Drop your invoice here

Description

description is the quieter second line under the label, and only the area variant renders it — the button trigger has no room for one. It's the natural place for the constraints, since accept itself is invisible until the dialog opens.

Drop your invoice here

Drop your invoice here

PDF or PNG, up to 10 MB

Icon

icon replaces the default upload glyph above the label. Matching it to what you're asking for — image for photos, document for paperwork — makes the dropzone readable before anyone gets to the text.

Any file

Photos

Documents

Variant

variant chooses between the full area dropzone and a compact button trigger. The button still accepts drops, but reads as one control in a row rather than a panel — reach for it where space is tight.

Color

color is the accent the dropzone takes on while a file is dragged over it — the rest of the time the control stays neutral. Drag a file onto the two below to see the difference; the colour is the only feedback that the drop will land.

Neutral while hovered

Success while hovered

Size

size sets how large the drop zone renders, from a compact row up to a full panel.

sm

md

lg

`change` event — fires with the newly selected files

Drop your files here

Last change: none yet

`variant="button"`, `disabled`


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
File | File[] | null
The selected file(s).
boolean
false
Whether multiple files can be selected.
string
Comma-separated list of accepted file types (e.g. 'image/*', '.pdf').
boolean
false
Disables interaction with the upload control.
string
The main label displayed in the dropzone / trigger button.
string
Secondary text displayed below the label (area variant only).
string
'upload'
"area" | "button"
'area'
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"
'neutral'
Accent color used while dragging a file over the dropzone.
"sm" | "md" | "lg"
'md'

Emits

Event
Payload
Description
update:modelValue
[value: File | File[] | null]
change
[files: File[]]

Types

ts
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";