Wraps a trigger (a button, an icon) and opens the native file picker on click. Enforces an optional maximum file size, emitting an error event when a file is too large.
Ejemplos
Basic
The default slot is the visible trigger; the chosen file name is shown alongside. Note the trigger renders as a span (tag="span") — a real <button> nested in the label would swallow the click and never open the picker.
Choose file No file selected
<div class="flex items-center gap-3">
<UiFileInput accept="image/*" @select="state.file = $event">
<UiButton tag="span" variant="outline">
<UiIcon name="mdi:upload" class="w-4 h-4" /> Choose file
</UiButton>
</UiFileInput>
<span class="text-sm text-gray-500">{{ state.file ? state.file.name : 'No file selected' }}</span>
</div>Multiple, with a size limit
Accept several files and reject any over max-size (2 MB here) through the error event.
Attach files
<div class="flex flex-col gap-2">
<UiFileInput
multiple
:max-size="2 * 1024 * 1024"
@select="state.count = Array.isArray($event) ? $event.length : 1"
@error="state.err = $event.message"
>
<UiButton tag="span" variant="outline" color="gray">
<UiIcon name="mdi:paperclip" class="w-4 h-4" /> Attach files
</UiButton>
</UiFileInput>
<span v-if="state.count" class="text-sm text-gray-500">{{ state.count }} file(s) selected</span>
<span v-if="state.err" class="text-sm text-error-600 dark:text-error-400">{{ state.err }}</span>
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| accept | string | undefined | Accepted file types (native `accept`). |
| multiple | boolean | false | Allow selecting several files. |
| disabled | boolean | false | Disables the picker. |
| maxSize | number | 0 | Maximum size in bytes; 0 disables the check. |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
select | File | File[] | Emitted with the chosen file(s). |
error | { type, file, message } | Emitted when a file exceeds maxSize. |
Slots
| Slot | Descripción |
|---|---|
default | Trigger content that opens the picker. |