TxFileUploader · Vue

Demo: Uploads werden nur entgegengenommen und sofort verworfen. Keine Speicherung.

Dateiauswahl und Uploadwarteschlange mit Größen-/Typprüfung, Fortschritt und Wiederholung ab Dateianfang.

Prop	Typ	Standard	Bedeutung
`dataSource`	`TxSource<File> \| undefined`	`undefined`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`adapter`	`TxUploadAdapter \| undefined`	`undefined`	Uploadfunktion für eine Datei.
`multiple`	`boolean \| undefined`	`false`	Erlaubt mehrere Dateien.
`accept`	`string \| undefined`	`undefined`	Browser-Dateitypfilter, etwa .pdf oder image/*.
`maxFileSize`	`number \| undefined`	`undefined`	Maximale Dateigröße in Bytes.
`minFileSize`	`number \| undefined`	`0`	Minimale Dateigröße in Bytes.
`uploadMode`	`string \| undefined`	`useButtons`	Sofortiger oder per Schaltfläche gestarteter Upload.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`label`	`string \| undefined`	`Dateien hochladen`	Beschriftung beziehungsweise zugänglicher Name.

Ereignisse

Event	Payload / Verhalten
valueChanged	Neuer Wert in { value }; Editoren liefern zusätzlich previousValue und event.
uploaded	Upload erfolgreich: { file, result }.
uploadError	Upload fehlgeschlagen: { file, error }.
progress	Uploadfortschritt in Bytes: { file, loaded, total }.

Über eine Template-Ref erreichbar: upload(): Promise<void[]> startet alle bereiten Warteschlangeneinträge parallel; cancel(): void bricht alle laufenden Einträge ab. Beispiel: await uploader.value?.upload() beziehungsweise uploader.value?.cancel(). Die Ref wird mit const uploader = ref<{ upload(): Promise<void[]>; cancel(): void } | null>(null) angelegt und mit ref="uploader" gebunden.

vue

<script setup lang="ts">
import { TxFileUploader, txHttpUpload } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
// Demo endpoint: consumes the request without storing files. Maximum 1 MiB.
const upload = txHttpUpload({ url: '/api/upload' })
</script>

<template>
  <TxFileUploader :adapter="upload" accept=".txt" :max-file-size="1048576" />
</template>

TxFileUploader.