Forms

Upload

@xui/upload

A file upload — a button or a drag-and-drop zone with a file list showing size, progress and a remove control. files is two-way bindable; selected emits the raw Files for the host to upload.

Install

pnpm add @xui/upload

Add the barrel to a standalone component's imports:

import { XuiUploadImports } from '@xui/upload';

@Component({
  imports: [XuiUploadImports],
  // …
})

Examples

Button

Loading preview…

<xui-upload multiple [(files)]="files" />

Dragger

Loading preview…

<xui-upload type="drag" multiple [(files)]="files" class="w-[420px]" />

API

XuiUpload

component

xui-upload

A file upload with a button or drag-and-drop zone and a file list showing per-file progress, status and a remove control. files is a two-way bindable list; selected emits the raw Files so the host can perform the upload and update each file's status/percent.

Inputs

Name

Type

Default

class

ClassValueExtra classes, merged into the component's own rather than replacing them.

''

type

XuiUploadTypeHow files are chosen: a button that opens the picker, or a drop zone that also accepts a drag.

this.config.type

multiple

booleanAccept more than one file. With this off, a new choice replaces the current file rather than adding to it.

false

accept

stringPassed to the native input's accept — a comma-separated list of extensions or MIME types, and shown as a hint under a drop zone. A filter for the file chooser, not validation.

''

disabled

booleanBlock choosing and dropping, and dim the control.

false

files

two-way

XuiUploadFile[]The chosen files and their upload state. Two-way bindable — write back to it to report progress or mark a file as failed.

[]

Outputs

Name

Type

selected

File[]The raw files just chosen (for the host to upload).

Source

libs/ui/upload/xui