Form

File upload

Drop files on the zone or browse for them. The component checks the type, size and count, previews images, shows each file with its size and status, and uploads them with progress.

Features10

API

Theming

Basic

One file at a time: the picked file takes the place of the zone, with Replace and Remove. accept and maxFileSize check it, description tells the user the rules.

Drop a file here or browse CSV, up to 10 MB

Selected: nothing yet

7 lines

<tx-file-upload  accept=".csv"  [maxFileSize]="10 * 1024 * 1024"  description="CSV, up to 10 MB"  [(file)]="file"/><p class="note">Selected: {{ file()?.name ?? 'nothing yet' }}</p>

Multiple

With multiple the zone stays and the files collect in a list below it, images with a preview. fileLimit caps the count.

Drop files here or browse Up to 5 files of any type

customUpload hands the files to uploadHandler with progress, complete and fail callbacks — here a simulated server that refuses PDF files. Use url to send them as a FormData request instead.

Drop files here or browse Add a few files and press Upload — PDF files fail

7 lines

<tx-file-upload  multiple  [customUpload]="true"  description="Add a few files and press Upload — PDF files fail"  (uploadHandler)="send($event)"  (uploaded)="toast.success('Uploaded ' + $event.files.length + ' file(s)')"/>

Auto

auto uploads the files as soon as they are picked — no Upload button.

Drop files here or browse Images upload right away

Validation

Files that break accept, maxFileSize or fileLimit are not added; the reasons show under the zone and come out of rejected — here also as a toast.

Drop files here or browse PNG, JPEG or PDF, up to 1 MB, at most 3 files

8 lines

<tx-file-upload  multiple  accept="image/png,image/jpeg,.pdf"  [maxFileSize]="1024 * 1024"  [fileLimit]="3"  description="PNG, JPEG or PDF, up to 1 MB, at most 3 files"  (rejected)="warn($event)"/>

Basic mode

mode="basic" is a button with the chosen file name next to it — for a profile photo or an attachment field.

No file chosen

15 lines

<div class="stack">  <tx-file-upload    mode="basic"    accept="image/*"    chooseLabel="Change photo"    chooseIcon="camera"  />  <tx-file-upload    mode="basic"    [customUpload]="true"    chooseLabel="Attach file"    chooseIcon="paperclip"    (uploadHandler)="send($event)"  /></div>

Form

A form control: the value is the File (or File[] with multiple). Inside tx-field the hint and the error describe the drop zone.

Contract

Drop a file here or browse Signed PDF

No file yet

13 lines

<div class="form">  <tx-field    label="Contract"    [required]="true"    [messages]="{ required: 'Attach the signed contract' }"  >    <tx-file-upload accept=".pdf" description="Signed PDF" [formControl]="contract" />  </tx-field>  <div class="actions">    <button txButton (click)="contract.markAsTouched()">Send</button>    <span class="note">{{ contract.value ? contract.value.name : 'No file yet' }}</span>  </div></div>

Templates

txFileUploadDropzone replaces the content of the empty zone, txFileUploadFile draws each file — here as chips.

Add photos to the album

27 lines

<tx-file-upload multiple accept="image/*" [dt]="{ dropzone: { minHeight: '120px' } }">  <ng-template txFileUploadDropzone let-dragging>    <span class="zone">      <tx-icon [name]="dragging ? 'arrow-down' : 'images'" />      {{ dragging ? 'Drop the photos' : 'Add photos to the album' }}    </span>  </ng-template>  <ng-template txFileUploadFile let-entry let-remove="remove">    <span class="chip">      @if (entry.preview) {        <img class="thumb" [src]="entry.preview" alt="" />      }      <span class="name">{{ entry.file.name }}</span>      <button        txButton        text        rounded        size="small"        severity="secondary"        icon="times"        iconOnly        [attr.aria-label]="'Remove ' + entry.file.name"        (click)="remove($event)"      ></button>    </span>  </ng-template></tx-file-upload>

Disabled

disabled turns off the zone, the dialog and dropping.

Drop a file here or browse Uploads are paused during maintenance

Design tokens

dt changes one upload — here a compact zone with a solid primary outline and round corners.

Drop files here or browse Any file

14 lines

<tx-file-upload  multiple  description="Any file"  [dt]="{    dropzone: {      minHeight: '140px',      borderRadius: '24px',      dash: '1px 0',      borderColor: 'var(--tx-primary-base)',      background: 'var(--tx-highlight-background)',    },    icon: { borderRadius: 'var(--tx-radius-full)' },  }"/>