# File
Use `ui-file` when users need to attach documents, images, or bundles without building a custom upload shell. It supports compact inline selection, larger drop zones, selected-file lists, multiple uploads, and shared field inputs like label, help text, size, variant, readonly, disabled, and validation messaging.
## Import
```ts
import { FileComponent } from 'ui';
```
## Basic upload patterns
```ts
import { Component } from '@angular/core';
import { FileComponent } from 'ui';
@Component({
selector: 'app-file-basic-demo',
standalone: true,
imports: [FileComponent],
template: `
Project brief
A roomy drop zone works well when upload is the primary action in the section.
Inline asset picker
Inline mode fits compact forms, rows, and dialogs where upload is a secondary step.
`,
})
export class FileBasicDemoComponent {}
```
## Layout, size, and label position
```ts
import { Component } from '@angular/core';
import { FileComponent } from 'ui';
@Component({
selector: 'app-file-layout-demo',
standalone: true,
imports: [FileComponent],
template: `
Large upload step
`,
})
export class FileLayoutDemoComponent {}
```
## Accept filters and limits
```ts
import { Component } from '@angular/core';
import { FileComponent } from 'ui';
@Component({
selector: 'app-file-filters-limits-demo',
standalone: true,
imports: [FileComponent],
template: `
`,
})
export class FileFiltersLimitsDemoComponent {}
```
## Multiple files and built-in list
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, FileComponent } from 'ui';
@Component({
selector: 'app-file-multiple-demo',
standalone: true,
imports: [ButtonComponent, FileComponent, FormsModule],
template: `
Selection
Files{{
files.length
}}
Total size{{
formatBytes(totalBytes)
}}
Last file{{
files.at(-1)?.name ?? 'None'
}}
Load example files
Clear
`,
})
export class FileMultipleDemoComponent {
protected files: File[] = [
new File(['roadmap'], 'roadmap.pdf', { type: 'application/pdf' }),
new File(['image'], 'hero-banner.png', { type: 'image/png' }),
];
protected get totalBytes(): number {
return this.files.reduce((sum, file) => sum + file.size, 0);
}
protected seedFiles(): void {
this.files = [
new File(['brief'], 'brief-v3.pdf', { type: 'application/pdf' }),
new File(['archive'], 'source-files.zip', { type: 'application/zip' }),
new File(['preview'], 'mobile-preview.jpg', { type: 'image/jpeg' }),
];
}
protected formatBytes(bytes: number): string {
if (bytes < 1024) {
return `${bytes} B`;
}
if (bytes < 1024 * 1024) {
return `${(bytes / 1024).toFixed(1)} KB`;
}
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}
}
```
## Validation, readonly, and disabled
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { ButtonComponent, FileComponent } from 'ui';
@Component({
selector: 'app-file-states-validation-demo',
standalone: true,
imports: [ButtonComponent, FileComponent, FormsModule, ReactiveFormsModule],
template: `
Validate required upload
Readonly keeps the current file visible. Disabled removes interaction entirely.
`,
})
export class FileStatesValidationDemoComponent {
protected readonly requiredFileControl = new FormControl(null, {
validators: [Validators.required],
});
protected readonly readonlyFile = new File(['copy'], 'archived-brief.pdf', {
type: 'application/pdf',
});
protected validateRequiredFile(): void {
this.requiredFileControl.markAsTouched();
this.requiredFileControl.updateValueAndValidity();
}
}
```
## Reactive form integration
```ts
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent, FileComponent } from 'ui';
@Component({
selector: 'app-file-form-demo',
standalone: true,
imports: [ButtonComponent, FileComponent, ReactiveFormsModule],
template: `
`,
})
export class FileFormDemoComponent {
protected readonly uploadForm = new FormGroup({
coverImage: new FormControl(
new File(['cover'], 'cover-image.png', { type: 'image/png' }),
),
attachments: new FormControl([
new File(['brief'], 'campaign-brief.pdf', { type: 'application/pdf' }),
]),
});
protected resetForm(): void {
this.uploadForm.reset({
coverImage: null,
attachments: [],
});
}
}
```
## Document request panel
```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonComponent, FileComponent } from 'ui';
@Component({
selector: 'app-file-request-panel-demo',
standalone: true,
imports: [ButtonComponent, FileComponent, FormsModule],
template: `
Client handoff package
Collect the signed deck, export archive, and any screenshots before publishing the final
delivery package.
`,
})
export class FileRequestPanelDemoComponent {
protected handoffFiles: File[] = [
new File(['summary'], 'release-summary.pdf', { type: 'application/pdf' }),
new File(['archive'], 'workspace-export.zip', { type: 'application/zip' }),
];
protected releaseNote: File | null = null;
}
```
## Accessibility
### Label and description
Prefer a visible `label` so the upload purpose is explicit. Help and error text are linked through `aria-describedby`, and `ariaLabel` can provide the trigger name when there is no visible label.
### Trigger semantics
Both modes are driven by a native file input that stays out of the tab order while the visible trigger exposes button-like interaction. Inline mode uses a readonly text field with `role="button"`; area mode uses the drop zone surface with `role="button"`.
### Keyboard
| Key | Action |
| --- | --- |
| Tab | Moves focus to the visible file trigger and, when files are present in area mode, to remove actions. |
| Enter / Space | Opens the native file picker from the visible trigger. |
| Shift+Tab | Returns focus to the previous control in the form flow. |
### File list actions
When area mode shows selected files, each remove button gets a file-specific accessible name such as `Remove contract.pdf`. The hidden native input remains `tabindex="-1"`, so users do not encounter duplicate focus stops.