TxFileUploader · Vue

Demo: Upload requests are consumed and immediately discarded. Nothing is stored.

File picker and upload queue with size/type checks, progress and retry from the beginning.

Prop	Type	Default	Meaning
`dataSource`	`TxSource<File> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`adapter`	`TxUploadAdapter \| undefined`	`undefined`	Upload function for one file.
`multiple`	`boolean \| undefined`	`false`	Allows multiple files.
`accept`	`string \| undefined`	`undefined`	Browser file type filter, such as .pdf or image/*.
`maxFileSize`	`number \| undefined`	`undefined`	Maximum file size in bytes.
`minFileSize`	`number \| undefined`	`0`	Minimum file size in bytes.
`uploadMode`	`string \| undefined`	`useButtons`	Immediate upload or upload started through buttons.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`label`	`string \| undefined`	`Dateien hochladen`	Label or accessible name.

Events

Event	Payload / behavior
valueChanged	New value in { value }; editors also include previousValue and event.
uploaded	Upload succeeded: { file, result }.
uploadError	Upload failed: { file, error }.
progress	Upload progress in bytes: { file, loaded, total }.

Available through a template ref: upload(): Promise<void[]> starts all ready queued entries in parallel; cancel(): void cancels all active entries. Example: await uploader.value?.upload() or uploader.value?.cancel(). Declare const uploader = ref<{ upload(): Promise<void[]>; cancel(): void } | null>(null) and bind ref="uploader".

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.