From d2445aadffb52cfe82616ce7a7709b2cea05ffb4 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 7 Oct 2026 12:19:09 +0300
Subject: [PATCH 1/7] feat(file-upload): add new TEDI-Ready component #752

---
 skills/tedi-angular/references/components.md  |   30 +
 skills/tedi-angular/references/forms.md       |    1 +
 .../form/_field-surface-mixins.scss           |   50 +-
 .../file-upload/file-upload.component.html    |  144 +++
 .../file-upload/file-upload.component.scss    |  142 +++
 .../file-upload/file-upload.component.spec.ts | 1079 +++++++++++++++++
 .../form/file-upload/file-upload.component.ts |  681 +++++++++++
 .../form/file-upload/file-upload.stories.ts   |  545 +++++++++
 .../form/file-upload/file-upload.types.ts     |   31 +
 src/tedi/components/form/file-upload/index.ts |    2 +
 src/tedi/components/form/index.ts             |    1 +
 .../form/text-field/text-field.stories.ts     |    4 +-
 .../components/tags/tag/tag.component.scss    |    6 +-
 src/tedi/services/translation/translations.ts |   37 +
 src/tedi/utils/file.util.ts                   |   18 +
 src/tedi/utils/index.ts                       |    1 +
 16 files changed, 2749 insertions(+), 23 deletions(-)
 create mode 100644 src/tedi/components/form/file-upload/file-upload.component.html
 create mode 100644 src/tedi/components/form/file-upload/file-upload.component.scss
 create mode 100644 src/tedi/components/form/file-upload/file-upload.component.spec.ts
 create mode 100644 src/tedi/components/form/file-upload/file-upload.component.ts
 create mode 100644 src/tedi/components/form/file-upload/file-upload.stories.ts
 create mode 100644 src/tedi/components/form/file-upload/file-upload.types.ts
 create mode 100644 src/tedi/components/form/file-upload/index.ts
 create mode 100644 src/tedi/utils/file.util.ts

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 5b36a2b83..feafb1d6f 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -201,6 +201,36 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   content. It is decorative and `aria-hidden`, which means the projected text is the whole accessible
   name — if the icon carries meaning the text doesn't, compose a heading and an icon yourself.
 
+### File upload
+
+- **`tedi-file-upload`'s `inputId` names the hidden file input, but the add button is the control.**
+  Bind `<label tedi-label [for]>` to `inputId` inside a `tedi-form-field` as for any other control:
+  clicking the label opens the picker, and the field reads the label back through the input, gives it
+  an id if it has none, and names the add button by the label *and* its own text. Nothing else can
+  name the button, so a field without a label announces only "Add attachment".
+- **`tedi-file-upload` has no separate "default" input and no feedback input.** `[files]` seeds the
+  list, `[(files)]` keeps the parent in sync, `[formControl]` hands it to the form — bind a stable
+  reference, an inline literal is written back on every check. Hints and errors are projected
+  `tedi-feedback-text` on the wrapping `tedi-form-field`; the field adds its own restrictions hint
+  (from `accept` / `maxSize`, off with `showRestrictions`) and a rejection summary below them.
+- **`tedi-file-upload` validates itself.** It registers on `NG_VALIDATORS`, so a bound control fails
+  with a `rejectedFiles` error while any `isValid: false` file is listed. By default a file that
+  fails `accept`, `maxSize` or `validator` is discarded and only the summary under the field remains;
+  `keepRejectedFiles` keeps it in the list, marked invalid, instead. It shows as a danger tag only
+  while two or more files are listed; a single file shows just its name. Filter on `isValid` before
+  uploading either way.
+- **A `tedi-file-upload` `validator` adds a rule but no hint.** Its reason joins the rejection
+  summary after the built-in ones, and it only runs on files that already passed `accept` and
+  `maxSize`. The restrictions hint cannot describe it, so project a `tedi-feedback-text` that does.
+- **`maxSize` is in bytes**, the unit `File.size` is in — not megabytes as in React. The hint renders
+  it in whichever unit reads best.
+- **It selects files, it does not upload them.** `fileRemove` emits the single entry the user removed,
+  one event per file when clearing, so an in-flight upload can be aborted without diffing
+  `filesChange`. Set `isLoading` on a file yourself while it uploads: the tag shows a spinner and
+  loses its remove button.
+- **Below `md` it stacks**: files above a full-width button row, and the clear button becomes a text
+  button. There is no input for this.
+
 ### Clear buttons
 
 - **`showClearOnInteraction` belongs on the component that renders the clear button.** For a text
diff --git a/skills/tedi-angular/references/forms.md b/skills/tedi-angular/references/forms.md
index 6a085ed67..c2a47de23 100644
--- a/skills/tedi-angular/references/forms.md
+++ b/skills/tedi-angular/references/forms.md
@@ -25,6 +25,7 @@ component's `ɵɵComponentDeclaration` carries its real selector; see
 | RadioGroupComponent | `tedi-radio-group` | `string \| null` |
 | ToggleComponent | `tedi-toggle` | `boolean` |
 | DateFieldComponent | `tedi-date-field` | `Date \| Date[] \| DateRange \| null` |
+| FileUploadComponent | `tedi-file-upload` | `FileUploadFile[]` — also registers on `NG_VALIDATORS` |
 | DatePickerComponent | `tedi-date-picker` | `Date \| null` — **deprecated**, use `DateFieldComponent` |
 | TimeFieldComponent | `tedi-time-field` | `string \| null` (HH:mm) |
 | TimePickerComponent | `tedi-time-picker` | `string \| null` (HH:mm) |
diff --git a/src/tedi/components/form/_field-surface-mixins.scss b/src/tedi/components/form/_field-surface-mixins.scss
index 5e32dca15..7321b3566 100644
--- a/src/tedi/components/form/_field-surface-mixins.scss
+++ b/src/tedi/components/form/_field-surface-mixins.scss
@@ -48,10 +48,34 @@
 
 /// Each state is matched twice: a native control carries it as `:disabled` /
 /// `aria-invalid`, a wrapper as `.tedi-field-surface--disabled` / `--invalid`.
+$disabled-selector: ":disabled, .tedi-field-surface--disabled";
+$invalid-selector: '[aria-invalid="true"], .tedi-field-surface--invalid';
+$settled-selector: '[aria-invalid="true"], .tedi-field-surface--invalid, .tedi-field-surface--valid';
+
+/// The states a field is *in* rather than ones the pointer or focus put it in.
+/// On its own for a surface that is not an input and so has no hover, active
+/// or focus of its own; `surface-states` adds those on top.
+@mixin settled-states {
+  &:not(#{$disabled-selector}) {
+    &:is(#{$invalid-selector}) {
+      --_field-border-color: var(--form-general-feedback-error-border);
+    }
+
+    &.tedi-field-surface--valid {
+      --_field-border-color: var(--form-general-feedback-success-border);
+    }
+  }
+
+  &:is(#{$disabled-selector}) {
+    --_field-border-color: var(--form-input-border-disabled);
+    --_field-background: var(--form-input-background-disabled);
+    --_field-ring-color: transparent;
+
+    cursor: not-allowed;
+  }
+}
+
 @mixin surface-states($focus: ":focus-visible", $from-descendant: false) {
-  $disabled: ":disabled, .tedi-field-surface--disabled";
-  $invalid: '[aria-invalid="true"], .tedi-field-surface--invalid';
-  $settled: '[aria-invalid="true"], .tedi-field-surface--invalid, .tedi-field-surface--valid';
   $hovered: "&:hover";
   $activated: "&:active";
   $focused: "&#{$focus}";
@@ -62,22 +86,16 @@
     $focused: "#{$focused}, &:has(input:focus-visible, textarea:focus-visible)";
   }
 
-  &:not(#{$disabled}) {
-    &:is(#{$invalid}) {
-      --_field-border-color: var(--form-general-feedback-error-border);
-    }
-
-    &.tedi-field-surface--valid {
-      --_field-border-color: var(--form-general-feedback-success-border);
-    }
+  @include settled-states;
 
+  &:not(#{$disabled-selector}) {
     #{$activated},
     #{$focused} {
       --_field-ring-color: var(--_field-border-color);
     }
   }
 
-  &:not(#{$disabled}, #{$settled}) {
+  &:not(#{$disabled-selector}, #{$settled-selector}) {
     #{$hovered} {
       --_field-border-color: var(--form-input-border-hover);
     }
@@ -90,12 +108,4 @@
       --_field-border-color: var(--form-input-border-focus);
     }
   }
-
-  &:is(#{$disabled}) {
-    --_field-border-color: var(--form-input-border-disabled);
-    --_field-background: var(--form-input-background-disabled);
-    --_field-ring-color: transparent;
-
-    cursor: not-allowed;
-  }
 }
