Vitral 0.2
Mídia

FileUpload

Um input de arquivo desenhado como botão, área de soltar e fila, que verifica tipo, tamanho e quantidade, com progresso do envio.

Testado com WAI-ARIA

Importação

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

Avançado

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>

Básico

<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

Lido de packages/vue/src/components/FileUpload/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
mode'advanced' | 'basic'`advanced` (o padrão): uma área de soltar, uma fila e botões de envio. `basic`: um botão.
namestringO nome do campo de formulário com que os arquivos são enviados. O padrão é `'files[]'`.
urlstringPara onde os arquivos são enviados. Omita-o com `customUpload`.
multipleboolean—
acceptstringO atributo `accept`: `image/*`, `.pdf`… Arquivos que não combinam são recusados com uma mensagem.
maxFileSizenumberEm bytes. Arquivos maiores são recusados com uma mensagem.
fileLimitnumberQuantos arquivos podem ser enfileirados e enviados no total.
disabledboolean—
autobooleanEnvia assim que os arquivos são escolhidos.
customUploadbooleanEmite `uploader` com os arquivos em vez de enviá-los.
withCredentialsboolean—
requestPerFilebooleanEnvia cada arquivo numa requisição própria, cada um com sua barra de progresso; um arquivo sai da fila assim que sua requisição dá certo. Por padrão todos os arquivos da fila vão numa só requisição.
chooseLabelstring—
uploadLabelstring—
cancelLabelstring—
showUploadButtonbooleanO padrão é true.
showCancelButtonbooleanO padrão é true.
invalidFileTypeMessagestring`{name}`, `{types}`. O padrão vem do locale.
invalidFileSizeMessagestring`{name}`, `{size}`. O padrão vem do locale.
invalidFileLimitMessagestring`{limit}`. O padrão vem do locale.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
selectevent: FileUploadEvent & { originalEvent: Event }—
before-uploadevent: { xhr: XMLHttpRequest; formData: FormData }—
progressevent: { originalEvent: ProgressEvent; progress: number; file?: File; fileProgress?: number }`progress` é o do envio inteiro; com `requestPerFile`, `file` e `fileProgress` dizem qual requisição avançou.
uploadevent: FileUploadEvent & { xhr: XMLHttpRequest }—
errorevent: FileUploadEvent & { xhr: XMLHttpRequest }—
uploaderevent: FileUploadEventCom `customUpload`: envie estes arquivos você mesmo.
removeevent: { file: File; files: File[] }—
clear——

Slots

NomeProps do slotDescrição
header(props: { files: File[]; chooseCallback: () => void; uploadCallback: () => void; clearCallback: () => void })Conteúdo extra na barra de ferramentas.
content(props: { files: File[]; uploadedFiles: File[]; removeFileCallback: (index: number) => void; progress: number; messages: string[] })Substitui a fila.
empty—Mostrado enquanto a fila está vazia.