Upload Queue for Angular

import { AuiUploadQueue } from '@absoluteui/angular/upload-queue';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Upload Queue page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { uploadQueue: { ... } } }) (see Configuration).

Example

import { Component, viewChild } from '@angular/core';
import { AuiUploadQueue } from '@absoluteui/angular/upload-queue';
import type { UploadFunction } from '@absoluteui/components/upload-queue';

@Component({
  selector: 'app-uploads',
  imports: [AuiUploadQueue],
  template: `
    <input type="file" multiple (change)="enqueue($event)">
    <aui-upload-queue #queue="auiUploadQueue" label="Uploads" [upload]="upload" [concurrency]="3"></aui-upload-queue>
  `,
})
export class UploadsComponent {
  readonly queue = viewChild.required<AuiUploadQueue>('queue');
  readonly upload: UploadFunction = async (file, { signal }) => (await fetch('/api/files', { method: 'POST', body: file, signal })).json();
  enqueue(event: Event): void {
    const input = event.target as HTMLInputElement;
    this.queue().add(Array.from(input.files ?? []));
  }
}

<aui-upload-queue>

Class AuiUploadQueue; template reference #ref="auiUploadQueue".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name of the list.
upload	UploadFunction		Required. Transport: performs one attempt. Resolve on success (the value becomes item.response), reject on failure, honour signal.
preview	boolean	false	Image previews via object URLs for image/* files (needs img-src blob:).
errorMessage	(error: unknown, file: File) => string | null		Map a rejection to a user-facing message. Default: generic localized message.
icons	Partial<UploadQueueIcons>		Icon slot overrides.
concurrency	number	'2'	Uploads running at the same time (1..16).
retries	number	'0'	Automatic retries after a failed attempt (0..10).
retryDelay	number	'1000'	Delay before the first automatic retry in ms (0..60000); doubles for each further retry.
autoStart	boolean	true	Start uploading as soon as files are added; when false, call start().
locale	string	'en-US'	Message and size-formatting locale.

Outputs

Output	Payload	Description
(changed)	UploadQueueChangeDetail	Items were added or removed, or an item changed status (not emitted for progress). Re-emits aui-change.
(completed)	UploadQueueCompleteDetail	Nothing is queued or uploading any more (once per batch). Re-emits aui-complete.

Read-only state

Property	Type	Description
busy	Signal<boolean>	Any item queued or uploading.

Methods

Call them through a viewChild query or a template reference.

Method	Description
add(files: Iterable<File>): string[] | undefined	Queue files; returns item ids.
start(): void	Start queued items (autoStart: false).
cancel(id: string): void	Cancel a queued or uploading item (aborts its signal).
cancelAll(): void	Cancel every active item.
retry(id: string): void	Queue a failed or cancelled item again.
remove(id: string): void	Remove an item (aborts it; revokes its preview URL).
clear(): void	Remove every item.
clearCompleted(): void	Remove finished items.
getItem(id: string): UploadItem | null | undefined	One item snapshot.