Forms & Inputs

FileUpload

A drop zone and file list for picking files, with validation and progress.

Install

import { FileUpload } from 'vael-ui'

Playground

Drop files here

capture

multiple

maxSize

maxFiles

disabled

name

motionCss ?

import { FileUpload } from 'vael-ui'

<FileUpload accept="" capture multiple :maxSize="0" :maxFiles="0" :disabled="false" name="" motionCss>FileUpload</FileUpload>

Props

Name	Type	Default	Description
`accept`	`string \| undefined`		Native `accept` syntax: `.pdf`, `image/png`, `image/*`, comma-separated.
`capture`	`boolean \| "user" \| "environment" \| undefined`	`undefined`	Native `capture` — opens the device camera directly instead of the file picker on mobile. `'environment'`/`'user'` pick a facing side; `true` leaves it to the browser.
`multiple`	`boolean \| undefined`	`true`
`maxSize`	`number \| undefined`
`maxFiles`	`number \| undefined`
`disabled`	`boolean \| undefined`	`false`
`name`	`string \| undefined`
`motionCss`	`boolean \| undefined`	`true`	Gates the built-in file-row enter/exit transition. `false` skips it entirely — reach for `@item-enter`/`@item-leave` instead if you want a consumer-owned animation (GSAP, motion-v) in its place.
`ui`	`Partial<{ root: UiPartValue; dropzone: UiPartValue; browse: UiPartValue; list: UiPartValue; item: UiPartValue; remove: UiPartValue; }> \| undefined`
`files`	`File[] \| undefined`	`[]`

Slots

Name	Type	Description
`default`	`{ isDragOver: boolean; browse: () => void; }`	Replaces the dropzone's inner content; the library keeps the dropzone element + drag wiring.
`item`	`{ file: File; remove: () => void; index: number; }`	Replaces one file row's content; the library keeps the `<li>`.

Events

Name	Type	Description
`remove`	`[file: File]`
`update:files`	`[value: File[]]`
`reject`	`[{ file: File; reason: FileRejectReason; }]`
`add`	`[files: File[]]`
`item-enter`	`[el: Element, done: () => void]`
`item-leave`	`[el: Element, done: () => void]`

Exposed

Name	Type	Description
`el`	`HTMLElement \| null`
`dropzoneEl`	`HTMLElement \| null`
`inputEl`	`HTMLInputElement \| null`
`listEl`	`HTMLElement \| null`
`browse`	`() => void`