File Upload for Angular

import { AuiFileUpload } from '@absoluteui/angular/file-upload';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AuiFileUpload } from '@absoluteui/angular/file-upload';

@Component({
  selector: 'app-attachments',
  imports: [ReactiveFormsModule, AuiFileUpload],
  template: `<aui-file-upload label="Attachments" [multiple]="true" [acceptExtensions]="['.pdf']" [formControl]="files"></aui-file-upload>`,
})
export class AttachmentsComponent {
  readonly files = new FormControl<File[]>([], { nonNullable: true });
}

<aui-file-upload>

Class AuiFileUpload; template reference #ref="auiFileUpload".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is File[]. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Visible label and accessible name (part of the button name).
hideLabel	boolean	false	Visually hide the label (it stays in the accessible name).
description	string		Help text, referenced by aria-describedby.
name	string		Form field name; also set on the native input for native submission.
multiple	boolean	false	Allow several files; a new selection appends. Single mode replaces the file.
required	boolean	false	At least one file is required.
disabled	boolean	false	Disable the button, drop zone, and remove buttons.
acceptTypes	readonly string[]		Accepted MIME types (“image/png”, “image/*”). Every file is checked.
acceptExtensions	readonly string[]		Accepted extensions including the dot (“.pdf”). When both lists are set, a file must match both.
maxFileSize	number		Maximum size of each file, in bytes.
maxTotalSize	number		Maximum combined size, in bytes.
maxFiles	number		Maximum number of files (requires multiple).
buttonText	string		Button text. Default: localized “Choose file” / “Choose files”.
validate	(files: readonly File[]) => string | null		Consumer validation; return a message to mark the value invalid.
icons	Partial<FileUploadIcons>		Icon slot overrides.
validationTiming	ValidationTiming	'blur'	When validation messages first appear; afterwards they update live.
dropZone	boolean	true	Render the drag-and-drop zone around the button.
showConstraints	boolean	true	Render a hint listing the type, size, and count limits.
locale	string	'en-US'	Message and size-formatting locale.

Two-way bindings

Model	Type	Change output	Description
[(value)]	File[]	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	FileUploadChangeDetail	The user added (chooser or drop) or removed files. Re-emits aui-change.
(rejected)	FileUploadRejectDetail	A selection contained files that were not added. Re-emits aui-reject.

Read-only state

Property	Type	Description
rejections	Signal<readonly FileRejection[]>	Files not added by the last selection, with reasons.

Methods

Call them through a viewChild query or a template reference.

Method	Description
getFormValue(): File[] | undefined	A copy of the selected files.
removeFile(file: File): void	Remove one file (no events).
openPicker(): void	Open the native chooser (needs user activation).
reportValidity(): boolean | undefined	Show messages now (marks the control submitted) and return validity.
setCustomError(message: string | null): void	External error (server, cross-field rule); null clears it.
focus(): void	Move focus to the primary focusable element.
reset(): void	Restore the initial value and clear dirty/touched/submitted state.