nuxt-x-app-formkit
File Upload
Drag-and-drop file upload component with validation and optional async upload handler.
File Upload
XFormFileUpload is a drag-and-drop file upload zone. It emits selected files as a File or File[] via v-model and optionally calls an async uploadHandler immediately after files are selected.
Components
<XFormFileUpload />
<!-- Single file -->
<XFormFileUpload
v-model="file"
accept="image/*"
accept-label="PNG, JPG, GIF up to 5 MB"
:max-size="5 * 1024 * 1024"
@error="toast.add({ title: $event, color: 'error' })"
/>
<!-- Multiple files with upload handler -->
<XFormFileUpload
v-model="files"
multiple
accept=".pdf,.docx"
:max-files="5"
:upload-handler="uploadToS3"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | File | File[] | null | null | Selected file(s) (v-model) |
multiple | boolean | false | Allow multiple file selection |
accept | string | "*" | Native accept attribute passed to <input type="file"> |
acceptLabel | string | "" | Human-readable label shown beneath the upload icon (falls back to accept value) |
maxSize | number | — | Maximum file size in bytes; emits @error if exceeded |
maxFiles | number | — | Maximum number of files when multiple is true |
disabled | boolean | false | Disable all interactions |
dropzone | boolean | true | Enable drag-and-drop |
uploadHandler | (files: File[]) => Promise<void> | — | Called automatically after files are selected; shows uploading spinner |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | File | File[] | null | v-model sync |
error | string | Validation error message (size exceeded, too many files, upload failure) |
Exposed Methods
| Method | Description |
|---|---|
clear() | Remove all selected files |
openFilePicker() | Programmatically open the OS file picker |
FormKit fileUpload Input
The layer also registers XFormFileUpload as a custom FormKit input type, so it can be dropped into any FormKit form with full validation/context integration (values flow through node.input, errors through node.setErrors):
<FormKit
type="fileUpload"
name="avatar"
label="Profile Picture"
accept="image/*"
:max-size="5 * 1024 * 1024"
help="Upload a profile picture (max 5 MB)"
/>
Supported input props: multiple, accept, dropzone, maxSize, maxFiles, uploadHandler.
If your consumer project provides its own
formkit.config.ts (e.g. to add a theme), it overrides the layer's bundled config — re-register the fileUpload input there or this type throws "Unknown input type". See Configuration.AI Context
component: XFormFileUpload
package: "@xenterprises/nuxt-x-app-formkit"
use-when: File upload zones with drag-and-drop, size/count validation, and optional auto-upload
v-model: File | File[] | null
notes:
- uploadHandler receives File[] and shows a spinner while running
- @error emits validation messages for size, count, and upload failures