diff --git a/src/tedi/components/form/file-upload/file-upload.component.html b/src/tedi/components/form/file-upload/file-upload.component.html
new file mode 100644
index 000000000..389600ab3
--- /dev/null
+++ b/src/tedi/components/form/file-upload/file-upload.component.html
@@ -0,0 +1,144 @@
+<ng-template #fileList>
+  @if (files().length > 1) {
+    <ul
+      class="tedi-file-upload__tags"
+      role="list"
+      [attr.aria-labelledby]="readOnly() ? labelId() : null"
+    >
+      @for (file of files(); track file) {
+        <li class="tedi-file-upload__tag">
+          <tedi-tag
+            [type]="file.isValid === false ? 'danger' : 'primary'"
+            [loading]="!!file.isLoading"
+            [closable]="isEditable() && !file.isLoading"
+            (closed)="removeFile(file)"
+          >
+            {{ file.name }}
+            @if (file.isValid === false) {
+              <span class="sr-only"> ({{ failedLabel() }})</span>
+            }
+          </tedi-tag>
+        </li>
+      }
+    </ul>
+  } @else if (files()[0]; as file) {
+    @if (readOnly()) {
+      <ul
+        class="tedi-file-upload__tags"
+        role="list"
+        [attr.aria-labelledby]="labelId()"
+      >
+        <li class="tedi-file-upload__tag">
+          <ng-container
+            [ngTemplateOutlet]="singleFile"
+            [ngTemplateOutletContext]="{ $implicit: file }"
+          />
+        </li>
+      </ul>
+    } @else {
+      <ng-container
+        [ngTemplateOutlet]="singleFile"
+        [ngTemplateOutletContext]="{ $implicit: file }"
+      />
+    }
+  }
+</ng-template>
+
+<ng-template #singleFile let-file>
+  <span class="tedi-file-upload__name">
+    {{ file.name }}
+    @if (file.isValid === false) {
+      <span class="sr-only"> ({{ failedLabel() }})</span>
+    }
+  </span>
+</ng-template>
+
+@if (readOnly()) {
+  <ng-container [ngTemplateOutlet]="fileList" />
+} @else {
+  <div
+    class="tedi-file-upload__field"
+    [class.tedi-field-surface]="paintsSurface()"
+    [class.tedi-field-surface--invalid]="paintsSurface() && isInvalid()"
+    [class.tedi-field-surface--valid]="paintsSurface() && isValid()"
+    [class.tedi-field-surface--disabled]="paintsSurface() && isDisabled()"
+  >
+    <div class="tedi-file-upload__value">
+      <ng-container [ngTemplateOutlet]="fileList" />
+    </div>
+
+    <div class="tedi-file-upload__actions">
+      @if (showClear()) {
+        <div class="tedi-file-upload__clear-group">
+          @if (isStacked()) {
+            <button
+              tedi-button
+              type="button"
+              variant="neutral"
+              class="tedi-file-upload__clear"
+              (click)="reset()"
+            >
+              <tedi-icon name="close" [size]="18" color="inherit" />
+              {{ clearLabel() }}
+            </button>
+          } @else {
+            <button
+              tedi-closing-button
+              type="button"
+              size="small"
+              class="tedi-file-upload__clear"
+              [iconSize]="18"
+              [ariaLabel]="clearLabel()"
+              (click)="reset()"
+            ></button>
+          }
+          <tedi-separator axis="vertical" size="1.5rem" />
+        </div>
+      }
+
+      <button
+        #addButton
+        tedi-button
+        type="button"
+        variant="neutral"
+        class="tedi-file-upload__add"
+        [size]="isStacked() ? 'default' : 'small'"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="addLabelledBy()"
+        [attr.aria-describedby]="describedBy.attribute()"
+        (click)="openPicker()"
+        (blur)="handleBlur()"
+      >
+        <tedi-icon name="file_upload" [size]="18" color="inherit" />
+        <span [id]="addLabelId()">{{ addLabel() }}</span>
+      </button>
+    </div>
+  </div>
+
+  @if (rejectionError(); as error) {
+    <tedi-feedback-text
+      [id]="feedbackIds().error"
+      [text]="error"
+      type="error"
+    />
+  }
+
+  @if (restrictionsHint(); as hint) {
+    <tedi-feedback-text [id]="feedbackIds().hint" [text]="hint" />
+  }
+}
+
+<input
+  #fileInput
+  class="tedi-file-upload__input"
+  type="file"
+  tabindex="-1"
+  aria-hidden="true"
+  [id]="resolvedId()"
+  [attr.name]="name()"
+  [attr.accept]="accept()"
+  [multiple]="multiple()"
+  [disabled]="isDisabled() || readOnly()"
+  (change)="handleSelection($event)"
+  (cancel)="handleDialogCancel()"
+/>
diff --git a/src/tedi/components/form/file-upload/file-upload.component.scss b/src/tedi/components/form/file-upload/file-upload.component.scss
new file mode 100644
index 000000000..0c426807f
--- /dev/null
+++ b/src/tedi/components/form/file-upload/file-upload.component.scss
@@ -0,0 +1,142 @@
+@use "@tedi-design-system/core/bootstrap-utility/breakpoints";
+@use "../field-surface-mixins" as field-surface;
+
+.tedi-file-upload {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--form-field-outer-spacing);
+  min-width: 0;
+
+  &__field {
+    @include field-surface.tokens;
+
+    --_field-padding-y: var(--form-field-padding-y-md-has-button);
+
+    display: flex;
+    gap: var(--form-field-inner-spacing);
+    align-items: flex-start;
+    min-width: 0;
+
+    &:not(.tedi-field-surface) {
+      flex: 1;
+    }
+
+    &:where(.tedi-field-surface) {
+      @include field-surface.surface(content);
+
+      width: 100%;
+    }
+
+    // The field is not an input, so it has no hover, active or focus border of
+    // its own — the add button carries those.
+    &.tedi-field-surface {
+      @include field-surface.settled-states;
+    }
+  }
+
+  &--small &__field {
+    @include field-surface.size(small);
+
+    --_field-padding-y: var(--form-field-padding-y-sm-has-button);
+  }
+
+  @include breakpoints.media-breakpoint-up(md) {
+    &--small &__field {
+      --_field-padding-y: var(--tedi-borders-01);
+    }
+
+    &--small &__actions {
+      margin-block: calc(-1 * var(--tedi-borders-01));
+    }
+  }
+
+  &__value {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    align-self: stretch;
+    min-width: 0;
+    font-size: var(--body-regular-size);
+    line-height: var(--body-regular-line-height);
+    color: var(--form-input-text-filled);
+  }
+
+  &--small &__value {
+    font-size: var(--body-small-regular-size);
+    line-height: var(--body-small-regular-line-height);
+  }
+
+  &--disabled &__value {
+    color: var(--form-input-text-disabled);
+  }
+
+  &__name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--form-field-inner-spacing);
+    padding: var(--layout-grid-gutters-04) 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &--read-only &__tags {
+    padding: 0;
+  }
+
+  &__tag {
+    display: flex;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+
+  &__actions {
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--form-field-inner-spacing);
+    align-items: center;
+  }
+
+  &__clear-group {
+    display: flex;
+    gap: var(--layout-grid-gutters-04);
+    align-items: center;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  @include breakpoints.media-breakpoint-down(md) {
+    &__field {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    &__value {
+      align-self: auto;
+    }
+
+    &--empty &__value {
+      display: none;
+    }
+
+    &__actions {
+      gap: var(--layout-grid-gutters-08);
+      justify-content: flex-end;
+    }
+
+    &__clear-group,
+    &__clear,
+    &__add {
+      flex: 1;
+    }
+  }
+}
diff --git a/src/tedi/components/form/file-upload/file-upload.component.spec.ts b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
new file mode 100644
index 000000000..abc9153b0
--- /dev/null
+++ b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
@@ -0,0 +1,1079 @@
+import { Component, signal } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { By } from "@angular/platform-browser";
+import { ToastAnnouncerService } from "../../../services/toast/toast-announcer.service";
+import { TediTranslationService } from "../../../services/translation/translation.service";
+import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../tokens/translation.token";
+import { BreakpointService } from "../../../services/breakpoint/breakpoint.service";
+import { FormFieldComponent } from "../form-field/form-field.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+import { LabelComponent } from "../../content/label/label.component";
+import { FileUploadComponent } from "./file-upload.component";
+import { FileUploadFile } from "./file-upload.types";
+
+class TranslationMock {
+  translate(key: string, ...args: unknown[]) {
+    return args.length ? `${key}:${args.join(",")}` : key;
+  }
+  track(key: string) {
+    return () => key;
+  }
+}
+
+const isBelowMd = signal(false);
+
+const breakpointMock = {
+  isBelowBreakpoint: () => isBelowMd.asReadonly(),
+  isAboveBreakpoint: () => signal(false).asReadonly(),
+  currentBreakpoint: () => signal(undefined).asReadonly(),
+};
+
+const announcer = { announce: jest.fn(), clear: jest.fn(), destroy: jest.fn() };
+
+beforeEach(() => {
+  announcer.announce.mockClear();
+  isBelowMd.set(false);
+});
+
+const announced = async (): Promise<string> => {
+  await new Promise((resolve) => setTimeout(resolve, 300 + 150));
+
+  return announcer.announce.mock.calls.at(-1)?.[0] ?? "";
+};
+
+const announcedAs = (): string | undefined =>
+  announcer.announce.mock.calls.at(-1)?.[1];
+
+// `lastModified` is pinned because it defaults to `Date.now()`, which would make
+// two fabricated files differ by milliseconds — a real file picked twice carries
+// the same mtime, which is what the duplicate check relies on.
+const makeFile = (
+  name: string,
+  size = 100,
+  type = "application/pdf",
+  lastModified = 1_700_000_000_000,
+): File => {
+  const file = new File(["x"], name, { type, lastModified });
+  Object.defineProperty(file, "size", { value: size });
+  return file;
+};
+
+const fileInput = (fixture: ComponentFixture<unknown>): HTMLInputElement =>
+  fixture.debugElement.query(By.css("input[type=file]")).nativeElement;
+
+const addButton = (fixture: ComponentFixture<unknown>): HTMLButtonElement =>
+  fixture.debugElement.query(By.css(".tedi-file-upload__add")).nativeElement;
+
+const clearButton = (
+  fixture: ComponentFixture<unknown>,
+): HTMLButtonElement | null =>
+  fixture.debugElement.query(By.css(".tedi-file-upload__clear"))
+    ?.nativeElement ?? null;
+
+const fieldOf = (fixture: ComponentFixture<unknown>): HTMLElement =>
+  fixture.debugElement.query(By.css(".tedi-file-upload__field")).nativeElement;
+
+const tagRemoveButtons = (
+  fixture: ComponentFixture<unknown>,
+): HTMLButtonElement[] =>
+  fixture.debugElement
+    .queryAll(By.css(".tedi-tag .tedi-closing-button"))
+    .map((el) => el.nativeElement as HTMLButtonElement);
+
+const selectFiles = (fixture: ComponentFixture<unknown>, files: File[]) => {
+  const input = fileInput(fixture);
+  Object.defineProperty(input, "files", { value: files, configurable: true });
+  input.dispatchEvent(new Event("change"));
+  fixture.detectChanges();
+};
+
+const baseProviders = [
+  { provide: ToastAnnouncerService, useValue: announcer },
+  { provide: TediTranslationService, useClass: TranslationMock },
+  { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+  { provide: BreakpointService, useValue: breakpointMock },
+];
+
+describe("FileUploadComponent", () => {
+  let fixture: ComponentFixture<FileUploadComponent>;
+  let component: FileUploadComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FileUploadComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(FileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  const text = (selector: string) =>
+    fixture.debugElement
+      .query(By.css(selector))
+      ?.nativeElement.textContent.trim();
+
+  const names = () => component.files().map((file) => file.name);
+
+  it("creates with a translated add button and a hidden file input", () => {
+    expect(component).toBeTruthy();
+    expect(text(".tedi-file-upload__add span")).toBe("file-upload.add");
+
+    const input = fileInput(fixture);
+    // The input stays out of the tab order and the tree: the add button is the
+    // control.
+    expect(input.getAttribute("tabindex")).toBe("-1");
+    expect(input.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("opens the file picker from the add button", () => {
+    const click = jest.spyOn(fileInput(fixture), "click");
+
+    addButton(fixture).click();
+
+    expect(click).toHaveBeenCalledTimes(1);
+  });
+
+  it("stays inert while disabled", () => {
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+
+    const click = jest.spyOn(fileInput(fixture), "click");
+    const button = addButton(fixture);
+
+    expect(button.disabled).toBe(true);
+    expect(fileInput(fixture).disabled).toBe(true);
+    expect(
+      fixture.nativeElement.classList.contains("tedi-file-upload--disabled"),
+    ).toBe(true);
+
+    component["openPicker"]();
+    expect(click).not.toHaveBeenCalled();
+  });
+
+  it("gives each instance its own generated id", () => {
+    @Component({
+      standalone: true,
+      imports: [FileUploadComponent],
+      template: `<tedi-file-upload [maxSize]="1" /><tedi-file-upload
+          [maxSize]="1"
+        />`,
+    })
+    class TwoFieldsComponent {}
+
+    const pair = TestBed.createComponent(TwoFieldsComponent);
+    pair.detectChanges();
+
+    const [first, second] = pair.debugElement
+      .queryAll(By.css("input[type=file]"))
+      .map((el) => el.nativeElement as HTMLInputElement);
+    const [firstButton, secondButton] = pair.debugElement
+      .queryAll(By.css(".tedi-file-upload__add"))
+      .map((el) => el.nativeElement as HTMLElement);
+
+    expect(first.id).not.toBe(second.id);
+    // The feedback ids are derived from it, so a collision would cross-wire
+    // one field's aria-describedby to the other's hint.
+    expect(firstButton.getAttribute("aria-describedby")).not.toBe(
+      secondButton.getAttribute("aria-describedby"),
+    );
+  });
+
+  it("forwards inputId, name, accept and multiple to the input", () => {
+    fixture.componentRef.setInput("inputId", "attachments");
+    fixture.componentRef.setInput("name", "attachments[]");
+    fixture.componentRef.setInput("accept", ".pdf,.txt");
+    fixture.componentRef.setInput("multiple", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.id).toBe("attachments");
+    expect(input.getAttribute("name")).toBe("attachments[]");
+    expect(input.getAttribute("accept")).toBe(".pdf,.txt");
+    expect(input.multiple).toBe(true);
+  });
+
+  it("names the add button by its own text when no label is wired up", () => {
+    expect(addButton(fixture).getAttribute("aria-labelledby")).toBeNull();
+  });
+
+  describe("selection", () => {
+    it("adds a picked file and announces it", async () => {
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(names()).toEqual(["report.pdf"]);
+      expect(await announced()).toBe("file-upload.added:1");
+      expect(announcedAs()).toBe("assertive");
+    });
+
+    it("clears the input value so the same file can be picked again", () => {
+      const input = fileInput(fixture);
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(input.value).toBe("");
+    });
+
+    it("replaces the file when not multiple", () => {
+      selectFiles(fixture, [makeFile("first.pdf")]);
+      selectFiles(fixture, [makeFile("second.pdf")]);
+
+      expect(names()).toEqual(["second.pdf"]);
+    });
+
+    it("appends files when multiple", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("first.pdf")]);
+      selectFiles(fixture, [makeFile("second.pdf")]);
+
+      expect(names()).toEqual(["first.pdf", "second.pdf"]);
+    });
+
+    it("skips a file that is already listed and says so", async () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [makeFile("report.pdf"), makeFile("other.pdf")]);
+
+      expect(names()).toEqual(["report.pdf", "other.pdf"]);
+      // Announced together: separate calls would overwrite each other and only
+      // the last would ever be read.
+      expect(await announced()).toBe(
+        "file-upload.duplicates-skipped:'report.pdf'. file-upload.added:1",
+      );
+    });
+
+    it("keeps a same-named file that differs in size", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("IMG_0001.jpg", 100)]);
+      selectFiles(fixture, [makeFile("IMG_0001.jpg", 250)]);
+
+      expect(component.files().map((file) => file.size)).toEqual([100, 250]);
+    });
+
+    it("ignores a selection that carries no files", async () => {
+      const input = fileInput(fixture);
+      Object.defineProperty(input, "files", {
+        value: null,
+        configurable: true,
+      });
+      input.dispatchEvent(new Event("change"));
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(await announced()).toBe("");
+    });
+  });
+
+  describe("validation", () => {
+    const summary = () => text("tedi-feedback-text.tedi-feedback-text--error");
+
+    it("keeps a rejected file as a danger tag and summarises the rejection", async () => {
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("ok.pdf"),
+        makeFile("bad.txt", 100, "text/plain"),
+      ]);
+
+      expect(component.files().map((file) => file.isValid)).toEqual([
+        true,
+        false,
+      ]);
+      expect(
+        fixture.debugElement.queryAll(By.css(".tedi-tag--danger")).length,
+      ).toBe(1);
+      expect(text(".tedi-tag--danger .sr-only")).toBe("(file-upload.failed)");
+      expect(summary()).toBe("file-upload.extension-rejected:'bad.txt'");
+      expect(fieldOf(fixture).classList).toContain(
+        "tedi-field-surface--invalid",
+      );
+      expect(await announced()).toBe(
+        "file-upload.extension-rejected:'bad.txt'. file-upload.added:1",
+      );
+    });
+
+    it("discards a rejected file by default", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+      expect(summary()).toBe("file-upload.extension-rejected:'notes.txt'");
+    });
+
+    it("rejects a file over maxSize", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("big.pdf", 2 * 1024 ** 2)]);
+
+      expect(component.files()).toEqual([]);
+      expect(summary()).toBe("file-upload.size-rejected:'big.pdf'");
+    });
+
+    it("names a file breaking both restrictions once, by its first reason", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 50);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
+
+      expect(summary()).toBe("file-upload.extension-rejected:'notes.txt'");
+    });
+
+    it("accepts a wildcard MIME group and an exact MIME type", () => {
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("accept", "image/*,application/pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("photo.png", 100, "image/png"),
+        makeFile("report.pdf"),
+        makeFile("README", 100, "text/plain"),
+      ]);
+
+      expect(component.files().map((file) => file.isValid)).toEqual([
+        true,
+        true,
+        false,
+      ]);
+    });
+
+    it("clears the summary on the next clean selection", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(summary()).toBeDefined();
+
+      selectFiles(fixture, [makeFile("ok.pdf")]);
+      expect(summary()).toBeUndefined();
+    });
+
+    it("clears the summary once the last rejected file is removed", () => {
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("ok.pdf"),
+        makeFile("bad.txt", 100, "text/plain"),
+      ]);
+      expect(summary()).toBeDefined();
+
+      tagRemoveButtons(fixture)[1].click();
+      fixture.detectChanges();
+
+      expect(names()).toEqual(["ok.pdf"]);
+      expect(summary()).toBeUndefined();
+    });
+
+    describe("with a validator", () => {
+      const noSpaces = (file: File) =>
+        file.name.includes(" ") ? "Faili nimes ei tohi olla tühikuid." : null;
+
+      beforeEach(() => {
+        fixture.componentRef.setInput("multiple", true);
+        fixture.componentRef.setInput("validator", noSpaces);
+        fixture.detectChanges();
+      });
+
+      it("keeps a file it rejects as a danger tag and names it in the summary", async () => {
+        fixture.componentRef.setInput("keepRejectedFiles", true);
+        fixture.detectChanges();
+        selectFiles(fixture, [makeFile("ok.pdf"), makeFile("my scan.pdf")]);
+
+        expect(component.files().map((file) => file.isValid)).toEqual([
+          true,
+          false,
+        ]);
+        expect(
+          fixture.debugElement.queryAll(By.css(".tedi-tag--danger")).length,
+        ).toBe(1);
+        expect(summary()).toBe(
+          "Faili nimes ei tohi olla tühikuid: 'my scan.pdf'",
+        );
+        expect(await announced()).toBe(
+          "Faili nimes ei tohi olla tühikuid: 'my scan.pdf'. file-upload.added:1",
+        );
+      });
+
+      it("groups the files that fail the same rule", () => {
+        selectFiles(fixture, [makeFile("a b.pdf"), makeFile("c d.pdf")]);
+
+        expect(summary()).toBe(
+          "Faili nimes ei tohi olla tühikuid: 'a b.pdf', 'c d.pdf'",
+        );
+      });
+
+      it("lists the built-in reasons first and skips the validator for those files", () => {
+        const validator = jest.fn(noSpaces);
+        fixture.componentRef.setInput("validator", validator);
+        fixture.componentRef.setInput("accept", ".pdf");
+        fixture.detectChanges();
+
+        selectFiles(fixture, [
+          makeFile("bad name.txt", 100, "text/plain"),
+          makeFile("my scan.pdf"),
+        ]);
+
+        expect(validator).toHaveBeenCalledTimes(1);
+        expect(summary()).toBe(
+          "file-upload.extension-rejected:'bad name.txt'. " +
+            "Faili nimes ei tohi olla tühikuid: 'my scan.pdf'",
+        );
+      });
+
+      it("discards a file it rejects by default", () => {
+        fixture.detectChanges();
+
+        selectFiles(fixture, [makeFile("ok.pdf"), makeFile("my scan.pdf")]);
+
+        expect(names()).toEqual(["ok.pdf"]);
+        expect(summary()).toBeDefined();
+      });
+
+      it("accepts a file when it returns nothing", () => {
+        for (const result of [null, undefined, ""]) {
+          fixture.componentRef.setInput("validator", () => result);
+          fixture.detectChanges();
+          selectFiles(fixture, [makeFile(`${String(result)}.pdf`)]);
+        }
+
+        expect(component.files().every((file) => file.isValid)).toBe(true);
+        expect(summary()).toBeUndefined();
+      });
+    });
+
+    it("forces the error state from the invalid input", () => {
+      fixture.componentRef.setInput("invalid", true);
+      fixture.detectChanges();
+
+      expect(fieldOf(fixture).classList).toContain(
+        "tedi-field-surface--invalid",
+      );
+    });
+  });
+
+  describe("feedback", () => {
+    it("shows the restrictions hint and describes the button by it", () => {
+      fixture.componentRef.setInput("accept", ".pdf,.txt");
+      fixture.componentRef.setInput("maxSize", 500 * 1024);
+      fixture.detectChanges();
+
+      const id = fileInput(fixture).id;
+
+      expect(text("tedi-feedback-text")).toBe(
+        "file-upload.accept .pdf, .txt. file-upload.max-size 500 KB",
+      );
+      expect(addButton(fixture).getAttribute("aria-describedby")).toBe(
+        `${id}-hint`,
+      );
+    });
+
+    it("shows the hint and the rejection error at the same time", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      const messages = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text"),
+      );
+      const id = fileInput(fixture).id;
+
+      expect(messages.length).toBe(2);
+      expect(messages[0].nativeElement.textContent).toContain(
+        "file-upload.extension-rejected",
+      );
+      expect(messages[1].nativeElement.textContent).toContain(
+        "file-upload.accept",
+      );
+      expect(addButton(fixture).getAttribute("aria-describedby")).toBe(
+        `${id}-error ${id}-hint`,
+      );
+    });
+
+    it("keeps errors when showRestrictions is off", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("showRestrictions", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      const messages = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text"),
+      );
+      expect(messages.length).toBe(1);
+      expect(messages[0].nativeElement.textContent).toContain(
+        "file-upload.extension-rejected",
+      );
+    });
+  });
+
+  describe("file list", () => {
+    it("renders a single file as plain text", () => {
+      fixture.componentRef.setInput("files", [{ id: "1", name: "report.pdf" }]);
+      fixture.detectChanges();
+
+      expect(text(".tedi-file-upload__name")).toBe("report.pdf");
+      expect(fixture.debugElement.query(By.css("tedi-tag"))).toBeNull();
+    });
+
+    it("renders several files as closable tags", () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      expect(fixture.debugElement.queryAll(By.css("tedi-tag")).length).toBe(2);
+      expect(tagRemoveButtons(fixture).length).toBe(2);
+    });
+
+    it("shows a loading file with a spinner and no remove button", () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf", isLoading: true },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.queryAll(By.css(".tedi-tag--loading")).length,
+      ).toBe(1);
+      expect(tagRemoveButtons(fixture).length).toBe(1);
+    });
+
+    it("removes a file through its tag, emits it, announces and refocuses the add button", async () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      const removed: string[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file.name ?? ""));
+
+      tagRemoveButtons(fixture)[0].click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(names()).toEqual(["b.pdf"]);
+      expect(removed).toEqual(["a.pdf"]);
+      // Removal announces synchronously — only the add path is delayed.
+      expect(announcer.announce).toHaveBeenLastCalledWith(
+        "file-upload.removed:a.pdf",
+        "polite",
+      );
+      expect(document.activeElement).toBe(addButton(fixture));
+    });
+
+    it("clears every file at once, emitting each", () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      const removed: string[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file.name ?? ""));
+
+      const clear = clearButton(fixture)!;
+      expect(clear.getAttribute("aria-label")).toBe("clear");
+
+      clear.click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(removed).toEqual(["a.pdf", "b.pdf"]);
+      expect(clearButton(fixture)).toBeNull();
+      expect(announcer.announce).toHaveBeenLastCalledWith(
+        "file-upload.cleared",
+        "polite",
+      );
+    });
+
+    it("hides the clear button when clearable is off or the field is disabled", () => {
+      fixture.componentRef.setInput("files", [{ id: "1", name: "a.pdf" }]);
+      fixture.componentRef.setInput("clearable", false);
+      fixture.detectChanges();
+      expect(clearButton(fixture)).toBeNull();
+
+      fixture.componentRef.setInput("clearable", true);
+      fixture.detectChanges();
+      expect(clearButton(fixture)).not.toBeNull();
+
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+      expect(clearButton(fixture)).toBeNull();
+    });
+
+    it("spells the clear button out below the md breakpoint", () => {
+      fixture.componentRef.setInput("files", [{ id: "1", name: "a.pdf" }]);
+      isBelowMd.set(true);
+      fixture.detectChanges();
+
+      const clear = clearButton(fixture)!;
+
+      expect(clear.classList).toContain("tedi-button");
+      expect(clear.textContent).toContain("clear");
+      expect(addButton(fixture).classList).toContain("tedi-button--default");
+    });
+
+    it("does not remove while disabled", () => {
+      fixture.componentRef.setInput("files", [{ id: "1", name: "a.pdf" }]);
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      component["removeFile"](component.files()[0]);
+      component.reset();
+
+      expect(component.files().length).toBe(1);
+    });
+
+    it("falls back to the default when clearable is reset to null", () => {
+      fixture.componentRef.setInput("files", [{ id: "1", name: "a.pdf" }]);
+      fixture.componentRef.setInput("clearable", false);
+      fixture.detectChanges();
+      expect(clearButton(fixture)).toBeNull();
+
+      fixture.componentRef.setInput("clearable", null);
+      fixture.detectChanges();
+
+      expect(clearButton(fixture)).not.toBeNull();
+    });
+
+    it("does nothing when reset with no files", () => {
+      const removed: FileUploadFile[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file));
+
+      component.reset();
+
+      expect(component.files()).toEqual([]);
+      expect(removed).toEqual([]);
+      expect(announcer.announce).not.toHaveBeenCalled();
+    });
+
+    it("announces the removal of a file that has no name", () => {
+      fixture.componentRef.setInput("files", [{ id: "1" }, { id: "2" }]);
+      fixture.detectChanges();
+
+      tagRemoveButtons(fixture)[0].click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([{ id: "2" }]);
+      expect(announcer.announce).toHaveBeenLastCalledWith(
+        "file-upload.removed:",
+        "polite",
+      );
+    });
+  });
+
+  describe("read-only", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("readOnly", true);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+    });
+
+    it("renders only the tags", () => {
+      expect(fixture.debugElement.queryAll(By.css("tedi-tag")).length).toBe(2);
+      expect(tagRemoveButtons(fixture).length).toBe(0);
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-upload__field")),
+      ).toBeNull();
+      expect(fileInput(fixture).disabled).toBe(true);
+      expect(
+        fixture.debugElement.query(By.css("tedi-feedback-text")),
+      ).toBeNull();
+    });
+
+    it("ignores reset", () => {
+      component.reset();
+
+      expect(component.files().length).toBe(2);
+    });
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileUploadComponent, ReactiveFormsModule],
+  template: `<tedi-file-upload
+    [formControl]="control"
+    accept=".pdf"
+    multiple
+    keepRejectedFiles
+  />`,
+})
+class ReactiveFormsHostComponent {
+  control = new FormControl<FileUploadFile[]>([]);
+}
+
+describe("FileUploadComponent with reactive forms", () => {
+  let fixture: ComponentFixture<ReactiveFormsHostComponent>;
+  let host: ReactiveFormsHostComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(ReactiveFormsHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("writes the control value into the list", () => {
+    host.control.setValue([{ id: "1", name: "preloaded.pdf" }]);
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.css(".tedi-file-upload__name"))
+        .nativeElement.textContent,
+    ).toContain("preloaded.pdf");
+  });
+
+  it("pushes picked files back to the control", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+
+    expect(host.control.value?.map((file) => file.name)).toEqual([
+      "report.pdf",
+    ]);
+  });
+
+  it("marks the control touched when the user moves on from the add button", () => {
+    jest.spyOn(document, "hasFocus").mockReturnValue(true);
+    expect(host.control.touched).toBe(false);
+
+    addButton(fixture).dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+    jest.restoreAllMocks();
+  });
+
+  it("stays untouched while the file dialog has focus", () => {
+    jest.spyOn(document, "hasFocus").mockReturnValue(false);
+
+    addButton(fixture).dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(false);
+    jest.restoreAllMocks();
+  });
+
+  it("marks the control touched when the file dialog is cancelled", () => {
+    fileInput(fixture).dispatchEvent(new Event("cancel"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+  });
+
+  it("marks the control touched once files are picked", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+
+    expect(host.control.touched).toBe(true);
+  });
+
+  it("empties the list when the control is reset", () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+    host.control.reset();
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.css(".tedi-file-upload__name")),
+    ).toBeNull();
+  });
+
+  it("fails the control while a rejected file is listed", () => {
+    host.control.setValue([
+      { id: "1", name: "ok.pdf" },
+      { id: "2", name: "bad.png", isValid: false },
+    ]);
+    fixture.detectChanges();
+
+    expect(host.control.invalid).toBe(true);
+    expect(host.control.errors?.["rejectedFiles"]).toEqual([
+      expect.objectContaining({ name: "bad.png" }),
+    ]);
+
+    host.control.setValue([{ id: "1", name: "ok.pdf" }]);
+    fixture.detectChanges();
+
+    expect(host.control.valid).toBe(true);
+  });
+
+  it("revalidates when the user removes the rejected file", () => {
+    selectFiles(fixture, [
+      makeFile("ok.pdf"),
+      makeFile("bad.txt", 100, "text/plain"),
+    ]);
+    expect(host.control.invalid).toBe(true);
+
+    tagRemoveButtons(fixture)[1].click();
+    fixture.detectChanges();
+
+    expect(host.control.invalid).toBe(false);
+    expect(host.control.value?.length).toBe(1);
+  });
+
+  it("disables the field from the control", () => {
+    host.control.disable();
+    fixture.detectChanges();
+
+    expect(addButton(fixture).disabled).toBe(true);
+    expect(fileInput(fixture).disabled).toBe(true);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileUploadComponent, FormsModule],
+  template: `<tedi-file-upload [(ngModel)]="files" name="attachments" />`,
+})
+class NgModelHostComponent {
+  files: FileUploadFile[] = [];
+}
+
+describe("FileUploadComponent with template-driven forms", () => {
+  let fixture: ComponentFixture<NgModelHostComponent>;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [NgModelHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(NgModelHostComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+  });
+
+  it("writes a picked file back to the bound model", async () => {
+    selectFiles(fixture, [makeFile("report.pdf")]);
+    await fixture.whenStable();
+
+    expect(fixture.componentInstance.files.map((f) => f.name)).toEqual([
+      "report.pdf",
+    ]);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [
+    FileUploadComponent,
+    FormFieldComponent,
+    FeedbackTextComponent,
+    LabelComponent,
+  ],
+  template: `
+    <tedi-form-field [size]="size" [clearable]="clearable">
+      <label tedi-label for="cv">Laadi fail üles</label>
+      <tedi-file-upload
+        inputId="cv"
+        aria-describedby="external-help"
+        [files]="files"
+      />
+      @if (feedback) {
+        <tedi-feedback-text id="cv-feedback" [text]="feedback" [type]="type" />
+      }
+    </tedi-form-field>
+  `,
+})
+class FormFieldHostComponent {
+  size: "default" | "small" = "default";
+  clearable = true;
+  files: FileUploadFile[] = [{ id: "1", name: "cv.pdf" }];
+  feedback = "";
+  type: "hint" | "error" | "valid" = "hint";
+}
+
+describe("FileUploadComponent inside tedi-form-field", () => {
+  let fixture: ComponentFixture<FormFieldHostComponent>;
+  let host: FormFieldHostComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FormFieldHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(FormFieldHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("names the add button by the field label and its own text", () => {
+    fixture.detectChanges();
+    const label = fixture.debugElement.query(By.css("label")).nativeElement;
+
+    expect(label.id).toBe("cv-label");
+    expect(addButton(fixture).getAttribute("aria-labelledby")).toBe(
+      "cv-label cv-add",
+    );
+  });
+
+  it("merges the host's aria-describedby with the field's feedback", () => {
+    host.feedback = "Vihje";
+    fixture.detectChanges();
+
+    expect(addButton(fixture).getAttribute("aria-describedby")).toBe(
+      "external-help cv-feedback",
+    );
+  });
+
+  it("takes its size from the field", () => {
+    host.size = "small";
+    fixture.detectChanges();
+
+    expect(
+      fixture.nativeElement.querySelector(".tedi-file-upload").classList,
+    ).toContain("tedi-file-upload--small");
+  });
+
+  it("takes error and valid states from the field's feedback", () => {
+    host.feedback = "Viga";
+    host.type = "error";
+    fixture.detectChanges();
+    expect(fieldOf(fixture).classList).toContain("tedi-field-surface--invalid");
+
+    host.type = "valid";
+    fixture.detectChanges();
+    expect(fieldOf(fixture).classList).toContain("tedi-field-surface--valid");
+  });
+
+  it("renders its own clear button, driven by the field's clearable", () => {
+    expect(
+      fixture.debugElement.query(By.css(".tedi-form-field__clear")),
+    ).toBeNull();
+    expect(clearButton(fixture)).not.toBeNull();
+
+    host.clearable = false;
+    fixture.detectChanges();
+
+    expect(clearButton(fixture)).toBeNull();
+  });
+
+  it("focuses the add button when the field's padding is clicked", () => {
+    const formField = fixture.debugElement.query(
+      By.directive(FormFieldComponent),
+    ).componentInstance as FormFieldComponent;
+
+    formField.control()?.focus?.();
+
+    expect(document.activeElement).toBe(addButton(fixture));
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileUploadComponent, FormFieldComponent, LabelComponent],
+  template: `
+    <tedi-form-field>
+      <label tedi-label for="docs">Failid</label>
+      <tedi-file-upload
+        inputId="docs"
+        multiple
+        [readOnly]="readOnly"
+        [files]="files"
+      />
+    </tedi-form-field>
+  `,
+})
+class ReadOnlyHostComponent {
+  readOnly = true;
+  files: FileUploadFile[] = [
+    { id: "1", name: "a.pdf" },
+    { id: "2", name: "b.pdf" },
+  ];
+}
+
+describe("FileUploadComponent read-only list", () => {
+  let fixture: ComponentFixture<ReadOnlyHostComponent>;
+
+  const list = () =>
+    fixture.debugElement.query(By.css(".tedi-file-upload__tags"))
+      .nativeElement as HTMLElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ReadOnlyHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(ReadOnlyHostComponent);
+    fixture.detectChanges();
+    fixture.detectChanges();
+  });
+
+  it("keeps the list role Safari drops from a bullet-less list", () => {
+    expect(list().getAttribute("role")).toBe("list");
+  });
+
+  it("keeps the label's target in the page", () => {
+    const label = fixture.debugElement.query(By.css("label"))
+      .nativeElement as HTMLLabelElement;
+
+    expect(label.control).toBe(fileInput(fixture));
+  });
+
+  it("names the list by the field label", () => {
+    const label = fixture.debugElement.query(By.css("label")).nativeElement;
+
+    expect(label.id).toBe("docs-label");
+    expect(list().getAttribute("aria-labelledby")).toBe("docs-label");
+  });
+
+  it("names a single file by the field label as a list of one", () => {
+    fixture.componentInstance.files = [{ id: "1", name: "a.pdf" }];
+    fixture.detectChanges();
+
+    expect(list().getAttribute("role")).toBe("list");
+    expect(list().getAttribute("aria-labelledby")).toBe("docs-label");
+    expect(list().querySelectorAll("li").length).toBe(1);
+    expect(
+      list().querySelector(".tedi-file-upload__name")?.textContent,
+    ).toContain("a.pdf");
+    expect(list().querySelector("tedi-tag")).toBeNull();
+  });
+
+  it("shows a single editable file as plain text, outside a list", () => {
+    fixture.componentInstance.files = [{ id: "1", name: "a.pdf" }];
+    fixture.componentInstance.readOnly = false;
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.css(".tedi-file-upload__tags")),
+    ).toBeNull();
+    expect(
+      fixture.debugElement.query(By.css(".tedi-file-upload__name")),
+    ).not.toBeNull();
+  });
+
+  it("leaves the list unnamed while the field is editable", () => {
+    fixture.componentInstance.readOnly = false;
+    fixture.detectChanges();
+    fixture.detectChanges();
+
+    expect(list().getAttribute("aria-labelledby")).toBeNull();
+    expect(addButton(fixture).getAttribute("aria-labelledby")).toBe(
+      "docs-label docs-add",
+    );
+  });
+});
diff --git a/src/tedi/components/form/file-upload/file-upload.component.ts b/src/tedi/components/form/file-upload/file-upload.component.ts
new file mode 100644
index 000000000..b17febd1c
--- /dev/null
+++ b/src/tedi/components/form/file-upload/file-upload.component.ts
@@ -0,0 +1,681 @@
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import {
+  afterNextRender,
+  afterRenderEffect,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  forwardRef,
+  inject,
+  Injector,
+  input,
+  model,
+  OnDestroy,
+  OnInit,
+  output,
+  signal,
+  viewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidationErrors,
+  Validator,
+} from "@angular/forms";
+import {
+  ToastAnnouncerService,
+  ToastPoliteness,
+} from "../../../services/toast/toast-announcer.service";
+import { TediTranslationService } from "../../../services/translation/translation.service";
+import { BreakpointService } from "../../../services/breakpoint/breakpoint.service";
+import { generateUUID } from "../../../helpers/generate-uuid";
+import { formatFileSize } from "../../../utils/file.util";
+import { IconComponent } from "../../base/icon/icon.component";
+import { ButtonComponent } from "../../buttons/button/button.component";
+import { ClosingButtonComponent } from "../../buttons/closing-button/closing-button.component";
+import { SeparatorComponent } from "../../helpers/separator/separator.component";
+import { TagComponent } from "../../tags/tag/tag.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+import {
+  FormFieldControl,
+  TEDI_FORM_FIELD_CONTROL,
+} from "../form-field/form-field-control";
+import { TEDI_FIELD_CONTEXT } from "../form-field/field-context.token";
+import { deriveControlState } from "../form-field/derive-control-state";
+import { controlDescribedBy } from "../form-field/control-described-by";
+import {
+  FileUploadFile,
+  FileUploadSize,
+  FileUploadValidator,
+} from "./file-upload.types";
+
+type FileRejectionReason = "extension" | "size";
+
+let fileUploadIdCounter = 0;
+
+/**
+ * Closing the file dialog leaves the screen reader busy, and a message inserted
+ * during it is dropped rather than queued — even an assertive one. Kept private
+ * so it stays out of the published API; the spec mirrors it.
+ */
+const ADD_ANNOUNCE_DELAY = 300;
+
+/**
+ * Identifies a file well enough to spot a repeat selection. Name alone is not
+ * enough — `IMG_0001.jpg` collides across devices — so size and mtime join it.
+ */
+const fileIdentity = (file: FileUploadFile): string =>
+  `${file.name}:${file.size}:${file.lastModified}`;
+
+@Component({
+  selector: "tedi-file-upload",
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    IconComponent,
+    ButtonComponent,
+    ClosingButtonComponent,
+    SeparatorComponent,
+    TagComponent,
+    FeedbackTextComponent,
+  ],
+  templateUrl: "./file-upload.component.html",
+  styleUrl: "./file-upload.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileUploadComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => FileUploadComponent),
+      multi: true,
+    },
+    {
+      provide: TEDI_FORM_FIELD_CONTROL,
+      useExisting: forwardRef(() => FileUploadComponent),
+    },
+  ],
+  host: {
+    class: "tedi-file-upload",
+    "[class.tedi-file-upload--small]": "resolvedSize() === 'small'",
+    "[class.tedi-file-upload--disabled]": "isDisabled()",
+    "[class.tedi-file-upload--read-only]": "readOnly()",
+    "[class.tedi-file-upload--empty]": "!files().length",
+  },
+})
+export class FileUploadComponent
+  implements
+    OnInit,
+    OnDestroy,
+    ControlValueAccessor,
+    Validator,
+    FormFieldControl<FileUploadFile[]>
+{
+  private readonly translations = inject(TediTranslationService);
+  private readonly announcer = inject(ToastAnnouncerService);
+  private readonly breakpointService = inject(BreakpointService);
+  private readonly injector = inject(Injector);
+  private readonly document = inject(DOCUMENT);
+  private readonly fieldContext = inject(TEDI_FIELD_CONTEXT, {
+    optional: true,
+  });
+  private readonly fileInput =
+    viewChild<ElementRef<HTMLInputElement>>("fileInput");
+  private readonly addButton = viewChild("addButton", { read: ElementRef });
+  private addAnnounceTimeout?: ReturnType<typeof setTimeout>;
+
+  /**
+   * Files held by the field, and the value written by `formControl` /
+   * `ngModel`. Bind it one-way to seed the list and leave the field owning it
+   * from there, or two-way to stay in sync with it. Every change emits on the
+   * `filesChange` output this `model()` generates.
+   *
+   * Bind a stable reference — a field or a signal. An inline literal
+   * (`[files]="[{ name: 'a.pdf' }]"`) is a new array on every check, so it is
+   * written back each time and discards whatever the user added.
+   */
+  readonly files = model<FileUploadFile[]>([]);
+  /**
+   * Id of the file input. Generated when not set. Bind the sibling
+   * `<label tedi-label [for]>` to the same value: clicking the label opens the
+   * file picker, and the label's text is prepended to the add button's
+   * accessible name so a screen reader hears which field the button belongs to.
+   */
+  readonly inputId = input<string>();
+  /**
+   * `name` attribute of the file input. The files do not travel with a native
+   * form submit: the input's value is cleared after each selection so the same
+   * file can be picked again. Read them from `files` or the bound control.
+   */
+  readonly name = input<string>();
+  /**
+   * Allowed file types as a comma-separated list of extensions and MIME types
+   * (`".pdf,.txt"`, `"image/png"`, `"image/*"`). Forwarded to the input's
+   * `accept` attribute and re-checked on selection.
+   *
+   * Applies to what is picked next. Files already listed keep the verdict they
+   * were given, so clear them yourself if you tighten this while they are
+   * listed.
+   */
+  readonly accept = input<string>();
+  /**
+   * Largest accepted file size, in bytes — the unit `File.size` is in. The
+   * restrictions hint renders it in whichever unit reads best, so a sub-megabyte
+   * limit still shows as e.g. `500 KB`.
+   *
+   * Applies to what is picked next. Files already listed keep the verdict they
+   * were given, so clear them yourself if you tighten this while they are
+   * listed.
+   */
+  readonly maxSize = input<number>();
+  /**
+   * A rule of your own for each selected file, run after `accept` and
+   * `maxSize` pass — a minimum size, a naming convention. Return the reason a
+   * file is rejected, or nothing to accept it. The reason joins the rejection
+   * summary under the field, followed by the names of the files it rejected.
+   *
+   * It is not summarised in the restrictions hint, so describe the rule in a
+   * projected `tedi-feedback-text`. Applies to what is picked next, like
+   * `accept`. For checks that need a server round trip, set `isLoading` and
+   * then `isValid` on the file yourself instead.
+   */
+  readonly validator = input<FileUploadValidator>();
+  /**
+   * Whether more than one file can be held at a time. A single-file field
+   * replaces its file on the next selection.
+   * @default false
+   */
+  readonly multiple = input(false, { transform: booleanAttribute });
+  /**
+   * Keeps rejected files in the list, marked invalid, so the user can see which
+   * of their files failed and remove it. Off, a rejected file is discarded.
+   * Either way every rejection is summarised in one message under the field.
+   * @default false
+   */
+  readonly keepRejectedFiles = input(false, { transform: booleanAttribute });
+  /**
+   * Whether the allowed types and maximum size are summarised in a hint below
+   * the field. Turn it off when the same information is shown elsewhere — a
+   * projected `tedi-feedback-text`, say — rejection errors still render.
+   * @default true
+   */
+  readonly showRestrictions = input(true, { transform: booleanAttribute });
+  /**
+   * Whether a clear button removes every file at once while any is listed.
+   * Falls back to the wrapping `tedi-form-field`'s `clearable` when not set
+   * here — set it on the wrapper, and use this only for a standalone field.
+   * @default true
+   */
+  readonly clearable = input<boolean | undefined, unknown>(undefined, {
+    // Unset stays `undefined` so the wrapper's `clearable` still applies.
+    transform: (v: unknown) => (v == null ? undefined : booleanAttribute(v)),
+  });
+  /**
+   * Renders only the file list: no border, no add or clear button, no remove
+   * button on the tags.
+   * @default false
+   */
+  readonly readOnly = input(false, { transform: booleanAttribute });
+  /**
+   * Disables the field from a parent template. Combined with the
+   * reactive-forms disabled state and any input-group state.
+   * @default false
+   */
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /**
+   * Marks the field as invalid. The error state is also derived from the bound
+   * control, from a wrapping `tedi-form-field`'s error feedback and from
+   * rejected files, so this only forces it on.
+   * @default false
+   */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  /**
+   * Size of the field. Falls back to the size of a wrapping `tedi-form-field`
+   * when not set here.
+   */
+  readonly size = input<FileUploadSize | undefined>();
+  /**
+   * Emits each file the user removed, one event per file when clearing.
+   * `filesChange` carries the new list; this says which entry left it, so an
+   * in-flight upload can be aborted without diffing the two.
+   */
+  readonly fileRemove = output<FileUploadFile>();
+
+  readonly value = this.files;
+  readonly ownsClearButton = true;
+
+  private readonly derived = deriveControlState();
+  private readonly formDisabled = signal(false);
+  private readonly fieldDescribedBy = signal<string[]>([]);
+  /**
+   * Set when a label points at `inputId`, so the add button, and the file list
+   * in read-only mode, can be named by it.
+   */
+  protected readonly labelId = signal<string | undefined>(undefined);
+  /**
+   * Summarises the rejections from the last selection. Describes files that
+   * may have been discarded rather than listed, so it cannot be derived from
+   * `files()` alone.
+   */
+  protected readonly rejectionError = signal<string | undefined>(undefined);
+  private readonly fallbackId = `tedi-file-upload-${fileUploadIdCounter++}`;
+
+  readonly touched = this.derived.touched;
+  readonly dirty = this.derived.dirty;
+
+  readonly isDisabled = computed(
+    () =>
+      this.disabled() ||
+      this.formDisabled() ||
+      (this.fieldContext?.disabled() ?? false),
+  );
+
+  readonly isInvalid = computed(
+    () =>
+      this.invalid() ||
+      !!this.rejectionError() ||
+      this.derived.invalid() ||
+      (this.fieldContext?.invalid() ?? false),
+  );
+
+  readonly isValid = computed(
+    () => !this.isInvalid() && (this.fieldContext?.valid() ?? false),
+  );
+
+  readonly resolvedSize = computed<FileUploadSize>(
+    () =>
+      this.size() ??
+      (this.fieldContext?.size() === "small" ? "small" : "default"),
+  );
+
+  readonly paintsSurface = computed(
+    () => !(this.fieldContext?.ownsSurface() ?? false),
+  );
+
+  protected readonly resolvedId = computed(
+    () => this.inputId() ?? this.fallbackId,
+  );
+
+  protected readonly addLabelId = computed(() => `${this.resolvedId()}-add`);
+
+  protected readonly addLabelledBy = computed(() => {
+    const labelId = this.labelId();
+    return labelId ? `${labelId} ${this.addLabelId()}` : null;
+  });
+
+  /**
+   * Below `md` the field stacks: files above, buttons in a full-width row with
+   * the clear button spelled out instead of an icon.
+   */
+  protected readonly isStacked = this.breakpointService.isBelowBreakpoint("md");
+
+  /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
+  readonly clearableResolved = computed(
+    () => this.clearable() ?? this.fieldContext?.clearable() ?? true,
+  );
+
+  protected readonly showClear = computed(
+    () =>
+      this.clearableResolved() && this.files().length > 0 && !this.isDisabled(),
+  );
+
+  protected readonly addLabel = this.translations.track("file-upload.add");
+  protected readonly clearLabel = this.translations.track("clear");
+  protected readonly failedLabel =
+    this.translations.track("file-upload.failed");
+
+  protected readonly isEditable = computed(
+    () => !this.isDisabled() && !this.readOnly(),
+  );
+
+  private readonly acceptTokens = computed(
+    () =>
+      this.accept()
+        ?.split(",")
+        .map((token) => token.trim().toLowerCase())
+        .filter(Boolean) ?? [],
+  );
+
+  /**
+   * Rendered alongside — not instead of — a rejection error, so an error never
+   * hides the restrictions the user has to satisfy.
+   */
+  protected readonly restrictionsHint = computed(() => {
+    if (!this.showRestrictions() || this.readOnly()) return undefined;
+
+    const accept = this.accept();
+    const maxSize = this.maxSize();
+    const parts = [
+      accept &&
+        `${this.translations.translate("file-upload.accept")} ${accept.replaceAll(",", ", ")}`,
+      maxSize &&
+        `${this.translations.translate("file-upload.max-size")} ${formatFileSize(maxSize)}`,
+    ].filter(Boolean);
+
+    return parts.join(". ") || undefined;
+  });
+
+  protected readonly feedbackIds = computed(() => {
+    const id = this.resolvedId();
+    return { error: `${id}-error`, hint: `${id}-hint` };
+  });
+
+  /**
+   * The ids are pushed through `controlDescribedBy` rather than bound directly,
+   * so a consumer's own `aria-describedby` on the host is merged in instead of
+   * being stranded on a wrapper the button never references.
+   */
+  readonly describedBy = controlDescribedBy();
+
+  private onChange: (files: FileUploadFile[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor() {
+    effect(() => {
+      const ids = this.feedbackIds();
+      this.describedBy.set(
+        [
+          ...this.fieldDescribedBy(),
+          this.rejectionError() ? ids.error : null,
+          this.restrictionsHint() ? ids.hint : null,
+        ].filter((id): id is string => !!id),
+      );
+    });
+
+    afterRenderEffect(() => {
+      const id = this.resolvedId();
+      const label = Array.from(this.document.querySelectorAll("label")).find(
+        (candidate) => candidate.htmlFor === id,
+      );
+      if (label) label.id ||= `${id}-label`;
+      this.labelId.set(label?.id);
+    });
+  }
+
+  ngOnInit(): void {
+    this.derived.connect();
+  }
+
+  ngOnDestroy(): void {
+    clearTimeout(this.addAnnounceTimeout);
+  }
+
+  writeValue(files: FileUploadFile[] | null): void {
+    this.files.set(files ?? []);
+  }
+
+  registerOnChange(fn: (files: FileUploadFile[]) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+
+  /**
+   * Fails the control while any rejected file is still listed. Without it a
+   * `Validators.required` control reports valid on a list of visibly broken
+   * files, since `keepRejectedFiles` — or a consumer marking a preloaded file
+   * `isValid: false` — keeps them in the value.
+   */
+  validate(control: AbstractControl): ValidationErrors | null {
+    const rejected = ((control.value ?? []) as FileUploadFile[]).filter(
+      (file) => file.isValid === false,
+    );
+
+    return rejected.length ? { rejectedFiles: rejected } : null;
+  }
+
+  setDescribedBy(ids: string[]): void {
+    this.fieldDescribedBy.set(ids);
+  }
+
+  focus(): void {
+    if (!this.isDisabled()) {
+      this.addButton()?.nativeElement.focus();
+    }
+  }
+
+  /**
+   * Removes every file. Also what `tedi-form-field`'s and this field's own
+   * clear button call.
+   */
+  reset(): void {
+    const removed = this.files();
+    if (!removed.length) return;
+
+    this.rejectionError.set(undefined);
+    this.removeFiles(
+      removed,
+      [],
+      this.translations.translate("file-upload.cleared"),
+    );
+  }
+
+  protected openPicker(): void {
+    if (!this.isDisabled()) {
+      this.fileInput()?.nativeElement.click();
+    }
+  }
+
+  protected handleSelection(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.addFiles(Array.from(input.files ?? []));
+    input.value = "";
+    this.onTouched();
+  }
+
+  /**
+   * Opening the file dialog takes focus from the page and blurs the add button
+   * while the user is still choosing. Counting that as leaving the field would
+   * show a `required` error behind the open dialog, so the control is marked
+   * touched when the dialog closes instead.
+   */
+  protected handleBlur(): void {
+    if (this.document.hasFocus()) {
+      this.onTouched();
+    }
+  }
+
+  protected handleDialogCancel(): void {
+    this.onTouched();
+  }
+
+  protected removeFile(file: FileUploadFile): void {
+    const remaining = this.files().filter((current) => current !== file);
+
+    if (!remaining.some((current) => current.isValid === false)) {
+      this.rejectionError.set(undefined);
+    }
+
+    this.removeFiles(
+      [file],
+      remaining,
+      this.translations.translate("file-upload.removed", file.name ?? ""),
+    );
+  }
+
+  /**
+   * Focus goes to the add button because the remove button the user just
+   * pressed leaves the DOM with its tag, and the add button is the one control
+   * that is always there.
+   */
+  private removeFiles(
+    removed: FileUploadFile[],
+    remaining: FileUploadFile[],
+    message: string,
+  ): void {
+    if (!this.isEditable()) return;
+
+    this.commit(remaining);
+    removed.forEach((file) => this.fileRemove.emit(file));
+    this.onTouched();
+    this.announce(message);
+    afterNextRender(() => this.addButton()?.nativeElement.focus(), {
+      injector: this.injector,
+    });
+  }
+
+  private addFiles(selected: File[]): void {
+    if (!selected.length) return;
+
+    const listed = new Set(this.files().map(fileIdentity));
+    const duplicates: File[] = [];
+    const fresh: File[] = [];
+    for (const file of selected) {
+      (listed.has(fileIdentity(file)) ? duplicates : fresh).push(file);
+    }
+
+    const rejectedNames: Record<FileRejectionReason, string[]> = {
+      extension: [],
+      size: [],
+    };
+    const customRejections = new Map<string, string[]>();
+    const candidates = fresh.map((file) => {
+      const reason = this.rejectionReason(file);
+      const message = reason
+        ? undefined
+        : this.validator()?.(file) || undefined;
+      const name = `'${file.name}'`;
+
+      if (reason) {
+        rejectedNames[reason].push(name);
+      } else if (message) {
+        customRejections.set(message, [
+          ...(customRejections.get(message) ?? []),
+          name,
+        ]);
+      }
+
+      return Object.assign(file, {
+        id: generateUUID(),
+        isLoading: false,
+        isValid: !reason && !message,
+      }) as FileUploadFile;
+    });
+
+    const kept = this.keepRejectedFiles()
+      ? candidates
+      : candidates.filter((file) => file.isValid);
+    const multiple = this.multiple();
+
+    if (kept.length) {
+      this.commit(multiple ? [...this.files(), ...kept] : [kept[0]]);
+    }
+
+    const messages: string[] = [];
+
+    const rejection =
+      [
+        ...Object.entries(rejectedNames)
+          .filter(([, names]) => names.length)
+          .map(([reason, names]) =>
+            this.translations.translate(
+              `file-upload.${reason}-rejected`,
+              names.join(", "),
+            ),
+          ),
+        ...Array.from(
+          customRejections,
+          ([message, names]) =>
+            `${message.replace(/[\s.]+$/, "")}: ${names.join(", ")}`,
+        ),
+      ].join(". ") || undefined;
+    this.rejectionError.set(rejection);
+    if (rejection) messages.push(rejection);
+
+    if (duplicates.length) {
+      messages.push(
+        this.translations.translate(
+          "file-upload.duplicates-skipped",
+          duplicates.map((file) => `'${file.name}'`).join(", "),
+        ),
+      );
+    }
+
+    const added = kept.filter((file) => file.isValid);
+
+    if (added.length) {
+      messages.push(
+        this.translations.translate(
+          "file-upload.added",
+          String(multiple ? added.length : 1),
+        ),
+      );
+    }
+
+    // Assertive and delayed, because the file dialog buries this twice over:
+    // closing it leaves the screen reader reading the add button for seconds,
+    // so a polite message never gets spoken, and an assertive one inserted too
+    // early is lost in the transition. Removal needs neither — no dialog is
+    // involved there.
+    clearTimeout(this.addAnnounceTimeout);
+    this.addAnnounceTimeout = setTimeout(
+      () => this.announce(messages.join(". "), "assertive"),
+      ADD_ANNOUNCE_DELAY,
+    );
+  }
+
+  private commit(files: FileUploadFile[]): void {
+    this.files.set(files);
+    this.onChange(files);
+  }
+
+  /**
+   * Mirrors how the browser reads the `accept` attribute: an extension, an
+   * exact MIME type, or a `type/*` group.
+   */
+  private isAcceptedType(file: File): boolean {
+    const tokens = this.acceptTokens();
+    if (!tokens.length) return true;
+
+    const extension = file.name.includes(".")
+      ? `.${file.name.split(".").pop()?.toLowerCase()}`
+      : "";
+    const mimeType = file.type.toLowerCase();
+
+    return tokens.some((token) => {
+      if (token.startsWith(".")) return token === extension;
+      if (token.endsWith("/*")) return mimeType.startsWith(token.slice(0, -1));
+
+      return token === mimeType;
+    });
+  }
+
+  private rejectionReason(file: File): FileRejectionReason | undefined {
+    const maxSize = this.maxSize();
+
+    if (!this.isAcceptedType(file)) return "extension";
+    if (maxSize && file.size > maxSize) return "size";
+
+    return undefined;
+  }
+
+  /**
+   * Announced from the root-level regions, not a node of this component's own.
+   * Adding files rebuilds the tags beside such a node — wholesale when
+   * `multiple` is off and the file is replaced — and a live region updated in
+   * the same breath as the subtree around it is dropped by screen readers.
+   *
+   * Every announcement supersedes a pending "added": letting that one fire
+   * afterwards would read the two in the wrong order.
+   */
+  private announce(text: string, politeness: ToastPoliteness = "polite"): void {
+    clearTimeout(this.addAnnounceTimeout);
+    this.announcer.announce(text, politeness);
+  }
+}
diff --git a/src/tedi/components/form/file-upload/file-upload.stories.ts b/src/tedi/components/form/file-upload/file-upload.stories.ts
new file mode 100644
index 000000000..71ae01e68
--- /dev/null
+++ b/src/tedi/components/form/file-upload/file-upload.stories.ts
@@ -0,0 +1,545 @@
+import { CommonModule } from "@angular/common";
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+  signal,
+} from "@angular/core";
+import { FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import {
+  argsToTemplate,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
+import { FileUploadComponent } from "./file-upload.component";
+import { FileUploadFile } from "./file-upload.types";
+import { FormFieldComponent } from "../form-field/form-field.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+import { LabelComponent } from "../../content/label/label.component";
+import { AlertComponent } from "../../notifications/alert/alert.component";
+import { ButtonComponent } from "../../buttons/button/button.component";
+import { ColComponent } from "../../helpers/grid/col/col.component";
+import { RowComponent } from "../../helpers/grid/row/row.component";
+import { TextComponent } from "../../base/text/text.component";
+
+const STATES = [
+  { label: "Default" },
+  { label: "Error", feedback: "error" as const },
+  { label: "Success", feedback: "valid" as const },
+  { label: "Disabled", disabled: true },
+];
+
+/**
+ * Selects a file by this name on load, so a story shows the rejection the field
+ * writes for itself. A hardcoded `tedi-feedback-text` would be a second, stale
+ * error line the moment the user selects anything.
+ */
+@Directive({ selector: "[storyRejectedFile]", standalone: true })
+class StoryRejectedFileDirective implements AfterViewInit {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly storyRejectedFile = input.required<string>();
+
+  ngAfterViewInit(): void {
+    const fileInput =
+      this.host.nativeElement.querySelector<HTMLInputElement>(
+        "input[type=file]",
+      );
+    if (!fileInput) return;
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([""], this.storyRejectedFile()));
+    fileInput.files = dataTransfer.files;
+    fileInput.dispatchEvent(new Event("change"));
+  }
+}
+
+const TAGS: FileUploadFile[] = [
+  { id: "1", name: "taotlus_scan_lk_1.pdf" },
+  { id: "2", name: "koolitused_erialane.zip" },
+  { id: "3", name: "diplom_2024.pdf" },
+  { id: "4", name: "diplom_ulikool_2020.pdf" },
+];
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.77.99?node-id=4612-87581&m=dev" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.tedi.ee/1ee8444b7/p/012bbe-file-upload" target="_blank">Zeroheight ↗</a>
+ */
+export default {
+  title: "TEDI-Ready/Components/Form/FileUpload",
+  component: FileUploadComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FormFieldComponent,
+        FeedbackTextComponent,
+        LabelComponent,
+        AlertComponent,
+        RowComponent,
+        ColComponent,
+        TextComponent,
+        ButtonComponent,
+        StoryRejectedFileDirective,
+      ],
+    }),
+  ],
+  argTypes: {
+    files: {
+      description:
+        "Files held by the field, and the value written by `formControl` / `ngModel`. Bind one-way to seed the list and leave the field owning it, two-way to stay in sync. Bind a stable reference — an inline literal is a new array on every check and discards what the user added.",
+      control: false,
+      table: {
+        category: "inputs",
+        type: { summary: "FileUploadFile[]" },
+        defaultValue: { summary: "[]" },
+      },
+    },
+    inputId: {
+      description:
+        "Id of the hidden file input, generated when not set; point the field's `<label tedi-label [for]>` at it so the label opens the picker and names the add button.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    name: {
+      description:
+        "`name` attribute of the file input. The files do not travel with a native form submit — read them from `files` or the bound control.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    accept: {
+      description:
+        "Allowed file types as a comma-separated list of extensions and MIME types. Applies to what is picked next — files already listed keep the verdict they were given.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    maxSize: {
+      description:
+        "Largest accepted file size, in bytes. The restrictions hint renders it in whichever unit reads best. Applies to what is picked next.",
+      control: "number",
+      table: { category: "inputs", type: { summary: "number" } },
+    },
+    multiple: {
+      description:
+        "Whether more than one file can be held. A single-file field replaces its file on the next selection.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    keepRejectedFiles: {
+      description:
+        "Keeps rejected files in the list, marked invalid, instead of discarding them. The rejection is summarised under the field either way.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    validator: {
+      description:
+        "A rule of your own for each selected file, run after `accept` and `maxSize` pass. Return the reason a file is rejected, or nothing to accept it.",
+      control: false,
+      table: {
+        category: "inputs",
+        type: {
+          summary: "FileUploadValidator",
+          detail: "(file: File) => string | null | undefined",
+        },
+      },
+    },
+    showRestrictions: {
+      description:
+        "Whether the allowed types and maximum size are summarised in a hint below the field. Rejection errors render either way.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    clearable: {
+      description:
+        "Whether a clear button removes every file at once. Overrides the wrapping `tedi-form-field`'s `clearable` for this field. Leave unset to inherit it — set `clearable` on the form field instead. Use it for a standalone file upload, where it defaults to `true`.",
+      control: { type: "boolean" },
+      table: {
+        category: "inputs",
+        type: { summary: "boolean | undefined" },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    readOnly: {
+      description:
+        "Renders only the file list: no border, no add or clear button, no remove button on the tags.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      description:
+        "Disables the field from a parent template. Combined with the reactive-forms disabled state.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    invalid: {
+      description:
+        "Forces the error state on. Combines with the state derived from reactive forms, the wrapping form field and rejected files.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      description:
+        "Overrides the wrapping `tedi-form-field`'s `size` for this field. Leave unset to inherit it — set `size` on the form field instead, so the label scales too. Use it for a standalone file upload, where it defaults to `default`.",
+      control: { type: "radio" },
+      options: [undefined, "default", "small"],
+      table: {
+        category: "inputs",
+        type: {
+          summary: "FileUploadSize | undefined",
+          detail: "default \nsmall",
+        },
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    fileRemove: {
+      description:
+        "Emits each file the user removed, one event per file when clearing. `filesChange` carries the new list.",
+      table: { category: "outputs", type: { summary: "FileUploadFile" } },
+    },
+    filesChange: {
+      description: "Emits the new list whenever files are added or removed.",
+      table: { category: "outputs", type: { summary: "FileUploadFile[]" } },
+    },
+  },
+  args: {
+    inputId: "file-upload",
+    name: "file",
+  },
+  parameters: { controls: { disable: true } },
+} as Meta<FileUploadComponent>;
+
+type Story = StoryObj<FileUploadComponent>;
+
+export const Default: Story = {
+  parameters: { controls: { disable: false } },
+  args: {
+    multiple: false,
+    keepRejectedFiles: false,
+    showRestrictions: true,
+    readOnly: false,
+    disabled: false,
+    invalid: false,
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <tedi-form-field>
+        <label tedi-label [for]="inputId">Label</label>
+        <tedi-file-upload ${argsToTemplate(args)} />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  render: () => ({
+    template: `
+      <tedi-row class="example-list" cols="1" gapY="3">
+        <tedi-row cols="1" [sm]="{ cols: 2 }" gap="3" alignItems="center" class="padding-14-16 border-bottom">
+          <p tedi-text modifiers="bold">Default</p>
+          <tedi-form-field>
+            <label tedi-label for="size-default">Label</label>
+            <tedi-file-upload inputId="size-default" name="file" />
+          </tedi-form-field>
+        </tedi-row>
+        <tedi-row cols="1" [sm]="{ cols: 2 }" gap="3" alignItems="center" class="padding-14-16">
+          <p tedi-text modifiers="bold">Small</p>
+          <tedi-form-field size="small">
+            <label tedi-label for="size-small">Label</label>
+            <tedi-file-upload inputId="size-small" name="file" />
+          </tedi-form-field>
+        </tedi-row>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const States: Story = {
+  render: () => ({
+    props: { STATES },
+    template: `
+      <tedi-row [cols]="1" [gapY]="3">
+        @for (state of STATES; track state.label) {
+          <tedi-row cols="1" [sm]="{ cols: 6 }" alignItems="center">
+            <tedi-col width="1">
+              <p tedi-text modifiers="bold">{{ state.label }}</p>
+            </tedi-col>
+            <tedi-col width="5">
+              <tedi-form-field>
+                <label tedi-label [for]="state.label">Label</label>
+                <tedi-file-upload [inputId]="state.label" name="file" [disabled]="!!state.disabled" />
+                @if (state.feedback) {
+                  <tedi-feedback-text text="Feedback text" [type]="state.feedback" />
+                }
+              </tedi-form-field>
+            </tedi-col>
+          </tedi-row>
+        }
+      </tedi-row>
+    `,
+  }),
+};
+
+export const SingleFile: Story = {
+  render: () => ({
+    props: { files: [{ id: "1", name: "taotlus_scan_lk_2.pdf" }] },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="single">Label</label>
+        <tedi-file-upload inputId="single" name="file" [files]="files" />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+export const Multiple: Story = {
+  render: () => ({
+    props: { files: TAGS },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="multiple">Label</label>
+        <tedi-file-upload inputId="multiple" name="file" multiple [files]="files" />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+/**
+ * `accept` and `maxSize` are summarised in a hint of their own. Turn
+ * `showRestrictions` off when a projected `tedi-feedback-text` already says it.
+ */
+export const WithHint: Story = {
+  render: () => ({
+    template: `
+      <tedi-row cols="1" [gapY]="3">
+        <tedi-col>
+          <tedi-form-field>
+            <label tedi-label for="hint-own">Label</label>
+            <tedi-file-upload inputId="hint-own" name="file" accept=".jpg,.png,.pdf" [maxSize]="1024 ** 2" />
+          </tedi-form-field>
+        </tedi-col>
+        <tedi-col>
+          <tedi-form-field>
+            <label tedi-label for="hint-projected">Label</label>
+            <tedi-file-upload inputId="hint-projected" name="file" accept=".jpg,.png,.pdf" [maxSize]="1024 ** 2" [showRestrictions]="false" />
+            <tedi-feedback-text text="JPG, PNG, PDF suurusega kuni 1 MB." />
+          </tedi-form-field>
+        </tedi-col>
+      </tedi-row>
+    `,
+  }),
+};
+
+export const ReadOnly: Story = {
+  render: () => ({
+    props: { files: TAGS },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="read-only">Label</label>
+        <tedi-file-upload inputId="read-only" name="file" multiple readOnly [files]="files" />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+export const Loading: Story = {
+  render: () => ({
+    props: {
+      files: [
+        { id: "1", name: "report.pdf", isLoading: true },
+        { id: "2", name: "report_1.pdf" },
+      ],
+    },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="loading">Label</label>
+        <tedi-file-upload inputId="loading" name="file" multiple [files]="files" />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+/**
+ * The default: a file that fails `accept`, `maxSize` or `validator` is
+ * discarded, and only the error under the field remains.
+ */
+export const DiscardingRejectedFiles: Story = {
+  name: "Validation: discarding rejected files",
+  render: () => ({
+    props: { files: [{ id: "1", name: "taotlus_scan_lk_2.pdf" }] },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="rejected-discarded">Label</label>
+        <tedi-file-upload inputId="rejected-discarded" name="file" multiple accept=".pdf,.txt" [maxSize]="1024" [files]="files" storyRejectedFile="taotlus_scan_lk_1.png" />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+/**
+ * With `keepRejectedFiles` a file that fails `accept`, `maxSize` or `validator`
+ * stays in the list marked invalid, so the user can see which file failed and
+ * remove it.
+ */
+export const KeepingRejectedFiles: Story = {
+  name: "Validation: keeping rejected files",
+  render: () => ({
+    props: { files: [{ id: "1", name: "taotlus_scan_lk_2.pdf" }] },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="rejected-kept">Label</label>
+        <tedi-file-upload inputId="rejected-kept" name="file" multiple accept=".pdf,.txt" [maxSize]="1024" keepRejectedFiles [files]="files" storyRejectedFile="taotlus_scan_lk_1.png" />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+/**
+ * The restrictions hint can't describe the rule, so add your own feedback text.
+ * Pick a file with a space in its name to try it.
+ */
+export const WithValidator: Story = {
+  render: () => ({
+    props: {
+      noSpaces: (file: File) =>
+        file.name.includes(" ") ? "Faili nimes ei tohi olla tühikuid" : null,
+    },
+    template: `
+      <tedi-form-field>
+        <label tedi-label for="validator">Label</label>
+        <tedi-file-upload inputId="validator" name="file" multiple accept=".pdf,.txt" [validator]="noSpaces" />
+        <tedi-feedback-text text="Faili nimes ei tohi olla tühikuid." />
+      </tedi-form-field>
+    `,
+  }),
+};
+
+/**
+ * Bind `files` two-way when the parent changes the list itself — after a
+ * successful upload, say. A one-way binding seeds the field once and never
+ * reaches it again.
+ */
+export const ControlledClearing: Story = {
+  parameters: { chromatic: { disableSnapshot: true } },
+  render: () => {
+    const files = signal<FileUploadFile[]>([
+      { id: "1", name: "report.pdf" },
+      { id: "2", name: "report_1.pdf" },
+      { id: "3", name: "report_2.pdf" },
+    ]);
+
+    return {
+      props: {
+        files,
+        clear: () => files.set([]),
+        names: () => files().map((file) => file.name),
+      },
+      template: `
+        <tedi-row [cols]="1" [gapY]="3">
+          <tedi-col>
+            <tedi-form-field>
+              <label tedi-label for="controlled">Label</label>
+              <tedi-file-upload inputId="controlled" name="file" multiple [(files)]="files" />
+            </tedi-form-field>
+          </tedi-col>
+          <tedi-col>
+            <button tedi-button type="button" (click)="clear()">Eemalda failid</button>
+          </tedi-col>
+          <tedi-col>
+            <tedi-alert type="info" [showClose]="false">
+              <pre tedi-text modifiers="small">{{ { files: names() } | json }}</pre>
+            </tedi-alert>
+          </tedi-col>
+        </tedi-row>
+      `,
+    };
+  },
+};
+
+/**
+ * The field validates itself: with `keepRejectedFiles`, rejected files stay in
+ * the value with `isValid: false` and the control fails with a `rejectedFiles`
+ * error while one is listed. Still filter on `isValid` before uploading.
+ */
+export const WithReactiveForms: Story = {
+  render: () => {
+    const control = new FormControl<FileUploadFile[]>([], {
+      nonNullable: true,
+      validators: [Validators.required],
+    });
+
+    return {
+      props: {
+        control,
+        invalidCount: () =>
+          control.value.filter((file) => file.isValid === false).length,
+      },
+      template: `
+        <tedi-row [cols]="1" [gapY]="3">
+          <tedi-col>
+            <tedi-form-field>
+              <label tedi-label for="reactive" [required]="true">Label</label>
+              <tedi-file-upload inputId="reactive" name="file" multiple accept=".pdf,.txt" [maxSize]="1024 ** 2" keepRejectedFiles [formControl]="control" />
+            </tedi-form-field>
+          </tedi-col>
+          <tedi-col>
+            <tedi-alert type="info" [showClose]="false">
+              <pre tedi-text modifiers="small">{{
+                {
+                  files: control.value.length,
+                  invalidFiles: invalidCount(),
+                  touched: control.touched,
+                  dirty: control.dirty,
+                  invalid: control.invalid
+                } | json
+              }}</pre>
+            </tedi-alert>
+          </tedi-col>
+        </tedi-row>
+      `,
+    };
+  },
+};
+
+/**
+ * The field paints its own surface and renders its own clear button and
+ * restrictions hint, so it works with no wrapper, and a sibling label still
+ * names the add button. Wrap it in a `tedi-form-field` for feedback text that
+ * sets the error or success border.
+ */
+export const Standalone: Story = {
+  render: () => ({
+    template: `
+      <label tedi-label for="standalone">Label</label>
+      <tedi-file-upload inputId="standalone" name="file" accept=".pdf" />
+    `,
+  }),
+};
diff --git a/src/tedi/components/form/file-upload/file-upload.types.ts b/src/tedi/components/form/file-upload/file-upload.types.ts
new file mode 100644
index 000000000..2e6269972
--- /dev/null
+++ b/src/tedi/components/form/file-upload/file-upload.types.ts
@@ -0,0 +1,31 @@
+/**
+ * A file held by the field. Real selections are `File` objects carrying the
+ * extra fields; a preloaded entry only needs a `name`.
+ */
+export interface FileUploadFile extends Partial<File> {
+  /**
+   * Stable identifier for the consumer's own bookkeeping. Generated for files
+   * the user selects.
+   */
+  id?: string;
+  /**
+   * Whether an upload is in flight for this file. Left to the consumer to set
+   * and clear — the field only selects files, it does not upload them. A
+   * loading file is shown with a spinner and cannot be removed.
+   */
+  isLoading?: boolean;
+  /**
+   * Whether the file passed the `accept`, `maxSize` and `validator` checks. A
+   * file marked `false` is shown as a danger tag while two or more files are
+   * listed; a single file shows only its name.
+   */
+  isValid?: boolean;
+}
+
+/**
+ * A rule of the consumer's own, checked for each selected file. Returns the
+ * reason the file is rejected, or nothing when it passes.
+ */
+export type FileUploadValidator = (file: File) => string | null | undefined;
+
+export type FileUploadSize = "default" | "small";
diff --git a/src/tedi/components/form/file-upload/index.ts b/src/tedi/components/form/file-upload/index.ts
new file mode 100644
index 000000000..3eea16f4f
--- /dev/null
+++ b/src/tedi/components/form/file-upload/index.ts
@@ -0,0 +1,2 @@
+export * from "./file-upload.component";
+export * from "./file-upload.types";
diff --git a/src/tedi/components/form/index.ts b/src/tedi/components/form/index.ts
index 557690f65..cd80e2006 100644
--- a/src/tedi/components/form/index.ts
+++ b/src/tedi/components/form/index.ts
@@ -9,6 +9,7 @@ export * from "./radio-card-group/radio-card-group.component";
 export * from "./date-field";
 export * from "./date-picker/date-picker.component";
 export * from "./feedback-text/feedback-text.component";
+export * from "./file-upload";
 export * from "./label-row";
 export * from "./number-field/number-field.component";
 export * from "./search";
diff --git a/src/tedi/components/form/text-field/text-field.stories.ts b/src/tedi/components/form/text-field/text-field.stories.ts
index 1dfba3880..5395e5774 100644
--- a/src/tedi/components/form/text-field/text-field.stories.ts
+++ b/src/tedi/components/form/text-field/text-field.stories.ts
@@ -170,7 +170,7 @@ export const Size: StoryObj<TextFieldComponent> = {
     template: `
       <tedi-row class="example-list" cols="1" gapY="3">
         <tedi-row cols="1" [sm]="{ cols: 3 }" gap="3" alignItems="center" class="padding-14-16 border-bottom">
-          <p tedi-text>Default</p>
+          <p tedi-text modifiers="bold">Default</p>
           <tedi-form-field>
             <label tedi-label [for]="'size-default'">Label</label>
             <input tedi-text-field id="size-default" />
@@ -181,7 +181,7 @@ export const Size: StoryObj<TextFieldComponent> = {
           </tedi-form-field>
         </tedi-row>
         <tedi-row cols="1" [sm]="{ cols: 3 }" gap="3" alignItems="center" class="padding-14-16">
-          <p tedi-text>Small</p>
+          <p tedi-text modifiers="bold">Small</p>
           <tedi-form-field size="small">
             <label tedi-label [for]="'size-small'">Label</label>
             <input tedi-text-field id="size-small" />
diff --git a/src/tedi/components/tags/tag/tag.component.scss b/src/tedi/components/tags/tag/tag.component.scss
index b2e03f50f..abcfd383c 100644
--- a/src/tedi/components/tags/tag/tag.component.scss
+++ b/src/tedi/components/tags/tag/tag.component.scss
@@ -34,8 +34,12 @@
     flex-shrink: 0;
   }
 
+  // Centred on the content's first padded line rather than the whole tag, so
+  // the icon stays beside the first line when a long label wraps.
   &__icon-wrapper {
-    line-height: var(--_line-height);
+    display: flex;
+    align-items: center;
+    height: calc(var(--_line-height) + 2 * var(--tag-default-padding-y));
   }
 
   &--ellipsis {
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index e2f64985a..09a42eb4d 100644
--- a/src/tedi/services/translation/translations.ts
+++ b/src/tedi/services/translation/translations.ts
@@ -290,6 +290,21 @@ export const translationsMap = {
     ru: (files: string, validTypes: string) =>
       `Файл(ы) ${files} имеют неправильное расширение. Разрешенные расширения: ${validTypes}`,
   },
+  "file-upload.failed": {
+    description:
+      "Appended, for assistive technology only, to the name of a file that failed validation",
+    components: ["FileUpload"],
+    et: "Faili üleslaadimine ebaõnnestus",
+    en: "File upload failed",
+    ru: "Загрузка файла не удалась",
+  },
+  "file-upload.cleared": {
+    description: "Announced to assistive technology when all files are removed",
+    components: ["FileUpload"],
+    et: "Kõik failid eemaldatud",
+    en: "All files removed",
+    ru: "Все файлы удалены",
+  },
   "file-dropzone.label": {
     description: "Default label for dropzone",
     components: ["FileDropzone"],
@@ -297,6 +312,28 @@ export const translationsMap = {
     en: "Drop files here, or click to browse",
     ru: "Перетащите файлы сюда или нажмите, чтобы выбрать",
   },
+  "file-upload.added": {
+    description: "Announced to assistive technology when files are added",
+    components: ["FileDropzone", "FileUpload"],
+    et: (count: string) => `Lisatud ${count} fail(i)`,
+    en: (count: string) => `${count} file(s) added`,
+    ru: (count: string) => `Добавлено файлов: ${count}`,
+  },
+  "file-upload.duplicates-skipped": {
+    description:
+      "Announced when files already in the list are skipped on a repeat selection",
+    components: ["FileDropzone", "FileUpload"],
+    et: (files: string) => `Fail(id) ${files} on juba lisatud`,
+    en: (files: string) => `File(s) ${files} have already been added`,
+    ru: (files: string) => `Файл(ы) ${files} уже добавлены`,
+  },
+  "file-upload.removed": {
+    description: "Announced to assistive technology when a file is removed",
+    components: ["FileDropzone", "FileUpload"],
+    et: (file: string) => `Fail ${file} eemaldatud`,
+    en: (file: string) => `File ${file} removed`,
+    ru: (file: string) => `Файл ${file} удален`,
+  },
   "file-dropzone.error": {
     description: "Error label for dropzone",
     components: ["FileDropzone"],
diff --git a/src/tedi/utils/file.util.ts b/src/tedi/utils/file.util.ts
new file mode 100644
index 000000000..e5e7f1767
--- /dev/null
+++ b/src/tedi/utils/file.util.ts
@@ -0,0 +1,18 @@
+const BYTES_IN_KB = 1024;
+
+const BYTES_IN_MB = BYTES_IN_KB ** 2;
+const BYTES_IN_GB = BYTES_IN_KB ** 3;
+
+const round = (value: number): string => value.toFixed(1).replace(/\.0$/, "");
+
+/**
+ * Formats a byte count as a human-readable size string (`"0.9 MB"`).
+ */
+export function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  if (bytes < BYTES_IN_KB) return `${bytes} B`;
+  if (bytes < BYTES_IN_MB) return `${round(bytes / BYTES_IN_KB)} KB`;
+  if (bytes < BYTES_IN_GB) return `${round(bytes / BYTES_IN_MB)} MB`;
+
+  return `${round(bytes / BYTES_IN_GB)} GB`;
+}
diff --git a/src/tedi/utils/index.ts b/src/tedi/utils/index.ts
index f4ad43c9c..0aa8eaf26 100644
--- a/src/tedi/utils/index.ts
+++ b/src/tedi/utils/index.ts
@@ -2,6 +2,7 @@ export * from "./cookies.util";
 export * from "./date.util";
 export * from "./deprecation.util";
 export * from "./elements.util";
+export * from "./file.util";
 export * from "./matchers.util";
 export * from "./tag-overflow.util";
 export * from "./time.util";

From 9a8beb4e4b2e3640def7e906469ab8866a7ec25f Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 7 Oct 2026 12:51:04 +0300
Subject: [PATCH 2/7] fix(file-upload): add CR fixes #752

---
 .../components/form/file-upload/file-upload.component.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/tedi/components/form/file-upload/file-upload.component.spec.ts b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
index abc9153b0..6d8870d6b 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.spec.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
@@ -741,6 +741,8 @@ describe("FileUploadComponent with reactive forms", () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => jest.restoreAllMocks());
+
   it("writes the control value into the list", () => {
     host.control.setValue([{ id: "1", name: "preloaded.pdf" }]);
     fixture.detectChanges();
@@ -767,7 +769,6 @@ describe("FileUploadComponent with reactive forms", () => {
     fixture.detectChanges();
 
     expect(host.control.touched).toBe(true);
-    jest.restoreAllMocks();
   });
 
   it("stays untouched while the file dialog has focus", () => {
@@ -777,7 +778,6 @@ describe("FileUploadComponent with reactive forms", () => {
     fixture.detectChanges();
 
     expect(host.control.touched).toBe(false);
-    jest.restoreAllMocks();
   });
 
   it("marks the control touched when the file dialog is cancelled", () => {

From d6c0940f782df007e981b3b86a075ce48dd3ecf5 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Wed, 7 Oct 2026 14:26:48 +0300
Subject: [PATCH 3/7] fix(file-upload): reword invalid file label and update
 consumer docs #752

---
 skills/tedi-angular/references/components.md  | 24 ++++++++++++++-----
 skills/tedi-angular/references/forms.md       |  2 +-
 src/tedi/services/translation/translations.ts |  8 +++----
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index feafb1d6f..096785580 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -204,15 +204,16 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
 ### File upload
 
 - **`tedi-file-upload`'s `inputId` names the hidden file input, but the add button is the control.**
-  Bind `<label tedi-label [for]>` to `inputId` inside a `tedi-form-field` as for any other control:
-  clicking the label opens the picker, and the field reads the label back through the input, gives it
-  an id if it has none, and names the add button by the label *and* its own text. Nothing else can
-  name the button, so a field without a label announces only "Add attachment".
+  Bind `<label tedi-label [for]>` to `inputId` as for any other control: clicking the label opens the
+  picker, and the field finds the label by its `for`, gives it an id if it has none, and names the add
+  button by the label *and* its own text. Nothing else can name the button, so a field without a label
+  announces only "Add attachment".
 - **`tedi-file-upload` has no separate "default" input and no feedback input.** `[files]` seeds the
   list, `[(files)]` keeps the parent in sync, `[formControl]` hands it to the form — bind a stable
   reference, an inline literal is written back on every check. Hints and errors are projected
-  `tedi-feedback-text` on the wrapping `tedi-form-field`; the field adds its own restrictions hint
-  (from `accept` / `maxSize`, off with `showRestrictions`) and a rejection summary below them.
+  `tedi-feedback-text` on the wrapping `tedi-form-field`, which links and reads only the first one, so
+  project one. The field adds its own restrictions hint (from `accept` / `maxSize`, off with
+  `showRestrictions`) and a rejection summary, rendered above the projected text.
 - **`tedi-file-upload` validates itself.** It registers on `NG_VALIDATORS`, so a bound control fails
   with a `rejectedFiles` error while any `isValid: false` file is listed. By default a file that
   fails `accept`, `maxSize` or `validator` is discarded and only the summary under the field remains;
@@ -230,6 +231,17 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   loses its remove button.
 - **Below `md` it stacks**: files above a full-width button row, and the clear button becomes a text
   button. There is no input for this.
+- **`readOnly` renders the files as a list named by the label**, even a single file, which is a list of
+  one. Keep the `<label tedi-label [for]>`: the hidden file input stays rendered, disabled, so the label
+  still has its target and clicking it opens nothing.
+- **The control turns touched when the file dialog closes**, by picking or cancelling, or when focus
+  leaves the add button within the page. Opening the dialog moves focus out of the page, and that blur
+  is ignored, so a `required` error does not appear behind the open dialog.
+- **It works without `tedi-form-field`**: it paints its own surface, clear button and restrictions
+  hint, and a sibling label still names the add button. You lose the success border and the error
+  state from a projected error text — set `invalid` yourself. Put your own hint's id in a static
+  `aria-describedby` on the component, but not one ending in `-hint` or `-error` after `inputId`:
+  the field uses `<inputId>-hint` and `<inputId>-error` for its own messages.
 
 ### Clear buttons
 
diff --git a/skills/tedi-angular/references/forms.md b/skills/tedi-angular/references/forms.md
index c2a47de23..c608b7452 100644
--- a/skills/tedi-angular/references/forms.md
+++ b/skills/tedi-angular/references/forms.md
@@ -59,7 +59,7 @@ form = new FormGroup({
 
 ## Form Field Structure
 
-Wrap a control with `tedi-form-field` to compose the label, control, and feedback text into one accessible field. `tedi-form-field` wires the feedback text to the control's `aria-describedby` for you. It does **not** associate the label: give the label a `for` and the control a matching `id` yourself.
+Wrap a control with `tedi-form-field` to compose the label, control, and feedback text into one accessible field. `tedi-form-field` wires the feedback text to the control's `aria-describedby` for you. An `aria-describedby` of your own on the control is merged in, but read only once, when the control is created: give it a static value, since a `[attr.aria-describedby]` binding is not picked up. It does **not** associate the label: give the label a `for` and the control a matching `id` yourself.
 
 `TextEditorComponent` is the exception to the `for`/`id` rule: its editing area is a `contenteditable` div, which `for` cannot target. Give the label an `id` and point the control's `ariaLabelledby` at it instead.
 
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index 09a42eb4d..524314776 100644
--- a/src/tedi/services/translation/translations.ts
+++ b/src/tedi/services/translation/translations.ts
@@ -292,11 +292,11 @@ export const translationsMap = {
   },
   "file-upload.failed": {
     description:
-      "Appended, for assistive technology only, to the name of a file that failed validation",
+      "Appended, for assistive technology only, to the name of a file marked invalid",
     components: ["FileUpload"],
-    et: "Faili üleslaadimine ebaõnnestus",
-    en: "File upload failed",
-    ru: "Загрузка файла не удалась",
+    et: "Vigane fail",
+    en: "Invalid file",
+    ru: "Недопустимый файл",
   },
   "file-upload.cleared": {
     description: "Announced to assistive technology when all files are removed",

From 2b9833ec8bc9e623b2d9299ed14a0bae92360595 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Thu, 8 Oct 2026 12:03:36 +0300
Subject: [PATCH 4/7] fix(file-upload): drop stale error when the form clears
 the field #752

---
 .../file-upload/file-upload.component.spec.ts | 44 ++++++++++++++++---
 .../form/file-upload/file-upload.component.ts | 19 ++++++--
 .../form/file-upload/file-upload.stories.ts   | 13 ++++--
 3 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/src/tedi/components/form/file-upload/file-upload.component.spec.ts b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
index 6d8870d6b..40d725abd 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.spec.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
@@ -381,9 +381,24 @@ describe("FileUploadComponent", () => {
       expect(summary()).toBeUndefined();
     });
 
+    it("clears the summary when the bound control is reset", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(summary()).toBeDefined();
+
+      // `reset()` covers the clear button; a form resetting the control comes
+      // through `writeValue` instead.
+      fixture.componentInstance.writeValue(null);
+      fixture.detectChanges();
+
+      expect(summary()).toBeUndefined();
+    });
+
     describe("with a validator", () => {
       const noSpaces = (file: File) =>
-        file.name.includes(" ") ? "Faili nimes ei tohi olla tühikuid." : null;
+        file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid." : null;
 
       beforeEach(() => {
         fixture.componentRef.setInput("multiple", true);
@@ -404,10 +419,10 @@ describe("FileUploadComponent", () => {
           fixture.debugElement.queryAll(By.css(".tedi-tag--danger")).length,
         ).toBe(1);
         expect(summary()).toBe(
-          "Faili nimes ei tohi olla tühikuid: 'my scan.pdf'",
+          "Failinimes ei tohi olla tühikuid: 'my scan.pdf'",
         );
         expect(await announced()).toBe(
-          "Faili nimes ei tohi olla tühikuid: 'my scan.pdf'. file-upload.added:1",
+          "Failinimes ei tohi olla tühikuid: 'my scan.pdf'. file-upload.added:1",
         );
       });
 
@@ -415,7 +430,7 @@ describe("FileUploadComponent", () => {
         selectFiles(fixture, [makeFile("a b.pdf"), makeFile("c d.pdf")]);
 
         expect(summary()).toBe(
-          "Faili nimes ei tohi olla tühikuid: 'a b.pdf', 'c d.pdf'",
+          "Failinimes ei tohi olla tühikuid: 'a b.pdf', 'c d.pdf'",
         );
       });
 
@@ -433,7 +448,7 @@ describe("FileUploadComponent", () => {
         expect(validator).toHaveBeenCalledTimes(1);
         expect(summary()).toBe(
           "file-upload.extension-rejected:'bad name.txt'. " +
-            "Faili nimes ei tohi olla tühikuid: 'my scan.pdf'",
+            "Failinimes ei tohi olla tühikuid: 'my scan.pdf'",
         );
       });
 
@@ -743,6 +758,25 @@ describe("FileUploadComponent with reactive forms", () => {
 
   afterEach(() => jest.restoreAllMocks());
 
+  it("clears the summary when the control is reset", () => {
+    selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+    fixture.detectChanges();
+
+    const summary = () =>
+      fixture.debugElement
+        .queryAll(By.css("tedi-feedback-text"))
+        .map((el) => (el.nativeElement as HTMLElement).textContent ?? "")
+        .find((listed) => listed.includes("rejected"));
+
+    expect(summary()).toBeDefined();
+
+    host.control.reset();
+    fixture.detectChanges();
+
+    expect(host.control.value).toBeNull();
+    expect(summary()).toBeUndefined();
+  });
+
   it("writes the control value into the list", () => {
     host.control.setValue([{ id: "1", name: "preloaded.pdf" }]);
     fixture.detectChanges();
diff --git a/src/tedi/components/form/file-upload/file-upload.component.ts b/src/tedi/components/form/file-upload/file-upload.component.ts
index b17febd1c..baea787b7 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.ts
@@ -411,7 +411,13 @@ export class FileUploadComponent
   }
 
   writeValue(files: FileUploadFile[] | null): void {
-    this.files.set(files ?? []);
+    const next = files ?? [];
+
+    this.files.set(next);
+    // `reset()` covers the clear button, but a form resetting the control comes
+    // through here instead — without this the summary and the error border
+    // outlive the files they describe.
+    this.clearRejectionWhenResolved(next);
   }
 
   registerOnChange(fn: (files: FileUploadFile[]) => void): void {
@@ -495,12 +501,17 @@ export class FileUploadComponent
     this.onTouched();
   }
 
+  /** Drops the summary once no invalid file is left for it to describe. */
+  private clearRejectionWhenResolved(files: FileUploadFile[]): void {
+    if (!files.some((file) => file.isValid === false)) {
+      this.rejectionError.set(undefined);
+    }
+  }
+
   protected removeFile(file: FileUploadFile): void {
     const remaining = this.files().filter((current) => current !== file);
 
-    if (!remaining.some((current) => current.isValid === false)) {
-      this.rejectionError.set(undefined);
-    }
+    this.clearRejectionWhenResolved(remaining);
 
     this.removeFiles(
       [file],
diff --git a/src/tedi/components/form/file-upload/file-upload.stories.ts b/src/tedi/components/form/file-upload/file-upload.stories.ts
index 71ae01e68..0443c4b6f 100644
--- a/src/tedi/components/form/file-upload/file-upload.stories.ts
+++ b/src/tedi/components/form/file-upload/file-upload.stories.ts
@@ -430,13 +430,13 @@ export const WithValidator: Story = {
   render: () => ({
     props: {
       noSpaces: (file: File) =>
-        file.name.includes(" ") ? "Faili nimes ei tohi olla tühikuid" : null,
+        file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid" : null,
     },
     template: `
       <tedi-form-field>
         <label tedi-label for="validator">Label</label>
         <tedi-file-upload inputId="validator" name="file" multiple accept=".pdf,.txt" [validator]="noSpaces" />
-        <tedi-feedback-text text="Faili nimes ei tohi olla tühikuid." />
+        <tedi-feedback-text text="Failinimes ei tohi olla tühikuid." />
       </tedi-form-field>
     `,
   }),
@@ -471,7 +471,7 @@ export const ControlledClearing: Story = {
             </tedi-form-field>
           </tedi-col>
           <tedi-col>
-            <button tedi-button type="button" (click)="clear()">Eemalda failid</button>
+            <button tedi-button type="button" (click)="clear()">Clear files</button>
           </tedi-col>
           <tedi-col>
             <tedi-alert type="info" [showClose]="false">
@@ -488,6 +488,9 @@ export const ControlledClearing: Story = {
  * The field validates itself: with `keepRejectedFiles`, rejected files stay in
  * the value with `isValid: false` and the control fails with a `rejectedFiles`
  * error while one is listed. Still filter on `isValid` before uploading.
+ *
+ * Resetting the control clears the field, the rejection summary and the error
+ * border, so the form can return the field to its starting state.
  */
 export const WithReactiveForms: Story = {
   render: () => {
@@ -499,6 +502,7 @@ export const WithReactiveForms: Story = {
     return {
       props: {
         control,
+        reset: () => control.reset(),
         invalidCount: () =>
           control.value.filter((file) => file.isValid === false).length,
       },
@@ -510,6 +514,9 @@ export const WithReactiveForms: Story = {
               <tedi-file-upload inputId="reactive" name="file" multiple accept=".pdf,.txt" [maxSize]="1024 ** 2" keepRejectedFiles [formControl]="control" />
             </tedi-form-field>
           </tedi-col>
+          <tedi-col>
+            <button tedi-button type="button" variant="secondary" (click)="reset()">Reset form</button>
+          </tedi-col>
           <tedi-col>
             <tedi-alert type="info" [showClose]="false">
               <pre tedi-text modifiers="small">{{

From 3702c26904260ea2f20da522e7755953ed051ddf Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 13 Oct 2026 16:50:08 +0300
Subject: [PATCH 5/7] feat(file-upload): add hint, error and success inputs
 #752

---
 skills/tedi-angular/references/components.md  |  27 +-
 .../file-upload/file-upload.component.html    |  20 +-
 .../file-upload/file-upload.component.spec.ts | 261 ++++++++++++++++-
 .../form/file-upload/file-upload.component.ts | 267 ++++++++++++------
 .../form/file-upload/file-upload.stories.ts   |  69 +++--
 src/tedi/services/translation/translations.ts |  53 +++-
 6 files changed, 556 insertions(+), 141 deletions(-)

diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 096785580..50f06231d 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -208,21 +208,24 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   picker, and the field finds the label by its `for`, gives it an id if it has none, and names the add
   button by the label *and* its own text. Nothing else can name the button, so a field without a label
   announces only "Add attachment".
-- **`tedi-file-upload` has no separate "default" input and no feedback input.** `[files]` seeds the
+- **`tedi-file-upload` has no separate "default" input, and owns its hint.** `[files]` seeds the
   list, `[(files)]` keeps the parent in sync, `[formControl]` hands it to the form — bind a stable
-  reference, an inline literal is written back on every check. Hints and errors are projected
-  `tedi-feedback-text` on the wrapping `tedi-form-field`, which links and reads only the first one, so
-  project one. The field adds its own restrictions hint (from `accept` / `maxSize`, off with
-  `showRestrictions`) and a rejection summary, rendered above the projected text.
+  reference, an inline literal is written back on every check. The field owns one hint: the allowed
+  types and size (from `accept` / `maxSize`, off with `showRestrictions`) followed by your `hint`
+  text. Put guidance there rather than projecting a `tedi-feedback-text` hint, which would make a
+  second one. It owns one validation message the same way, shown above the hint: pass an error of
+  your own, a server error say, through `error`, where it joins the field's rejection message, or a
+  confirmation through `success`, shown only while there is no error. A projected error or success
+  text would show below the hint as a second message.
 - **`tedi-file-upload` validates itself.** It registers on `NG_VALIDATORS`, so a bound control fails
   with a `rejectedFiles` error while any `isValid: false` file is listed. By default a file that
   fails `accept`, `maxSize` or `validator` is discarded and only the summary under the field remains;
   `keepRejectedFiles` keeps it in the list, marked invalid, instead. It shows as a danger tag only
   while two or more files are listed; a single file shows just its name. Filter on `isValid` before
   uploading either way.
-- **A `tedi-file-upload` `validator` adds a rule but no hint.** Its reason joins the rejection
-  summary after the built-in ones, and it only runs on files that already passed `accept` and
-  `maxSize`. The restrictions hint cannot describe it, so project a `tedi-feedback-text` that does.
+- **A `tedi-file-upload` `validator` adds a rule but no hint.** It runs on every selected file, and
+  every rule a file breaks is reported in the one rejection summary, built-in reasons first. The
+  automatic hint cannot describe it, so describe the rule in `hint`.
 - **`maxSize` is in bytes**, the unit `File.size` is in — not megabytes as in React. The hint renders
   it in whichever unit reads best.
 - **It selects files, it does not upload them.** `fileRemove` emits the single entry the user removed,
@@ -238,10 +241,10 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   leaves the add button within the page. Opening the dialog moves focus out of the page, and that blur
   is ignored, so a `required` error does not appear behind the open dialog.
 - **It works without `tedi-form-field`**: it paints its own surface, clear button and restrictions
-  hint, and a sibling label still names the add button. You lose the success border and the error
-  state from a projected error text — set `invalid` yourself. Put your own hint's id in a static
-  `aria-describedby` on the component, but not one ending in `-hint` or `-error` after `inputId`:
-  the field uses `<inputId>-hint` and `<inputId>-error` for its own messages.
+  hint, and a sibling label still names the add button. `error`, `success` and `hint` work the same
+  either way. For any other
+  describing element, put its id in a static `aria-describedby` on the component, but not one ending
+  in `-hint`, `-error` or `-success` after `inputId`: the field uses those ids for its own messages.
 
 ### Clear buttons
 
diff --git a/src/tedi/components/form/file-upload/file-upload.component.html b/src/tedi/components/form/file-upload/file-upload.component.html
index 389600ab3..9db9f5d51 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.html
+++ b/src/tedi/components/form/file-upload/file-upload.component.html
@@ -59,9 +59,9 @@
   <div
     class="tedi-file-upload__field"
     [class.tedi-field-surface]="paintsSurface()"
-    [class.tedi-field-surface--invalid]="paintsSurface() && isInvalid()"
-    [class.tedi-field-surface--valid]="paintsSurface() && isValid()"
-    [class.tedi-field-surface--disabled]="paintsSurface() && isDisabled()"
+    [class.tedi-field-surface--invalid]="paintsSurface() && invalid()"
+    [class.tedi-field-surface--valid]="paintsSurface() && valid()"
+    [class.tedi-field-surface--disabled]="paintsSurface() && disabled()"
   >
     <div class="tedi-file-upload__value">
       <ng-container [ngTemplateOutlet]="fileList" />
@@ -103,7 +103,7 @@
         variant="neutral"
         class="tedi-file-upload__add"
         [size]="isStacked() ? 'default' : 'small'"
-        [disabled]="isDisabled()"
+        [disabled]="disabled()"
         [attr.aria-labelledby]="addLabelledBy()"
         [attr.aria-describedby]="describedBy.attribute()"
         (click)="openPicker()"
@@ -115,15 +115,21 @@
     </div>
   </div>
 
-  @if (rejectionError(); as error) {
+  @if (errorText(); as error) {
     <tedi-feedback-text
       [id]="feedbackIds().error"
       [text]="error"
       type="error"
     />
+  } @else if (successText(); as success) {
+    <tedi-feedback-text
+      [id]="feedbackIds().success"
+      [text]="success"
+      type="valid"
+    />
   }
 
-  @if (restrictionsHint(); as hint) {
+  @if (hintText(); as hint) {
     <tedi-feedback-text [id]="feedbackIds().hint" [text]="hint" />
   }
 }
@@ -138,7 +144,7 @@
   [attr.name]="name()"
   [attr.accept]="accept()"
   [multiple]="multiple()"
-  [disabled]="isDisabled() || readOnly()"
+  [disabled]="disabled() || readOnly()"
   (change)="handleSelection($event)"
   (cancel)="handleDialogCancel()"
 />
diff --git a/src/tedi/components/form/file-upload/file-upload.component.spec.ts b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
index 40d725abd..997f6651a 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.spec.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
@@ -243,7 +243,7 @@ describe("FileUploadComponent", () => {
       // Announced together: separate calls would overwrite each other and only
       // the last would ever be read.
       expect(await announced()).toBe(
-        "file-upload.duplicates-skipped:'report.pdf'. file-upload.added:1",
+        "file-upload.duplicates-skipped:'report.pdf',1. file-upload.added:1",
       );
     });
 
@@ -293,12 +293,12 @@ describe("FileUploadComponent", () => {
         fixture.debugElement.queryAll(By.css(".tedi-tag--danger")).length,
       ).toBe(1);
       expect(text(".tedi-tag--danger .sr-only")).toBe("(file-upload.failed)");
-      expect(summary()).toBe("file-upload.extension-rejected:'bad.txt'");
+      expect(summary()).toBe("file-upload.extension-rejected:'bad.txt',1");
       expect(fieldOf(fixture).classList).toContain(
         "tedi-field-surface--invalid",
       );
       expect(await announced()).toBe(
-        "file-upload.extension-rejected:'bad.txt'. file-upload.added:1",
+        "file-upload.extension-rejected:'bad.txt',1. file-upload.added:1",
       );
     });
 
@@ -309,7 +309,7 @@ describe("FileUploadComponent", () => {
       selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
 
       expect(component.files()).toEqual([]);
-      expect(summary()).toBe("file-upload.extension-rejected:'notes.txt'");
+      expect(summary()).toBe("file-upload.extension-rejected:'notes.txt',1");
     });
 
     it("rejects a file over maxSize", () => {
@@ -319,17 +319,20 @@ describe("FileUploadComponent", () => {
       selectFiles(fixture, [makeFile("big.pdf", 2 * 1024 ** 2)]);
 
       expect(component.files()).toEqual([]);
-      expect(summary()).toBe("file-upload.size-rejected:'big.pdf'");
+      expect(summary()).toBe("file-upload.size-rejected:'big.pdf',1");
     });
 
-    it("names a file breaking both restrictions once, by its first reason", () => {
+    it("reports every restriction a file breaks", () => {
       fixture.componentRef.setInput("accept", ".pdf");
       fixture.componentRef.setInput("maxSize", 50);
       fixture.detectChanges();
 
       selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
 
-      expect(summary()).toBe("file-upload.extension-rejected:'notes.txt'");
+      expect(summary()).toBe(
+        "file-upload.extension-rejected:'notes.txt',1. " +
+          "file-upload.size-rejected:'notes.txt',1",
+      );
     });
 
     it("accepts a wildcard MIME group and an exact MIME type", () => {
@@ -396,6 +399,59 @@ describe("FileUploadComponent", () => {
       expect(summary()).toBeUndefined();
     });
 
+    describe("keeping rejected files", () => {
+      const png = (name: string) => makeFile(name, 100, "image/png");
+
+      beforeEach(() => {
+        fixture.componentRef.setInput("keepRejectedFiles", true);
+        fixture.componentRef.setInput("multiple", true);
+        fixture.componentRef.setInput("accept", ".pdf");
+        fixture.detectChanges();
+      });
+
+      it("names every rejected file still listed, across selections", () => {
+        selectFiles(fixture, [png("a.png")]);
+        selectFiles(fixture, [png("b.png")]);
+
+        expect(summary()).toBe(
+          "file-upload.extension-rejected:'a.png', 'b.png',2",
+        );
+
+        selectFiles(fixture, [makeFile("ok.pdf")]);
+
+        expect(summary()).toBe(
+          "file-upload.extension-rejected:'a.png', 'b.png',2",
+        );
+      });
+
+      it("drops a removed file from the summary", () => {
+        selectFiles(fixture, [png("a.png"), png("b.png")]);
+
+        tagRemoveButtons(fixture)[0].click();
+        fixture.detectChanges();
+
+        expect(summary()).toBe("file-upload.extension-rejected:'b.png',1");
+      });
+
+      it("announces only what the latest selection rejected", async () => {
+        selectFiles(fixture, [png("a.png")]);
+        selectFiles(fixture, [png("b.png")]);
+
+        expect(await announced()).toBe(
+          "file-upload.extension-rejected:'b.png',1",
+        );
+      });
+
+      it("clears the summary when every file is cleared", () => {
+        selectFiles(fixture, [png("a.png")]);
+
+        component.reset();
+        fixture.detectChanges();
+
+        expect(summary()).toBeUndefined();
+      });
+    });
+
     describe("with a validator", () => {
       const noSpaces = (file: File) =>
         file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid." : null;
@@ -434,7 +490,7 @@ describe("FileUploadComponent", () => {
         );
       });
 
-      it("lists the built-in reasons first and skips the validator for those files", () => {
+      it("checks every file and lists the built-in reasons first", () => {
         const validator = jest.fn(noSpaces);
         fixture.componentRef.setInput("validator", validator);
         fixture.componentRef.setInput("accept", ".pdf");
@@ -445,10 +501,10 @@ describe("FileUploadComponent", () => {
           makeFile("my scan.pdf"),
         ]);
 
-        expect(validator).toHaveBeenCalledTimes(1);
+        expect(validator).toHaveBeenCalledTimes(2);
         expect(summary()).toBe(
-          "file-upload.extension-rejected:'bad name.txt'. " +
-            "Failinimes ei tohi olla tühikuid: 'my scan.pdf'",
+          "file-upload.extension-rejected:'bad name.txt',1. " +
+            "Failinimes ei tohi olla tühikuid: 'bad name.txt', 'my scan.pdf'",
         );
       });
 
@@ -484,6 +540,123 @@ describe("FileUploadComponent", () => {
   });
 
   describe("feedback", () => {
+    describe("with a success message", () => {
+      const feedback = () =>
+        fixture.debugElement
+          .queryAll(By.css("tedi-feedback-text"))
+          .map((el) => el.nativeElement.textContent.trim());
+
+      it("shows it above the hint, paints the field valid and describes the button by it", () => {
+        fixture.componentRef.setInput("accept", ".pdf");
+        fixture.componentRef.setInput("success", "Fail vastab nõuetele");
+        fixture.detectChanges();
+
+        const id = fileInput(fixture).id;
+
+        expect(feedback()).toEqual([
+          "Fail vastab nõuetele",
+          "file-upload.accept .pdf",
+        ]);
+        expect(fieldOf(fixture).classList).toContain(
+          "tedi-field-surface--valid",
+        );
+        expect(addButton(fixture).getAttribute("aria-describedby")).toBe(
+          `${id}-success ${id}-hint`,
+        );
+      });
+
+      it("gives way to an error", () => {
+        fixture.componentRef.setInput("success", "Fail vastab nõuetele");
+        fixture.componentRef.setInput("error", "Serveri viga");
+        fixture.detectChanges();
+
+        expect(feedback()).toEqual(["Serveri viga"]);
+        expect(fieldOf(fixture).classList).not.toContain(
+          "tedi-field-surface--valid",
+        );
+      });
+
+      it("gives way to a rejection", () => {
+        fixture.componentRef.setInput("accept", ".pdf");
+        fixture.componentRef.setInput("showRestrictions", false);
+        fixture.componentRef.setInput("success", "Fail vastab nõuetele");
+        fixture.detectChanges();
+
+        selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+        expect(feedback()).toEqual([
+          "file-upload.extension-rejected:'notes.txt',1",
+        ]);
+      });
+    });
+
+    describe("with an error of its own", () => {
+      const feedback = () =>
+        fixture.debugElement
+          .queryAll(By.css("tedi-feedback-text"))
+          .map((el) => el.nativeElement.textContent.trim());
+
+      it("shows it, marks the field invalid and describes the button by it", () => {
+        fixture.componentRef.setInput("error", "Serveri viga");
+        fixture.detectChanges();
+
+        const id = fileInput(fixture).id;
+
+        expect(feedback()).toEqual(["Serveri viga"]);
+        expect(fieldOf(fixture).classList).toContain(
+          "tedi-field-surface--invalid",
+        );
+        expect(addButton(fixture).getAttribute("aria-describedby")).toBe(
+          `${id}-error`,
+        );
+      });
+
+      it("joins the rejection message in one error, above the hint", () => {
+        fixture.componentRef.setInput("accept", ".pdf");
+        fixture.componentRef.setInput("error", "Serveri viga");
+        fixture.detectChanges();
+
+        selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+        expect(feedback()).toEqual([
+          "file-upload.extension-rejected:'notes.txt',1. Serveri viga",
+          "file-upload.accept .pdf",
+        ]);
+      });
+
+      it("leaves a bound control's validity alone", () => {
+        fixture.componentRef.setInput("error", "Serveri viga");
+        fixture.detectChanges();
+
+        expect(component.validate({ value: [] } as never)).toBeNull();
+      });
+    });
+
+    it("adds its own hint after the restrictions, in one hint", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("hint", "Lisa kõik leheküljed.");
+      fixture.detectChanges();
+
+      const hints = fixture.debugElement.queryAll(By.css("tedi-feedback-text"));
+
+      expect(hints.length).toBe(1);
+      expect(hints[0].nativeElement.textContent.trim()).toBe(
+        "file-upload.accept .pdf. Lisa kõik leheküljed.",
+      );
+    });
+
+    it("shows its own hint alone when showRestrictions is off", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("showRestrictions", false);
+      fixture.componentRef.setInput("hint", "Lisa kõik leheküljed.");
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toBe("Lisa kõik leheküljed.");
+      expect(addButton(fixture).getAttribute("aria-describedby")).toBe(
+        `${fileInput(fixture).id}-hint`,
+      );
+    });
+
     it("shows the restrictions hint and describes the button by it", () => {
       fixture.componentRef.setInput("accept", ".pdf,.txt");
       fixture.componentRef.setInput("maxSize", 500 * 1024);
@@ -701,6 +874,7 @@ describe("FileUploadComponent", () => {
     beforeEach(() => {
       fixture.componentRef.setInput("readOnly", true);
       fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("hint", "Lisa kõik leheküljed.");
       fixture.componentRef.setInput("files", [
         { id: "1", name: "a.pdf" },
         { id: "2", name: "b.pdf" },
@@ -925,6 +1099,7 @@ describe("FileUploadComponent with template-driven forms", () => {
         inputId="cv"
         aria-describedby="external-help"
         [files]="files"
+        [error]="error"
       />
       @if (feedback) {
         <tedi-feedback-text id="cv-feedback" [text]="feedback" [type]="type" />
@@ -936,6 +1111,7 @@ class FormFieldHostComponent {
   size: "default" | "small" = "default";
   clearable = true;
   files: FileUploadFile[] = [{ id: "1", name: "cv.pdf" }];
+  error: string | undefined = undefined;
   feedback = "";
   type: "hint" | "error" | "valid" = "hint";
 }
@@ -1005,6 +1181,22 @@ describe("FileUploadComponent inside tedi-form-field", () => {
     expect(clearButton(fixture)).toBeNull();
   });
 
+  it("reports its own error and disabled state to the field", () => {
+    const formField = fixture.debugElement.query(
+      By.directive(FormFieldComponent),
+    ).componentInstance as FormFieldComponent;
+    const upload = fixture.debugElement.query(By.directive(FileUploadComponent))
+      .componentInstance as FileUploadComponent;
+
+    host.error = "Serveri viga";
+    fixture.detectChanges();
+    expect(formField.validationState()).toBe("invalid");
+
+    upload.setDisabledState(true);
+    fixture.detectChanges();
+    expect(formField.isDisabled()).toBe(true);
+  });
+
   it("focuses the add button when the field's padding is clicked", () => {
     const formField = fixture.debugElement.query(
       By.directive(FormFieldComponent),
@@ -1111,3 +1303,50 @@ describe("FileUploadComponent read-only list", () => {
     );
   });
 });
+
+describe("FileUploadComponent with the real Estonian texts", () => {
+  let fixture: ComponentFixture<FileUploadComponent>;
+
+  const error = () =>
+    fixture.debugElement
+      .query(By.css(".tedi-feedback-text--error"))
+      ?.nativeElement.textContent.trim();
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FileUploadComponent],
+      providers: [
+        { provide: ToastAnnouncerService, useValue: announcer },
+        { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+        { provide: BreakpointService, useValue: breakpointMock },
+      ],
+    });
+    fixture = TestBed.createComponent(FileUploadComponent);
+    fixture.componentRef.setInput("multiple", true);
+    fixture.componentRef.setInput("accept", ".pdf");
+    fixture.componentRef.setInput("maxSize", 50);
+    fixture.detectChanges();
+  });
+
+  it("uses the singular for one file", async () => {
+    selectFiles(fixture, [makeFile("suur.pdf", 500)]);
+
+    expect(error()).toBe("Fail 'suur.pdf' on liiga suur");
+    expect(await announced()).toBe("Fail 'suur.pdf' on liiga suur");
+  });
+
+  it("uses the plural for several files", () => {
+    selectFiles(fixture, [
+      makeFile("a.png", 10, "image/png"),
+      makeFile("b.png", 10, "image/png"),
+    ]);
+
+    expect(error()).toBe("Failid 'a.png', 'b.png' on vale laiendiga");
+  });
+
+  it("counts added files", async () => {
+    selectFiles(fixture, [makeFile("a.pdf", 10), makeFile("b.pdf", 10)]);
+
+    expect(await announced()).toBe("Lisatud 2 faili");
+  });
+});
diff --git a/src/tedi/components/form/file-upload/file-upload.component.ts b/src/tedi/components/form/file-upload/file-upload.component.ts
index baea787b7..11cfb60cd 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.ts
@@ -57,6 +57,12 @@ import {
 
 type FileRejectionReason = "extension" | "size";
 
+interface FileRejection {
+  name: string;
+  reasons: FileRejectionReason[];
+  message?: string;
+}
+
 let fileUploadIdCounter = 0;
 
 /**
@@ -108,7 +114,7 @@ const fileIdentity = (file: FileUploadFile): string =>
   host: {
     class: "tedi-file-upload",
     "[class.tedi-file-upload--small]": "resolvedSize() === 'small'",
-    "[class.tedi-file-upload--disabled]": "isDisabled()",
+    "[class.tedi-file-upload--disabled]": "disabled()",
     "[class.tedi-file-upload--read-only]": "readOnly()",
     "[class.tedi-file-upload--empty]": "!files().length",
   },
@@ -179,15 +185,18 @@ export class FileUploadComponent
    */
   readonly maxSize = input<number>();
   /**
-   * A rule of your own for each selected file, run after `accept` and
-   * `maxSize` pass — a minimum size, a naming convention. Return the reason a
-   * file is rejected, or nothing to accept it. The reason joins the rejection
-   * summary under the field, followed by the names of the files it rejected.
+   * A rule of your own for each selected file, checked alongside `accept` and
+   * `maxSize` — a minimum size, a naming convention. Return the reason a file
+   * is rejected, or nothing to accept it. The reason joins the rejection
+   * summary under the field after the built-in ones, followed by the names of
+   * the files it rejected. It runs on every selected file, including ones
+   * `accept` or `maxSize` rejected, so it may receive a file of the wrong type
+   * or size.
    *
-   * It is not summarised in the restrictions hint, so describe the rule in a
-   * projected `tedi-feedback-text`. Applies to what is picked next, like
-   * `accept`. For checks that need a server round trip, set `isLoading` and
-   * then `isValid` on the file yourself instead.
+   * The automatic hint cannot describe it, so describe the rule in `hint`.
+   * Applies to what is picked next, like `accept`. For checks that need a
+   * server round trip, set `isLoading` and then `isValid` on the file yourself
+   * instead.
    */
   readonly validator = input<FileUploadValidator>();
   /**
@@ -198,18 +207,39 @@ export class FileUploadComponent
   readonly multiple = input(false, { transform: booleanAttribute });
   /**
    * Keeps rejected files in the list, marked invalid, so the user can see which
-   * of their files failed and remove it. Off, a rejected file is discarded.
-   * Either way every rejection is summarised in one message under the field.
+   * of their files failed and remove it; the message under the field then names
+   * every rejected file still listed. Off, a rejected file is discarded and the
+   * message describes the latest selection.
    * @default false
    */
   readonly keepRejectedFiles = input(false, { transform: booleanAttribute });
   /**
-   * Whether the allowed types and maximum size are summarised in a hint below
-   * the field. Turn it off when the same information is shown elsewhere — a
-   * projected `tedi-feedback-text`, say — rejection errors still render.
+   * Whether the allowed types and maximum size are summarised in the hint below
+   * the field. Turn it off when the same information is shown elsewhere; `hint`
+   * and rejection errors still render.
    * @default true
    */
   readonly showRestrictions = input(true, { transform: booleanAttribute });
+  /**
+   * Guidance of your own, such as what a `validator` checks, shown after the
+   * allowed types and maximum size in the field's hint. Use it instead of
+   * projecting a `tedi-feedback-text` hint, which would make a second one.
+   */
+  readonly hint = input<string>();
+  /**
+   * An error of your own, such as one the server returned for an uploaded file.
+   * Shown in the field's error text after its own rejection message, above the
+   * hint, and marks the field invalid. It does not change a bound control's
+   * validity. Use it instead of projecting an error `tedi-feedback-text`, which
+   * would show below the hint as a second error.
+   */
+  readonly error = input<string>();
+  /**
+   * A success message, shown in the error's place above the hint and painting
+   * the field's border green. Shown only while the field has no error: an error
+   * means the user still has something to fix.
+   */
+  readonly success = input<string>();
   /**
    * Whether a clear button removes every file at once while any is listed.
    * Falls back to the wrapping `tedi-form-field`'s `clearable` when not set
@@ -231,14 +261,22 @@ export class FileUploadComponent
    * reactive-forms disabled state and any input-group state.
    * @default false
    */
-  readonly disabled = input(false, { transform: booleanAttribute });
+  readonly disabledInput = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "disabled",
+    transform: booleanAttribute,
+  });
   /**
    * Marks the field as invalid. The error state is also derived from the bound
    * control, from a wrapping `tedi-form-field`'s error feedback and from
    * rejected files, so this only forces it on.
    * @default false
    */
-  readonly invalid = input(false, { transform: booleanAttribute });
+  readonly invalidInput = input(false, {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    alias: "invalid",
+    transform: booleanAttribute,
+  });
   /**
    * Size of the field. Falls back to the size of a wrapping `tedi-form-field`
    * when not set here.
@@ -263,33 +301,57 @@ export class FileUploadComponent
    */
   protected readonly labelId = signal<string | undefined>(undefined);
   /**
-   * Summarises the rejections from the last selection. Describes files that
-   * may have been discarded rather than listed, so it cannot be derived from
-   * `files()` alone.
+   * Summarises the rejections from the last selection. Discarded files are no
+   * longer listed, so this is the only record of why they were refused.
    */
-  protected readonly rejectionError = signal<string | undefined>(undefined);
+  private readonly selectionError = signal<string | undefined>(undefined);
+  /** Why each rejected file was refused, kept for as long as it is listed. */
+  private readonly fileRejections = new WeakMap<
+    FileUploadFile,
+    FileRejection
+  >();
+
+  /**
+   * Kept rejected files are described from the list itself, so the summary
+   * names exactly the rejected files on screen through every later selection,
+   * removal or reset.
+   */
+  protected readonly rejectionError = computed(() => {
+    if (!this.keepRejectedFiles()) return this.selectionError();
+
+    return this.rejectionSummary(
+      this.files().flatMap((file) => this.fileRejections.get(file) ?? []),
+    );
+  });
   private readonly fallbackId = `tedi-file-upload-${fileUploadIdCounter++}`;
 
   readonly touched = this.derived.touched;
   readonly dirty = this.derived.dirty;
 
-  readonly isDisabled = computed(
+  /**
+   * The field's combined state, under the names `tedi-form-field` reads from
+   * its control, so the wrapper sees rejections, `error` and a form-disabled
+   * control too.
+   */
+  readonly disabled = computed(
     () =>
-      this.disabled() ||
+      this.disabledInput() ||
       this.formDisabled() ||
       (this.fieldContext?.disabled() ?? false),
   );
 
-  readonly isInvalid = computed(
+  readonly invalid = computed(
     () =>
-      this.invalid() ||
-      !!this.rejectionError() ||
+      this.invalidInput() ||
+      !!this.errorText() ||
       this.derived.invalid() ||
       (this.fieldContext?.invalid() ?? false),
   );
 
-  readonly isValid = computed(
-    () => !this.isInvalid() && (this.fieldContext?.valid() ?? false),
+  readonly valid = computed(
+    () =>
+      !this.invalid() &&
+      (!!this.success() || (this.fieldContext?.valid() ?? false)),
   );
 
   readonly resolvedSize = computed<FileUploadSize>(
@@ -326,7 +388,7 @@ export class FileUploadComponent
 
   protected readonly showClear = computed(
     () =>
-      this.clearableResolved() && this.files().length > 0 && !this.isDisabled(),
+      this.clearableResolved() && this.files().length > 0 && !this.disabled(),
   );
 
   protected readonly addLabel = this.translations.track("file-upload.add");
@@ -335,7 +397,7 @@ export class FileUploadComponent
     this.translations.track("file-upload.failed");
 
   protected readonly isEditable = computed(
-    () => !this.isDisabled() && !this.readOnly(),
+    () => !this.disabled() && !this.readOnly(),
   );
 
   private readonly acceptTokens = computed(
@@ -350,24 +412,40 @@ export class FileUploadComponent
    * Rendered alongside — not instead of — a rejection error, so an error never
    * hides the restrictions the user has to satisfy.
    */
-  protected readonly restrictionsHint = computed(() => {
-    if (!this.showRestrictions() || this.readOnly()) return undefined;
+  protected readonly hintText = computed(() => {
+    if (this.readOnly()) return undefined;
 
-    const accept = this.accept();
-    const maxSize = this.maxSize();
+    const accept = this.showRestrictions() && this.accept();
+    const maxSize = this.showRestrictions() && this.maxSize();
     const parts = [
       accept &&
         `${this.translations.translate("file-upload.accept")} ${accept.replaceAll(",", ", ")}`,
       maxSize &&
         `${this.translations.translate("file-upload.max-size")} ${formatFileSize(maxSize)}`,
+      this.hint(),
     ].filter(Boolean);
 
     return parts.join(". ") || undefined;
   });
 
+  /** The field shows at most one error, so both sources share one text. */
+  protected readonly errorText = computed(
+    () =>
+      [this.rejectionError(), this.error()].filter(Boolean).join(". ") ||
+      undefined,
+  );
+
+  protected readonly successText = computed(() =>
+    this.errorText() ? undefined : this.success(),
+  );
+
   protected readonly feedbackIds = computed(() => {
     const id = this.resolvedId();
-    return { error: `${id}-error`, hint: `${id}-hint` };
+    return {
+      error: `${id}-error`,
+      success: `${id}-success`,
+      hint: `${id}-hint`,
+    };
   });
 
   /**
@@ -386,8 +464,9 @@ export class FileUploadComponent
       this.describedBy.set(
         [
           ...this.fieldDescribedBy(),
-          this.rejectionError() ? ids.error : null,
-          this.restrictionsHint() ? ids.hint : null,
+          this.errorText() ? ids.error : null,
+          this.successText() ? ids.success : null,
+          this.hintText() ? ids.hint : null,
         ].filter((id): id is string => !!id),
       );
     });
@@ -451,7 +530,7 @@ export class FileUploadComponent
   }
 
   focus(): void {
-    if (!this.isDisabled()) {
+    if (!this.disabled()) {
       this.addButton()?.nativeElement.focus();
     }
   }
@@ -464,7 +543,7 @@ export class FileUploadComponent
     const removed = this.files();
     if (!removed.length) return;
 
-    this.rejectionError.set(undefined);
+    this.selectionError.set(undefined);
     this.removeFiles(
       removed,
       [],
@@ -473,7 +552,7 @@ export class FileUploadComponent
   }
 
   protected openPicker(): void {
-    if (!this.isDisabled()) {
+    if (!this.disabled()) {
       this.fileInput()?.nativeElement.click();
     }
   }
@@ -504,7 +583,7 @@ export class FileUploadComponent
   /** Drops the summary once no invalid file is left for it to describe. */
   private clearRejectionWhenResolved(files: FileUploadFile[]): void {
     if (!files.some((file) => file.isValid === false)) {
-      this.rejectionError.set(undefined);
+      this.selectionError.set(undefined);
     }
   }
 
@@ -551,32 +630,28 @@ export class FileUploadComponent
       (listed.has(fileIdentity(file)) ? duplicates : fresh).push(file);
     }
 
-    const rejectedNames: Record<FileRejectionReason, string[]> = {
-      extension: [],
-      size: [],
-    };
-    const customRejections = new Map<string, string[]>();
+    // Every rule a file breaks is reported, not just the first: fixing one
+    // reason only to be rejected for the next sends the user round twice.
+    const rejections: FileRejection[] = [];
     const candidates = fresh.map((file) => {
-      const reason = this.rejectionReason(file);
-      const message = reason
-        ? undefined
-        : this.validator()?.(file) || undefined;
-      const name = `'${file.name}'`;
-
-      if (reason) {
-        rejectedNames[reason].push(name);
-      } else if (message) {
-        customRejections.set(message, [
-          ...(customRejections.get(message) ?? []),
-          name,
-        ]);
-      }
-
-      return Object.assign(file, {
+      const rejection: FileRejection = {
+        name: file.name,
+        reasons: this.rejectionReasons(file),
+        message: this.validator()?.(file) || undefined,
+      };
+      const isValid = !rejection.reasons.length && !rejection.message;
+      const candidate = Object.assign(file, {
         id: generateUUID(),
         isLoading: false,
-        isValid: !reason && !message,
+        isValid,
       }) as FileUploadFile;
+
+      if (!isValid) {
+        rejections.push(rejection);
+        this.fileRejections.set(candidate, rejection);
+      }
+
+      return candidate;
     });
 
     const kept = this.keepRejectedFiles()
@@ -590,23 +665,9 @@ export class FileUploadComponent
 
     const messages: string[] = [];
 
-    const rejection =
-      [
-        ...Object.entries(rejectedNames)
-          .filter(([, names]) => names.length)
-          .map(([reason, names]) =>
-            this.translations.translate(
-              `file-upload.${reason}-rejected`,
-              names.join(", "),
-            ),
-          ),
-        ...Array.from(
-          customRejections,
-          ([message, names]) =>
-            `${message.replace(/[\s.]+$/, "")}: ${names.join(", ")}`,
-        ),
-      ].join(". ") || undefined;
-    this.rejectionError.set(rejection);
+    // Announced: only what this selection rejected, not every kept file again.
+    const rejection = this.rejectionSummary(rejections);
+    this.selectionError.set(rejection);
     if (rejection) messages.push(rejection);
 
     if (duplicates.length) {
@@ -614,6 +675,7 @@ export class FileUploadComponent
         this.translations.translate(
           "file-upload.duplicates-skipped",
           duplicates.map((file) => `'${file.name}'`).join(", "),
+          String(duplicates.length),
         ),
       );
     }
@@ -641,6 +703,44 @@ export class FileUploadComponent
     );
   }
 
+  /**
+   * One message for every rejection: built-in reasons first, grouped by
+   * reason, then each validator message followed by the files it refused.
+   */
+  private rejectionSummary(rejections: FileRejection[]): string | undefined {
+    const builtIn: Record<FileRejectionReason, string[]> = {
+      extension: [],
+      size: [],
+    };
+    const custom = new Map<string, string[]>();
+
+    for (const { name, reasons, message } of rejections) {
+      const quoted = `'${name}'`;
+      reasons.forEach((reason) => builtIn[reason].push(quoted));
+      if (message)
+        custom.set(message, [...(custom.get(message) ?? []), quoted]);
+    }
+
+    return (
+      [
+        ...Object.entries(builtIn)
+          .filter(([, names]) => names.length)
+          .map(([reason, names]) =>
+            this.translations.translate(
+              `file-upload.${reason}-rejected`,
+              names.join(", "),
+              String(names.length),
+            ),
+          ),
+        ...Array.from(
+          custom,
+          ([message, names]) =>
+            `${message.replace(/[\s.]+$/, "")}: ${names.join(", ")}`,
+        ),
+      ].join(". ") || undefined
+    );
+  }
+
   private commit(files: FileUploadFile[]): void {
     this.files.set(files);
     this.onChange(files);
@@ -667,13 +767,14 @@ export class FileUploadComponent
     });
   }
 
-  private rejectionReason(file: File): FileRejectionReason | undefined {
+  private rejectionReasons(file: File): FileRejectionReason[] {
     const maxSize = this.maxSize();
+    const reasons: FileRejectionReason[] = [];
 
-    if (!this.isAcceptedType(file)) return "extension";
-    if (maxSize && file.size > maxSize) return "size";
+    if (!this.isAcceptedType(file)) reasons.push("extension");
+    if (maxSize && file.size > maxSize) reasons.push("size");
 
-    return undefined;
+    return reasons;
   }
 
   /**
diff --git a/src/tedi/components/form/file-upload/file-upload.stories.ts b/src/tedi/components/form/file-upload/file-upload.stories.ts
index 0443c4b6f..9e7d84fc0 100644
--- a/src/tedi/components/form/file-upload/file-upload.stories.ts
+++ b/src/tedi/components/form/file-upload/file-upload.stories.ts
@@ -145,7 +145,7 @@ export default {
     },
     validator: {
       description:
-        "A rule of your own for each selected file, run after `accept` and `maxSize` pass. Return the reason a file is rejected, or nothing to accept it.",
+        "A rule of your own for each selected file, checked alongside `accept` and `maxSize`. Return the reason a file is rejected, or nothing to accept it.",
       control: false,
       table: {
         category: "inputs",
@@ -157,7 +157,7 @@ export default {
     },
     showRestrictions: {
       description:
-        "Whether the allowed types and maximum size are summarised in a hint below the field. Rejection errors render either way.",
+        "Whether the allowed types and maximum size are summarised in the hint below the field. `hint` and rejection errors render either way.",
       control: "boolean",
       table: {
         category: "inputs",
@@ -165,6 +165,24 @@ export default {
         defaultValue: { summary: "true" },
       },
     },
+    error: {
+      description:
+        "An error of your own, such as a server error, shown after the field's rejection message and above the hint.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    success: {
+      description:
+        "A success message, shown in the error's place above the hint while the field has no error.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    hint: {
+      description:
+        "Guidance of your own, shown after the allowed types and maximum size in the field's hint.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
     clearable: {
       description:
         "Whether a clear button removes every file at once. Overrides the wrapping `tedi-form-field`'s `clearable` for this field. Leave unset to inherit it — set `clearable` on the form field instead. Use it for a standalone file upload, where it defaults to `true`.",
@@ -295,10 +313,13 @@ export const States: Story = {
             <tedi-col width="5">
               <tedi-form-field>
                 <label tedi-label [for]="state.label">Label</label>
-                <tedi-file-upload [inputId]="state.label" name="file" [disabled]="!!state.disabled" />
-                @if (state.feedback) {
-                  <tedi-feedback-text text="Feedback text" [type]="state.feedback" />
-                }
+                <tedi-file-upload
+                  [inputId]="state.label"
+                  name="file"
+                  [disabled]="!!state.disabled"
+                  [error]="state.feedback === 'error' ? 'Feedback text' : undefined"
+                  [success]="state.feedback === 'valid' ? 'Feedback text' : undefined"
+                />
               </tedi-form-field>
             </tedi-col>
           </tedi-row>
@@ -333,8 +354,9 @@ export const Multiple: Story = {
 };
 
 /**
- * `accept` and `maxSize` are summarised in a hint of their own. Turn
- * `showRestrictions` off when a projected `tedi-feedback-text` already says it.
+ * `accept` and `maxSize` are summarised in the field's hint, and `hint` adds
+ * guidance of your own after them. Turn `showRestrictions` off when a projected
+ * `tedi-feedback-text` already says it all.
  */
 export const WithHint: Story = {
   render: () => ({
@@ -346,6 +368,12 @@ export const WithHint: Story = {
             <tedi-file-upload inputId="hint-own" name="file" accept=".jpg,.png,.pdf" [maxSize]="1024 ** 2" />
           </tedi-form-field>
         </tedi-col>
+        <tedi-col>
+          <tedi-form-field>
+            <label tedi-label for="hint-extra">Label</label>
+            <tedi-file-upload inputId="hint-extra" name="file" accept=".jpg,.png,.pdf" [maxSize]="1024 ** 2" hint="Lisa allkirjastatud avalduse koopia." />
+          </tedi-form-field>
+        </tedi-col>
         <tedi-col>
           <tedi-form-field>
             <label tedi-label for="hint-projected">Label</label>
@@ -423,8 +451,9 @@ export const KeepingRejectedFiles: Story = {
 };
 
 /**
- * The restrictions hint can't describe the rule, so add your own feedback text.
- * Pick a file with a space in its name to try it.
+ * Describe the validator's rule in `hint`; the field shows it after the allowed
+ * types and size. When the story opens, it selects a `.png` with a space in its
+ * name, which breaks two rules.
  */
 export const WithValidator: Story = {
   render: () => ({
@@ -435,8 +464,16 @@ export const WithValidator: Story = {
     template: `
       <tedi-form-field>
         <label tedi-label for="validator">Label</label>
-        <tedi-file-upload inputId="validator" name="file" multiple accept=".pdf,.txt" [validator]="noSpaces" />
-        <tedi-feedback-text text="Failinimes ei tohi olla tühikuid." />
+        <tedi-file-upload
+          inputId="validator"
+          name="file"
+          multiple
+          accept=".pdf,.txt"
+          [maxSize]="100 * 1024"
+          [validator]="noSpaces"
+          hint="Failinimes ei tohi olla tühikuid."
+          storyRejectedFile="taotlus scan lk 1.png"
+        />
       </tedi-form-field>
     `,
   }),
@@ -537,10 +574,10 @@ export const WithReactiveForms: Story = {
 };
 
 /**
- * The field paints its own surface and renders its own clear button and
- * restrictions hint, so it works with no wrapper, and a sibling label still
- * names the add button. Wrap it in a `tedi-form-field` for feedback text that
- * sets the error or success border.
+ * The field paints its own surface and renders its own clear button, hint,
+ * error and success text, so it works with no wrapper, and a sibling label
+ * still names the add button. Wrap it in a `tedi-form-field` to lay out the
+ * label and share `size` and `clearable` with it.
  */
 export const Standalone: Story = {
   render: () => ({
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index 524314776..320c126c0 100644
--- a/src/tedi/services/translation/translations.ts
+++ b/src/tedi/services/translation/translations.ts
@@ -252,9 +252,18 @@ export const translationsMap = {
   "file-upload.size-rejected": {
     description: "Error label for rejected size",
     components: ["FileUpload"],
-    et: (files: string) => `Fail(id) ${files} on liiga suured`,
-    en: (files: string) => `File(s) ${files} are too large`,
-    ru: (files: string) => `Файл(ы) ${files} слишком велики`,
+    et: (files: string, count: string) =>
+      count === "1"
+        ? `Fail ${files} on liiga suur`
+        : `Failid ${files} on liiga suured`,
+    en: (files: string, count: string) =>
+      count === "1"
+        ? `File ${files} is too large`
+        : `Files ${files} are too large`,
+    ru: (files: string, count: string) =>
+      count === "1"
+        ? `Файл ${files} слишком велик`
+        : `Файлы ${files} слишком велики`,
   },
   "file-upload.size-rejected-extended": {
     description: "Error label for rejected size",
@@ -276,9 +285,18 @@ export const translationsMap = {
   "file-upload.extension-rejected": {
     description: "Error label for rejected extension",
     components: ["FileUpload"],
-    et: (files: string) => `Fail(id) ${files} on vale laiendiga`,
-    en: (files: string) => `File(s) ${files} have the wrong extension`,
-    ru: (files: string) => `Файл(ы) ${files} имеют неправильное расширение`,
+    et: (files: string, count: string) =>
+      count === "1"
+        ? `Fail ${files} on vale laiendiga`
+        : `Failid ${files} on vale laiendiga`,
+    en: (files: string, count: string) =>
+      count === "1"
+        ? `File ${files} has the wrong extension`
+        : `Files ${files} have the wrong extension`,
+    ru: (files: string, count: string) =>
+      count === "1"
+        ? `Файл ${files} имеет неправильное расширение`
+        : `Файлы ${files} имеют неправильное расширение`,
   },
   "file-upload.extension-rejected-extended": {
     description: "Error label for rejected extension",
@@ -294,7 +312,7 @@ export const translationsMap = {
     description:
       "Appended, for assistive technology only, to the name of a file marked invalid",
     components: ["FileUpload"],
-    et: "Vigane fail",
+    et: "Sobimatu fail",
     en: "Invalid file",
     ru: "Недопустимый файл",
   },
@@ -315,17 +333,28 @@ export const translationsMap = {
   "file-upload.added": {
     description: "Announced to assistive technology when files are added",
     components: ["FileDropzone", "FileUpload"],
-    et: (count: string) => `Lisatud ${count} fail(i)`,
-    en: (count: string) => `${count} file(s) added`,
+    et: (count: string) =>
+      count === "1" ? "Lisatud 1 fail" : `Lisatud ${count} faili`,
+    en: (count: string) =>
+      count === "1" ? "1 file added" : `${count} files added`,
     ru: (count: string) => `Добавлено файлов: ${count}`,
   },
   "file-upload.duplicates-skipped": {
     description:
       "Announced when files already in the list are skipped on a repeat selection",
     components: ["FileDropzone", "FileUpload"],
-    et: (files: string) => `Fail(id) ${files} on juba lisatud`,
-    en: (files: string) => `File(s) ${files} have already been added`,
-    ru: (files: string) => `Файл(ы) ${files} уже добавлены`,
+    et: (files: string, count: string) =>
+      count === "1"
+        ? `Fail ${files} on juba lisatud`
+        : `Failid ${files} on juba lisatud`,
+    en: (files: string, count: string) =>
+      count === "1"
+        ? `File ${files} has already been added`
+        : `Files ${files} have already been added`,
+    ru: (files: string, count: string) =>
+      count === "1"
+        ? `Файл ${files} уже добавлен`
+        : `Файлы ${files} уже добавлены`,
   },
   "file-upload.removed": {
     description: "Announced to assistive technology when a file is removed",

From dc02350542b22640ec0eb2e571438aa4d058de66 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 13 Oct 2026 17:01:53 +0300
Subject: [PATCH 6/7] fix(file-upload): untype the Default story for the
 aliased inputs #752

---
 src/tedi/components/form/file-upload/file-upload.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/tedi/components/form/file-upload/file-upload.stories.ts b/src/tedi/components/form/file-upload/file-upload.stories.ts
index 9e7d84fc0..c5f6850bf 100644
--- a/src/tedi/components/form/file-upload/file-upload.stories.ts
+++ b/src/tedi/components/form/file-upload/file-upload.stories.ts
@@ -256,7 +256,7 @@ export default {
 
 type Story = StoryObj<FileUploadComponent>;
 
-export const Default: Story = {
+export const Default: StoryObj = {
   parameters: { controls: { disable: false } },
   args: {
     multiple: false,

From c9cf1786f73012915d16e22c2a0655c9f593e890 Mon Sep 17 00:00:00 2001
From: Ly Tempel <ly.tempel@bitweb.ee>
Date: Tue, 13 Oct 2026 17:38:45 +0300
Subject: [PATCH 7/7] fix(file-upload): add CR fixes #752

---
 .../file-upload/file-upload.component.spec.ts  | 18 ++++++++++++++++++
 .../form/file-upload/file-upload.component.ts  |  6 ++++--
 .../form/file-upload/file-upload.types.ts      |  3 ++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/tedi/components/form/file-upload/file-upload.component.spec.ts b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
index 997f6651a..83f58472e 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.spec.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.spec.ts
@@ -409,6 +409,24 @@ describe("FileUploadComponent", () => {
         fixture.detectChanges();
       });
 
+      it("drops a file the consumer marks valid from the summary", () => {
+        selectFiles(fixture, [png("a.png"), png("b.png")]);
+
+        fixture.componentRef.setInput(
+          "files",
+          component
+            .files()
+            .map((file) =>
+              file.name === "a.png"
+                ? Object.assign(file, { isValid: true })
+                : file,
+            ),
+        );
+        fixture.detectChanges();
+
+        expect(summary()).toBe("file-upload.extension-rejected:'b.png',1");
+      });
+
       it("names every rejected file still listed, across selections", () => {
         selectFiles(fixture, [png("a.png")]);
         selectFiles(fixture, [png("b.png")]);
diff --git a/src/tedi/components/form/file-upload/file-upload.component.ts b/src/tedi/components/form/file-upload/file-upload.component.ts
index 11cfb60cd..885a1bbc7 100644
--- a/src/tedi/components/form/file-upload/file-upload.component.ts
+++ b/src/tedi/components/form/file-upload/file-upload.component.ts
@@ -314,13 +314,15 @@ export class FileUploadComponent
   /**
    * Kept rejected files are described from the list itself, so the summary
    * names exactly the rejected files on screen through every later selection,
-   * removal or reset.
+   * removal or reset. A file the consumer has since marked valid drops out.
    */
   protected readonly rejectionError = computed(() => {
     if (!this.keepRejectedFiles()) return this.selectionError();
 
     return this.rejectionSummary(
-      this.files().flatMap((file) => this.fileRejections.get(file) ?? []),
+      this.files().flatMap((file) =>
+        file.isValid === false ? (this.fileRejections.get(file) ?? []) : [],
+      ),
     );
   });
   private readonly fallbackId = `tedi-file-upload-${fileUploadIdCounter++}`;
diff --git a/src/tedi/components/form/file-upload/file-upload.types.ts b/src/tedi/components/form/file-upload/file-upload.types.ts
index 2e6269972..68c4a9a3c 100644
--- a/src/tedi/components/form/file-upload/file-upload.types.ts
+++ b/src/tedi/components/form/file-upload/file-upload.types.ts
@@ -17,7 +17,8 @@ export interface FileUploadFile extends Partial<File> {
   /**
    * Whether the file passed the `accept`, `maxSize` and `validator` checks. A
    * file marked `false` is shown as a danger tag while two or more files are
-   * listed; a single file shows only its name.
+   * listed; a single file shows only its name. To change it, set a new array
+   * on `files` or the bound control — the field does not see an in-place edit.
    */
   isValid?: boolean;
 }