Forms
FileUpload
A drag-and-drop/click file picker with a list of selected files.
<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
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'Emits
update:modelValue[value: File | File[] | null]change[files: File[]]Types
type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";