Vitral 0.2
Media

FileUpload

A file input drawn as a button, a drop zone and a queue, checking type, size and count, with upload progress.

WAI-ARIA tested

Import

main.ts
import { FileUpload } from '@vitral/vue';

Advanced

Drag images here, up to five, 1 MB each.
<script setup lang="ts">import { FileUpload } from '@vitral/vue';import { ref } from 'vue'; const status = ref(''); // There is no server behind the docs: the demo takes the files itself and pretends.function pretend({ files }: { files: File[] }) {    status.value = `${files.map((f) => f.name).join(', ')}: received here, and nothing left your browser.`;}</script> <template>    <FileUpload multiple accept="image/*" :max-file-size="1000000" :file-limit="5" custom-upload @uploader="pretend">        <template #empty>            <span>Drag images here, up to five, 1 MB each.</span>        </template>    </FileUpload>    <small style="color: var(--vt-text-muted-color)" aria-live="polite">{{ status }}</small></template>

Basic

<script setup lang="ts">import { FileUpload } from '@vitral/vue';import { ref } from 'vue'; const status = ref(''); // There is no server behind the docs: the demo takes the file itself and pretends.function pretend({ files }: { files: File[] }) {    status.value = `${files.map((f) => f.name).join(', ')}: received here, and nothing left your browser.`;}</script> <template>    <FileUpload mode="basic" accept=".pdf" choose-label="Choose a PDF" custom-upload auto @uploader="pretend" />    <small style="color: var(--vt-text-muted-color)" aria-live="polite">{{ status }}</small></template>

API

Read from packages/vue/src/components/FileUpload/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
mode'advanced' | 'basic'`advanced` (the default): a drop zone, a queue and upload buttons. `basic`: one button.
namestringThe form field name the files are sent under. Defaults to `'files[]'`.
urlstringWhere the files are posted. Leave it out with `customUpload`.
multipleboolean—
acceptstringThe `accept` attribute: `image/*`, `.pdf`… Files that do not match are refused with a message.
maxFileSizenumberIn bytes. Larger files are refused with a message.
fileLimitnumberHow many files may be queued and uploaded in all.
disabledboolean—
autobooleanUpload as soon as files are chosen.
customUploadbooleanEmit `uploader` with the files instead of posting them.
withCredentialsboolean—
requestPerFilebooleanPost each file in a request of its own, each with its own progress bar; a file leaves the queue as soon as its request succeeds. By default all the queued files go in one request.
chooseLabelstring—
uploadLabelstring—
cancelLabelstring—
showUploadButtonbooleanDefaults to true.
showCancelButtonbooleanDefaults to true.
invalidFileTypeMessagestring`{name}`, `{types}`. Defaults to the locale's.
invalidFileSizeMessagestring`{name}`, `{size}`. Defaults to the locale's.
invalidFileLimitMessagestring`{limit}`. Defaults to the locale's.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
selectevent: FileUploadEvent & { originalEvent: Event }—
before-uploadevent: { xhr: XMLHttpRequest; formData: FormData }—
progressevent: { originalEvent: ProgressEvent; progress: number; file?: File; fileProgress?: number }`progress` is the whole upload's; with `requestPerFile`, `file` and `fileProgress` say which request moved.
uploadevent: FileUploadEvent & { xhr: XMLHttpRequest }—
errorevent: FileUploadEvent & { xhr: XMLHttpRequest }—
uploaderevent: FileUploadEventWith `customUpload`: upload these yourself.
removeevent: { file: File; files: File[] }—
clear——

Slots

NameSlot propsDescription
header(props: { files: File[]; chooseCallback: () => void; uploadCallback: () => void; clearCallback: () => void })Extra content in the toolbar.
content(props: { files: File[]; uploadedFiles: File[]; removeFileCallback: (index: number) => void; progress: number; messages: string[] })Replaces the queue.
empty—Shown while the queue is empty.