diff --git a/package-lock.json b/package-lock.json
index 1e55c2aba..85328fb10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0-semantic-version",
       "dependencies": {
         "@tanstack/angular-table": "^8.21.4",
-        "@tedi-design-system/core": "^6.9.0"
+        "@tedi-design-system/core": "^6.11.1"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "20.3.27",
@@ -12913,9 +12913,9 @@
       }
     },
     "node_modules/@tedi-design-system/core": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.9.0.tgz",
-      "integrity": "sha512-+RPnP8d9xcgabfFODJRd472JPzRIT8OR6XMd67RtbKyLOMNHKl8RwT22DCKcMnH4FEMv/v7Uay1jwgWL9Wp/Rg==",
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-6.11.1.tgz",
+      "integrity": "sha512-6ocg/DUodf5alJNkDDfVqs2LY5qazc2clfoU0WlTZ5p9u9PiiiThTo9l5/jfgwkLZcs5KkdSDNp3a/5z6VHBnA==",
       "engines": {
         "node": ">=24.0.0",
         "npm": ">=11.0.0"
diff --git a/package.json b/package.json
index 30cd3af46..3b6fc1059 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
-    "@tedi-design-system/core": "^6.9.0"
+    "@tedi-design-system/core": "^6.11.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "20.3.27",
diff --git a/skills/tedi-angular/references/components.md b/skills/tedi-angular/references/components.md
index 5b36a2b83..85f3ca60b 100644
--- a/skills/tedi-angular/references/components.md
+++ b/skills/tedi-angular/references/components.md
@@ -110,10 +110,11 @@ the part of this document worth maintaining by hand.
 
 ### The `/tedi` and `/community` entry points collide
 
-This is the highest-value trap in the Angular library and it has no React equivalent. **25 selectors
+This is the highest-value trap in the Angular library and it has no React equivalent. **27 selectors
 are declared in both entry points, under identical class names**, including `tedi-card`,
 `tedi-modal`, `tedi-accordion`, `tedi-tabs`, `tedi-dropdown`, `tedi-form-field`, `tedi-pagination`,
-`tedi-search`, `tedi-tag`, `[tedi-floating-button]`, and the checkbox/radio group family.
+`tedi-search`, `tedi-tag`, `[tedi-floating-button]`, `tedi-file-dropzone`, and the checkbox/radio
+group family.
 
 `CardComponent` from `/community` and `CardComponent` from `/tedi` are different components with
 different input APIs behind the same `<tedi-card>` tag. Consequences:
@@ -200,6 +201,59 @@ Both entry points declare `[tedi-floating-button]`. The Community component is
   `icon` input, not from projection, so you cannot swap in your own `tedi-icon` or add trailing
   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.
+- **`tedi-file-dropzone`'s `files` has no separate "default" input** — unlike the React version, which
+  needs `defaultFiles` alongside `files` to distinguish uncontrolled from controlled. The binding
+  picks the mode: `[files]` seeds the list and leaves the dropzone owning it, `[(files)]` keeps the
+  parent in sync, `[formControl]` hands it to the form. Bind a stable reference, though: 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.
+- **`tedi-file-dropzone` validates itself.** It registers on `NG_VALIDATORS`, so a `formControl` bound
+  to it fails with a `rejectedFiles` error (carrying the offending files) while any rejected file is
+  still listed — you don't add a validator for that. `Validators.required` alone would pass on a list
+  of visibly broken files whenever `keepRejectedFiles` is on and keeps them in the value. Same shape as Angular
+  Material's datepicker: the constraint comes from the component's own inputs (`accept`, `maxSize`), so
+  the component owns the rule. No `registerOnValidatorChange` is needed — `validate()` is a pure
+  function of the control value, which Angular already revalidates on every change.
+- **`tedi-file-dropzone` emits `fileRemove` alongside `filesChange`.** `filesChange` gives the new list;
+  `fileRemove` gives the single entry the user deleted, so an in-flight upload can be aborted or a blob
+  URL revoked without diffing the two arrays.
+- **`tedi-file-dropzone` selects files, it does not upload them.** It validates against `accept` and
+  `maxSize` and hands you the list; the upload, and setting each file's `isLoading` / `isValid` as it
+  progresses, is yours. A `validator` input adds a rule of your own on top, run on every selected file;
+  the reason it returns lands on that file's `error` after the built-in ones and joins the summary,
+  with the files it rejected named after it. Describe the rule in `hint`, which follows the allowed
+  types and size in the one hint. `keepRejectedFiles` decides what happens to a file that
+  fails `accept`, `maxSize` or `validator`: off (the default) discards it and summarises every rejection in one message under the
+  dropzone, which paints the border red. On keeps it in the list with its reason in that file's
+  `error`, leaving the border neutral — so the form value holds it with `isValid: false` and you must
+  filter on `isValid` before uploading. `error` is writable, so a failure the upload
+  came back with lands on the file it belongs to.
+- **`tedi-file-dropzone` shows at most one hint and one validation message, error first.** Pass your
+  own text through `hint`, `error` and `success`, not projected `tedi-feedback-text`. `error` joins
+  the dropzone's own rejection summary in one error, and `success` takes the error's place while
+  there is none.
+- **Selecting a file that is already listed is skipped**, matched on name, size and mtime — so two
+  different files sharing a name still both land. Project an `*tediFileDropzoneFile` template to
+  replace the built-in `tedi-attachment` row when a file needs a progress bar, an icon or its own
+  feedback.
+- **`tedi-file-dropzone`'s `label` is the text inside the drop zone**, not a field label above it. It is
+  the accessible name of the zone, so the control is never nameless. Don't add a `<label tedi-label>`
+  for `inputId` and don't wrap it in `tedi-form-field`: the file input is `display: none` and cannot be
+  labelled, and `tedi-form-field` would also place its projected feedback after the file list rather
+  than under the dropzone. Fold the field name into `label` instead.
+- **The drop zone is a `div[role="button"]`, not a `<label>` or a native `<button>`** — the same shape
+  React and react-dropzone use, and the reason is screen readers, not styling. The file input is
+  `display: none` and out of the tab order: while it was the focus target, closing the file dialog
+  handed focus back to it and VoiceOver discarded the status message every time. A native `<button>`
+  behaves differently again and was also unreliable there. Because a `role="button"` div has no native
+  activation, Enter and Space are wired by hand in `handleKeydown`, and `disabled` is `aria-disabled`
+  plus `tabindex="-1"` with both the click and key paths guarded. Carbon, USWDS, GOV.UK and Polaris all
+  avoid making the file input the focus target for the same reason.
+- **Selections are announced assertively and on a delay; removals are polite and immediate.** Closing
+  the file dialog leaves the screen reader busy for a moment, and a message inserted during it is
+  dropped rather than queued. Removal involves no dialog, so it needs neither. Announcements go through
+  `ToastAnnouncerService`, whose regions live on `<body>`: a live region inside the component is
+  silently dropped when the rows around it re-render, which is what happens on every selection.
 
 ### Clear buttons
 
diff --git a/src/package.json b/src/package.json
index 28ca420d1..5b369f0da 100644
--- a/src/package.json
+++ b/src/package.json
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@tanstack/angular-table": "^8.21.4",
-    "@tedi-design-system/core": "^6.8.1"
+    "@tedi-design-system/core": "^6.11.1"
   },
   "publishConfig": {
     "access": "public"
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts b/src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts
new file mode 100644
index 000000000..505198e08
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone-file.directive.ts
@@ -0,0 +1,48 @@
+import { Directive, inject, TemplateRef } from "@angular/core";
+import { FileDropzoneFile } from "./file-dropzone.types";
+
+export interface FileDropzoneFileContext {
+  /** The file this row renders, bound by `let-file` without naming a key. */
+  $implicit: FileDropzoneFile;
+  /** Removes this file from the dropzone. */
+  remove: () => void;
+  /** Translated accessible name for the remove control, including the file name. */
+  removeLabel: string;
+}
+
+/**
+ * Replaces the built-in `tedi-attachment` row for every selected file. Use it
+ * to add a progress bar, extra actions or per-file feedback.
+ *
+ * @example
+ * ```html
+ * <tedi-file-dropzone multiple [(files)]="files">
+ *   <ng-template tediFileDropzoneFile let-file let-remove="remove" let-removeLabel="removeLabel">
+ *     <tedi-attachment [name]="file.name" icon="description">
+ *       @if (file.isLoading) {
+ *         <tedi-progress-bar [value]="progressFor(file)" />
+ *       }
+ *       <tedi-attachment-actions>
+ *         <button tedi-button variant="neutral" [attr.aria-label]="removeLabel" (click)="remove()">
+ *           <tedi-icon name="delete" [size]="18" color="inherit" />
+ *         </button>
+ *       </tedi-attachment-actions>
+ *     </tedi-attachment>
+ *   </ng-template>
+ * </tedi-file-dropzone>
+ * ```
+ */
+@Directive({
+  selector: "[tediFileDropzoneFile]",
+  standalone: true,
+})
+export class FileDropzoneFileDirective {
+  readonly template = inject<TemplateRef<FileDropzoneFileContext>>(TemplateRef);
+
+  static ngTemplateContextGuard(
+    _directive: FileDropzoneFileDirective,
+    _context: unknown,
+  ): _context is FileDropzoneFileContext {
+    return true;
+  }
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.html b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
new file mode 100644
index 000000000..e5e7b6a29
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.html
@@ -0,0 +1,95 @@
+<div
+  #zone
+  role="button"
+  class="tedi-file-dropzone__zone"
+  [class.tedi-file-dropzone__zone--invalid]="isInvalid()"
+  [class.tedi-file-dropzone__zone--valid]="isValid()"
+  [class.tedi-file-dropzone__zone--drop-over]="isDragActive()"
+  [attr.tabindex]="isDisabled() ? -1 : 0"
+  [attr.aria-disabled]="isDisabled() || null"
+  [attr.aria-invalid]="isInvalid() || null"
+  [attr.aria-describedby]="describedBy.attribute()"
+  (click)="openPicker()"
+  (keydown)="handleKeydown($event)"
+  (blur)="handleBlur()"
+  (dragenter)="handleDragEnter($event)"
+  (dragover)="handleDragOver($event)"
+  (dragleave)="handleDragLeave()"
+  (drop)="handleDrop($event)"
+>
+  <tedi-icon
+    class="tedi-file-dropzone__icon"
+    name="attach_file"
+    [size]="24"
+    [color]="isDisabled() ? 'inherit' : 'secondary'"
+  />
+  <span class="tedi-file-dropzone__label">{{ resolvedLabel() }}</span>
+</div>
+
+<input
+  #fileInput
+  class="tedi-file-dropzone__input"
+  type="file"
+  tabindex="-1"
+  aria-hidden="true"
+  [id]="resolvedId()"
+  [attr.name]="name()"
+  [attr.accept]="accept()"
+  [multiple]="multiple()"
+  [disabled]="isDisabled()"
+  (change)="handleSelection($event)"
+  (cancel)="handleDialogCancel()"
+/>
+
+@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 (hintText(); as hint) {
+  <tedi-feedback-text [id]="feedbackIds().hint" [text]="hint" />
+}
+
+@if (files().length) {
+  <ul
+    class="tedi-file-dropzone__files"
+    role="list"
+    [attr.aria-label]="selectedFilesLabel()"
+  >
+    @for (row of fileRows(); track row.file) {
+      <li class="tedi-file-dropzone__file">
+        @if (fileTemplate(); as template) {
+          <ng-container
+            [ngTemplateOutlet]="template.template"
+            [ngTemplateOutletContext]="row.context"
+          />
+        } @else {
+          <tedi-attachment
+            [name]="row.name"
+            [fileSize]="row.size"
+            [error]="row.file.error"
+            [invalid]="row.file.isValid === false"
+          >
+            <tedi-attachment-actions>
+              <button
+                tedi-button
+                type="button"
+                variant="neutral"
+                [disabled]="isDisabled()"
+                [attr.aria-label]="row.removeLabel"
+                (click)="removeFile(row.file)"
+              >
+                <tedi-icon name="delete" [size]="18" color="inherit" />
+              </button>
+            </tedi-attachment-actions>
+          </tedi-attachment>
+        }
+      </li>
+    }
+  </ul>
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.scss b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
new file mode 100644
index 000000000..7ad0e92f5
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.scss
@@ -0,0 +1,73 @@
+.tedi-file-dropzone {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-grid-gutters-04);
+}
+
+.tedi-file-dropzone__zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: var(--file-dropzone-padding-y) var(--file-dropzone-padding-x);
+  font: inherit;
+  color: var(--file-dropzone-text-default);
+  text-align: center;
+  cursor: pointer;
+  background-color: var(--file-dropzone-background-default);
+  border: var(--tedi-borders-02) dotted var(--file-dropzone-border-default);
+  border-radius: var(--form-field-radius);
+  transition:
+    color 0.2s ease-in-out,
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--file-dropzone-background-hover);
+    border-color: var(--file-dropzone-border-hover);
+  }
+
+  &:active {
+    border-color: var(--file-dropzone-border-active);
+  }
+
+  &:focus-visible {
+    outline: var(--tedi-borders-02) solid var(--file-dropzone-border-focus);
+    outline-offset: var(--tedi-borders-01);
+    border-color: var(--file-dropzone-border-focus);
+  }
+}
+
+.tedi-file-dropzone__zone--drop-over.tedi-file-dropzone__zone {
+  color: var(--file-dropzone-text-drop-over);
+  background-color: var(--file-dropzone-background-drop-over);
+  border-color: var(--file-dropzone-border-drop-over);
+}
+
+.tedi-file-dropzone__zone--invalid.tedi-file-dropzone__zone {
+  border-color: var(--form-general-feedback-error-border);
+}
+
+.tedi-file-dropzone__zone--valid.tedi-file-dropzone__zone {
+  border-color: var(--form-general-feedback-success-border);
+}
+
+.tedi-file-dropzone--disabled .tedi-file-dropzone__zone {
+  color: var(--general-text-disabled);
+  cursor: not-allowed;
+  background-color: var(--file-dropzone-background-disabled);
+  border-color: var(--file-dropzone-border-disabled);
+}
+
+.tedi-file-dropzone__input {
+  display: none;
+}
+
+.tedi-file-dropzone__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-grid-gutters-08);
+  padding-left: 0;
+  margin: var(--layout-grid-gutters-04) 0 0;
+  list-style: none;
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
new file mode 100644
index 000000000..afd008fe1
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.spec.ts
@@ -0,0 +1,1458 @@
+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 { FileDropzoneComponent } from "./file-dropzone.component";
+import { FileDropzoneFileDirective } from "./file-dropzone-file.directive";
+import { FileDropzoneFile } from "./file-dropzone.types";
+
+class TranslationMock {
+  translate(key: string, ...args: unknown[]) {
+    return args.length ? `${key}:${args.join(",")}` : key;
+  }
+  track(key: string) {
+    return () => key;
+  }
+}
+
+const breakpointMock = {
+  isBelowBreakpoint: () => signal(false).asReadonly(),
+};
+
+const announcer = { announce: jest.fn(), clear: jest.fn(), destroy: jest.fn() };
+
+beforeEach(() => announcer.announce.mockClear());
+
+/** Waits past the add-path delay, then reads the last announced message. */
+const announced = async (): Promise<string> => {
+  // Mirrors ADD_ANNOUNCE_DELAY in the component, which is deliberately private.
+  await new Promise((resolve) => setTimeout(resolve, 300 + 150));
+
+  return announcer.announce.mock.calls.at(-1)?.[0] ?? "";
+};
+
+/** Politeness of the last announcement. */
+const announcedAs = (): string | undefined =>
+  announcer.announce.mock.calls.at(-1)?.[1];
+
+const zoneOf = (fixture: ComponentFixture<unknown>): HTMLElement =>
+  fixture.debugElement.query(By.css('[role="button"].tedi-file-dropzone__zone'))
+    .nativeElement as HTMLElement;
+
+// `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 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 dispatchDrag = (
+  fixture: ComponentFixture<unknown>,
+  type: string,
+  files: File[] = [],
+) => {
+  const zone = fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+    .nativeElement as HTMLElement;
+  const event = new Event(type, { bubbles: true }) as Event & {
+    dataTransfer: unknown;
+  };
+  event.dataTransfer = { files, types: ["Files"], dropEffect: "none" };
+  zone.dispatchEvent(event);
+  fixture.detectChanges();
+  return zone;
+};
+
+const baseProviders = [
+  { provide: ToastAnnouncerService, useValue: announcer },
+  { provide: TediTranslationService, useClass: TranslationMock },
+  { provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "et" },
+  { provide: BreakpointService, useValue: breakpointMock },
+];
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent],
+  template: `<tedi-file-dropzone
+    inputId="described-by-dropzone"
+    aria-describedby="described-by-dropzone external-help"
+    [maxSize]="1024 ** 2"
+  />`,
+})
+class DescribedByHostComponent {}
+
+describe("FileDropzoneComponent", () => {
+  let fixture: ComponentFixture<FileDropzoneComponent>;
+  let component: FileDropzoneComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [FileDropzoneComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(FileDropzoneComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  const text = (selector: string) =>
+    fixture.debugElement
+      .query(By.css(selector))
+      ?.nativeElement.textContent.trim();
+
+  it("creates and shows the translated label", () => {
+    expect(component).toBeTruthy();
+    expect(text(".tedi-file-dropzone__label")).toBe("file-dropzone.label");
+  });
+
+  it("uses a custom label when given", () => {
+    fixture.componentRef.setInput("label", "Lohista failid siia");
+    fixture.detectChanges();
+
+    expect(text(".tedi-file-dropzone__label")).toBe("Lohista failid siia");
+  });
+
+  it("names the drop zone from the dropzone label", () => {
+    const zone = zoneOf(fixture);
+    const input = fileInput(fixture);
+
+    expect(zone.textContent).toContain("file-dropzone.label");
+    expect(zone.getAttribute("tabindex")).toBe("0");
+    // The input stays out of the tab order so that closing the file dialog
+    // cannot hand focus back to it — the button is the control.
+    expect(input.getAttribute("tabindex")).toBe("-1");
+    expect(input.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  it("opens the file picker from the drop zone", () => {
+    const input = fileInput(fixture);
+    const click = jest.spyOn(input, "click");
+
+    // The input is display:none, so the zone has to forward the activation.
+    zoneOf(fixture).click();
+    expect(click).toHaveBeenCalledTimes(1);
+
+    // A role="button" div has no native keyboard activation.
+    for (const key of ["Enter", " "]) {
+      zoneOf(fixture).dispatchEvent(
+        new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+      );
+    }
+
+    expect(click).toHaveBeenCalledTimes(3);
+  });
+
+  it("stays inert while disabled", () => {
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+    const click = jest.spyOn(input, "click");
+    const zone = zoneOf(fixture);
+
+    expect(zone.getAttribute("tabindex")).toBe("-1");
+    expect(zone.getAttribute("aria-disabled")).toBe("true");
+
+    zone.click();
+    zone.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Enter", bubbles: true }),
+    );
+
+    expect(click).not.toHaveBeenCalled();
+  });
+
+  it("gives each instance its own generated id", () => {
+    @Component({
+      standalone: true,
+      imports: [FileDropzoneComponent],
+      template: `<tedi-file-dropzone [maxSize]="1" /><tedi-file-dropzone
+          [maxSize]="1"
+        />`,
+    })
+    class TwoDropzonesComponent {}
+
+    const pair = TestBed.createComponent(TwoDropzonesComponent);
+    pair.detectChanges();
+
+    const [first, second] = pair.debugElement
+      .queryAll(By.css("input[type=file]"))
+      .map((el) => el.nativeElement as HTMLInputElement);
+    const [firstZone, secondZone] = pair.debugElement
+      .queryAll(By.css('[role="button"].tedi-file-dropzone__zone'))
+      .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 dropzone's aria-describedby to the other's hint.
+    expect(firstZone.getAttribute("aria-describedby")).not.toBe(
+      secondZone.getAttribute("aria-describedby"),
+    );
+  });
+
+  it("associates an external label through inputId", () => {
+    fixture.componentRef.setInput("inputId", "attachments");
+    fixture.detectChanges();
+
+    expect(fileInput(fixture).id).toBe("attachments");
+  });
+
+  it("disables the input and marks the host", () => {
+    fixture.componentRef.setInput("disabled", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.disabled).toBe(true);
+    expect(
+      fixture.nativeElement.classList.contains("tedi-file-dropzone--disabled"),
+    ).toBe(true);
+  });
+
+  it("forwards accept and multiple to the input", () => {
+    fixture.componentRef.setInput("accept", ".pdf,.txt");
+    fixture.componentRef.setInput("multiple", true);
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.getAttribute("accept")).toBe(".pdf,.txt");
+    expect(input.multiple).toBe(true);
+  });
+
+  describe("selection", () => {
+    it("adds a picked file and announces it", async () => {
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "report.pdf",
+      ]);
+      expect(await announced()).toBe("file-upload.added:1");
+    });
+
+    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(component.files().map((file) => file.name)).toEqual([
+        "second.pdf",
+      ]);
+    });
+
+    it("announces a skip alongside what was added", async () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [makeFile("report.pdf"), makeFile("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',1. file-upload.added:1",
+      );
+    });
+
+    it("announces a rejection, a skip and an addition from one selection", async () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [
+        makeFile("report.pdf"),
+        makeFile("notes.txt", 100, "text/plain"),
+        makeFile("other.pdf"),
+      ]);
+
+      expect(await announced()).toBe(
+        "file-upload.extension-rejected:'notes.txt',1. " +
+          "file-upload.duplicates-skipped:'report.pdf',1. file-upload.added:1",
+      );
+    });
+
+    it("announces additions assertively so the file dialog cannot bury them", async () => {
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(await announced()).toBe("file-upload.added:1");
+      expect(announcedAs()).toBe("assertive");
+    });
+
+    it("skips a file that is already listed", async () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "report.pdf",
+      ]);
+      expect(await announced()).toBe(
+        "file-upload.duplicates-skipped:'report.pdf',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("adds the new files and skips only the repeats in one selection", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("first.pdf")]);
+      selectFiles(fixture, [makeFile("first.pdf"), makeFile("second.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "first.pdf",
+        "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(component.files().map((file) => file.name)).toEqual([
+        "first.pdf",
+        "second.pdf",
+      ]);
+    });
+  });
+
+  describe("validation", () => {
+    it("rejects a file with a disallowed extension", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text.tedi-feedback-text--error")).toContain(
+        "file-upload.extension-rejected",
+      );
+    });
+
+    it("accepts a wildcard MIME group", () => {
+      fixture.componentRef.setInput("accept", "image/*");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("photo.png", 100, "image/png")]);
+
+      expect(component.files().map((file) => file.name)).toEqual(["photo.png"]);
+    });
+
+    it("accepts an exact MIME type", () => {
+      fixture.componentRef.setInput("accept", "application/pdf");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("report.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "report.pdf",
+      ]);
+    });
+
+    it("rejects a file over maxSize", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("big.pdf", 2 * 1024 ** 2)]);
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text.tedi-feedback-text--error")).toContain(
+        "file-upload.size-rejected",
+      );
+    });
+
+    it("keeps rejected files marked invalid with keepRejectedFiles", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      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-attachment--error")).length,
+      ).toBe(1);
+    });
+
+    it("gives each individually rejected file its own message", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("bad.txt", 100, "text/plain"),
+        makeFile("big.pdf", 2 * 1024 ** 2),
+      ]);
+
+      expect(component.files().map((file) => file.error)).toEqual([
+        "file-dropzone.file-rejected-extension",
+        "file-dropzone.file-rejected-size",
+      ]);
+      expect(
+        fixture.debugElement
+          .queryAll(By.css(".tedi-attachment__feedback"))
+          .map((el) => el.nativeElement.textContent.trim()),
+      ).toEqual([
+        "file-dropzone.file-rejected-extension",
+        "file-dropzone.file-rejected-size",
+      ]);
+    });
+
+    it("summarises rejections under the dropzone without keepRejectedFiles", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [
+        makeFile("ok.pdf"),
+        makeFile("bad.txt", 100, "text/plain"),
+      ]);
+
+      expect(component.files().map((file) => file.name)).toEqual(["ok.pdf"]);
+      expect(
+        text(
+          "tedi-feedback-text.tedi-feedback-text--error:not(.tedi-attachment__feedback)",
+        ),
+      ).toContain("file-upload.extension-rejected");
+    });
+
+    it("clears the summary on the next selection with no rejections", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      const summary = () =>
+        text(
+          "tedi-feedback-text.tedi-feedback-text--error:not(.tedi-attachment__feedback)",
+        );
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(summary()).toContain("file-upload.extension-rejected");
+
+      selectFiles(fixture, [makeFile("ok.pdf")]);
+      expect(summary()).toBeUndefined();
+    });
+
+    it("drops the aggregate error when files carry their own", async () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      expect(
+        fixture.debugElement.query(
+          By.css(
+            "tedi-feedback-text.tedi-feedback-text--error:not(.tedi-attachment__feedback)",
+          ),
+        ),
+      ).toBeNull();
+      expect(await announced()).toBe(
+        "file-upload.extension-rejected:'bad.txt',1",
+      );
+    });
+
+    it("renders a consumer-supplied error on a preloaded file", () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "scan.png", isValid: false, error: "Vale formaat" },
+      ]);
+      fixture.detectChanges();
+
+      expect(text(".tedi-attachment__feedback")).toBe("Vale formaat");
+    });
+
+    const noSpaces = (file: File) =>
+      file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid." : null;
+
+    it("rejects a file through a validator of the consumer's own", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("my scan.pdf")]);
+
+      expect(component.files()[0].isValid).toBe(false);
+      expect(component.files()[0].error).toBe(
+        "Failinimes ei tohi olla tühikuid.",
+      );
+    });
+
+    it("clears the summary once the last file is removed", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("ok.pdf")]);
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+      expect(text("tedi-feedback-text")).toContain("extension-rejected");
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(text("tedi-feedback-text")).not.toContain("extension-rejected");
+    });
+
+    it("keeps the summary while other files are still listed", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("a.pdf"), makeFile("b.pdf")]);
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files().length).toBe(1);
+      expect(text("tedi-feedback-text")).toContain("extension-rejected");
+    });
+
+    it("names every file a custom rule rejected in one message", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("my scan.pdf"), makeFile("a b.pdf")]);
+
+      expect(text("tedi-feedback-text")).toContain(
+        "Failinimes ei tohi olla tühikuid: 'my scan.pdf', 'a b.pdf'",
+      );
+    });
+
+    it("runs the validator on a file the restrictions already reject", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad name.txt", 100, "text/plain")]);
+
+      expect(text("tedi-feedback-text")).toBe(
+        "file-upload.extension-rejected:'bad name.txt',1. " +
+          "Failinimes ei tohi olla tühikuid: 'bad name.txt'",
+      );
+    });
+
+    it("gives a kept file every reason it was rejected for", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad name.txt", 100, "text/plain")]);
+
+      expect(component.files()[0].error).toBe(
+        "file-dropzone.file-rejected-extension. Failinimes ei tohi olla tühikuid.",
+      );
+    });
+
+    it("accepts a file its validator returns nothing for", () => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("validator", noSpaces);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("korras.pdf")]);
+
+      expect(component.files()[0].isValid).toBe(true);
+      expect(component.files()[0].error).toBeUndefined();
+    });
+
+    it("reports every restriction a file breaks, not just the first", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 50);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
+
+      expect(component.files()[0].error).toBe(
+        "file-dropzone.file-rejected-extension. file-dropzone.file-rejected-size",
+      );
+    });
+
+    it("names a file breaking both restrictions under each reason", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 50);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 5000, "text/plain")]);
+
+      expect(text("tedi-feedback-text")).toBe(
+        "file-upload.extension-rejected:'notes.txt',1. " +
+          "file-upload.size-rejected:'notes.txt',1",
+      );
+    });
+
+    it("lists a rejected file so the user can see and remove it", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      expect(text(".tedi-attachment__title")).toBe("notes.txt");
+      expect(
+        fixture.debugElement.queryAll(By.css(".tedi-attachment--error")).length,
+      ).toBe(1);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+    });
+
+    it("leaves the border alone when rejected files carry their own reason", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("multiple", true);
+      fixture.componentRef.setInput("keepRejectedFiles", true);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+
+      expect(component.files().map((file) => file.error)).toEqual([
+        "file-dropzone.file-rejected-extension",
+      ]);
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement.classList,
+      ).not.toContain("tedi-file-dropzone__zone--invalid");
+    });
+
+    it("marks the zone invalid while an error is shown", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("big.pdf", 2 * 1024 ** 2)]);
+
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement.classList,
+      ).toContain("tedi-file-dropzone__zone--invalid");
+    });
+  });
+
+  describe("feedback", () => {
+    it("shows the restrictions hint and the rejection error at the same time", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("keepRejectedFiles", 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(2);
+      expect(messages[0].nativeElement.textContent).toContain(
+        "file-upload.extension-rejected",
+      );
+      expect(messages[1].nativeElement.textContent).toContain(
+        "file-upload.accept",
+      );
+    });
+
+    it("renders the size limit in the unit that reads best", () => {
+      fixture.componentRef.setInput("maxSize", 500 * 1024);
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toContain("500 KB");
+
+      fixture.componentRef.setInput("maxSize", 10 * 1024 ** 2);
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toContain("10 MB");
+    });
+
+    it("keeps errors when showRestrictions is off", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("showRestrictions", false);
+      fixture.componentRef.setInput("keepRejectedFiles", 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",
+      );
+    });
+
+    it("describes the zone by the error and then the hint", () => {
+      fixture.componentRef.setInput("maxSize", 1024 ** 2);
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
+      fixture.detectChanges();
+
+      const id = fileInput(fixture).id;
+
+      expect(zoneOf(fixture).getAttribute("aria-describedby")).toBe(
+        `${id}-error ${id}-hint`,
+      );
+    });
+
+    it("appends the consumer's hint to the restrictions in one hint", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("hint", "Lisa allkirjastatud koopia.");
+      fixture.detectChanges();
+
+      const messages = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text"),
+      );
+      expect(messages.length).toBe(1);
+      expect(messages[0].nativeElement.textContent.trim()).toBe(
+        "file-upload.accept .pdf. Lisa allkirjastatud koopia.",
+      );
+    });
+
+    it("keeps the consumer's hint when showRestrictions is off", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("showRestrictions", false);
+      fixture.componentRef.setInput("hint", "Lisa allkirjastatud koopia.");
+      fixture.detectChanges();
+
+      expect(text("tedi-feedback-text")).toBe("Lisa allkirjastatud koopia.");
+    });
+
+    it("joins the consumer's error to its own rejection in one error", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("notes.txt", 100, "text/plain")]);
+
+      const errors = fixture.debugElement.queryAll(
+        By.css("tedi-feedback-text.tedi-feedback-text--error"),
+      );
+      expect(errors.length).toBe(1);
+      expect(errors[0].nativeElement.textContent.trim()).toBe(
+        "file-upload.extension-rejected:'notes.txt',1. Üleslaadimine ebaõnnestus",
+      );
+    });
+
+    it("shows success in the error's place and paints the zone valid", () => {
+      fixture.componentRef.setInput("success", "Fail on üles laaditud");
+      fixture.detectChanges();
+
+      const id = fileInput(fixture).id;
+
+      expect(text("tedi-feedback-text.tedi-feedback-text--valid")).toBe(
+        "Fail on üles laaditud",
+      );
+      expect(zoneOf(fixture).classList).toContain(
+        "tedi-file-dropzone__zone--valid",
+      );
+      expect(zoneOf(fixture).getAttribute("aria-describedby")).toBe(
+        `${id}-success`,
+      );
+    });
+
+    it("hides success while there is an error", () => {
+      fixture.componentRef.setInput("success", "Fail on üles laaditud");
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.query(
+          By.css("tedi-feedback-text.tedi-feedback-text--valid"),
+        ),
+      ).toBeNull();
+      expect(zoneOf(fixture).classList).not.toContain(
+        "tedi-file-dropzone__zone--valid",
+      );
+    });
+
+    it("merges a consumer's own aria-describedby with its own ids", () => {
+      const host = TestBed.createComponent(DescribedByHostComponent);
+      host.detectChanges();
+
+      const id = fileInput(host).id;
+
+      expect(zoneOf(host).getAttribute("aria-describedby")).toBe(
+        `described-by-dropzone external-help ${id}-hint`,
+      );
+    });
+
+    it("marks the zone invalid from the consumer's error", () => {
+      fixture.componentRef.setInput("error", "Üleslaadimine ebaõnnestus");
+      fixture.detectChanges();
+
+      expect(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement.classList,
+      ).toContain("tedi-file-dropzone__zone--invalid");
+    });
+  });
+
+  describe("drag and drop", () => {
+    it("marks the zone while a file is dragged over it", () => {
+      const zone = dispatchDrag(fixture, "dragenter");
+      expect(zone.classList).toContain("tedi-file-dropzone__zone--drop-over");
+
+      dispatchDrag(fixture, "dragleave");
+      expect(zone.classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("adds dropped files and clears the drop state", () => {
+      dispatchDrag(fixture, "dragenter");
+      const zone = dispatchDrag(fixture, "drop", [makeFile("dropped.pdf")]);
+
+      expect(component.files().map((file) => file.name)).toEqual([
+        "dropped.pdf",
+      ]);
+      expect(zone.classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("validates dropped files, which bypass the accept attribute", () => {
+      fixture.componentRef.setInput("accept", ".pdf");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      dispatchDrag(fixture, "drop", [makeFile("bad.txt", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+    });
+
+    it("accepts the drag as a copy so the browser does not open the file", () => {
+      const zone = fixture.debugElement.query(
+        By.css(".tedi-file-dropzone__zone"),
+      ).nativeElement as HTMLElement;
+      const event = new Event("dragover", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & {
+        dataTransfer: { types: string[]; dropEffect: string };
+      };
+      event.dataTransfer = { types: ["Files"], dropEffect: "none" };
+      zone.dispatchEvent(event);
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(event.dataTransfer.dropEffect).toBe("copy");
+    });
+
+    it("ignores drops while disabled", () => {
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      dispatchDrag(fixture, "drop", [makeFile("dropped.pdf")]);
+
+      expect(component.files()).toEqual([]);
+    });
+  });
+
+  describe("file list", () => {
+    beforeEach(() => {
+      fixture.componentRef.setInput("multiple", true);
+      fixture.detectChanges();
+      selectFiles(fixture, [makeFile("report.pdf", 1024)]);
+    });
+
+    it("labels the list and renders an attachment per file", () => {
+      const list = fixture.debugElement.query(
+        By.css(".tedi-file-dropzone__files"),
+      ).nativeElement as HTMLElement;
+
+      expect(list.getAttribute("aria-label")).toBe(
+        "file-dropzone.selected-files",
+      );
+      // Safari drops list semantics from a bullet-less list without it.
+      expect(list.getAttribute("role")).toBe("list");
+      expect(list.querySelectorAll("tedi-attachment").length).toBe(1);
+    });
+
+    it("hides the file size unless showFileSize is set", () => {
+      expect(text(".tedi-attachment__size")).toBeUndefined();
+
+      fixture.componentRef.setInput("showFileSize", true);
+      fixture.detectChanges();
+
+      expect(text(".tedi-attachment__size")).toBe("1 KB");
+    });
+
+    it("emits the removed file, and only for a real removal", () => {
+      const removed: string[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file.name));
+
+      selectFiles(fixture, [makeFile("second.pdf")]);
+      expect(removed).toEqual([]);
+
+      (
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement as HTMLButtonElement
+      ).click();
+      fixture.detectChanges();
+
+      expect(removed).toEqual(["report.pdf"]);
+    });
+
+    it("does not emit while disabled", () => {
+      const removed: FileDropzoneFile[] = [];
+      component.fileRemove.subscribe((file) => removed.push(file));
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      component["removeFile"](component.files()[0]);
+      fixture.detectChanges();
+
+      expect(removed).toEqual([]);
+      expect(component.files().length).toBe(1);
+    });
+
+    it("removes a file through its remove button", async () => {
+      const remove = fixture.debugElement.query(
+        By.css(".tedi-attachment__actions button"),
+      ).nativeElement as HTMLButtonElement;
+
+      expect(remove.getAttribute("aria-label")).toBe("remove report.pdf");
+
+      remove.click();
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(await announced()).toBe("file-upload.removed:report.pdf");
+      // Polite: no file dialog is involved, so nothing buries it.
+      expect(announcedAs()).toBe("polite");
+    });
+
+    it("moves focus to the previous file's remove button", async () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+        { id: "3", name: "c.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      const buttons = () =>
+        fixture.debugElement
+          .queryAll(By.css(".tedi-attachment__actions button"))
+          .map((el) => el.nativeElement as HTMLButtonElement);
+
+      buttons()[1].click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(buttons()[0]);
+    });
+
+    it("moves focus to the new first row when the first file goes", async () => {
+      fixture.componentRef.setInput("files", [
+        { id: "1", name: "a.pdf" },
+        { id: "2", name: "b.pdf" },
+      ]);
+      fixture.detectChanges();
+
+      fixture.debugElement
+        .queryAll(By.css(".tedi-attachment__actions button"))[0]
+        .nativeElement.click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(
+        fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+          .nativeElement,
+      );
+    });
+
+    it("returns focus to the drop zone when the last file goes", async () => {
+      fixture.debugElement
+        .query(By.css(".tedi-attachment__actions button"))
+        .nativeElement.click();
+      await fixture.whenStable();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(
+        fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+          .nativeElement,
+      );
+    });
+  });
+
+  describe("edge cases", () => {
+    const zoneEl = () =>
+      fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+        .nativeElement as HTMLElement;
+
+    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("");
+    });
+
+    it("ignores a drop that carries no dataTransfer", () => {
+      zoneEl().dispatchEvent(new Event("drop", { bubbles: true }));
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+    });
+
+    it("ignores a drag that carries no dataTransfer", () => {
+      zoneEl().dispatchEvent(new Event("dragenter", { bubbles: true }));
+      fixture.detectChanges();
+
+      expect(zoneEl().classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("ignores a drag of something that is not a file", () => {
+      const event = new Event("dragenter", { bubbles: true }) as Event & {
+        dataTransfer: unknown;
+      };
+      event.dataTransfer = { types: ["text/plain"], files: [] };
+      zoneEl().dispatchEvent(event);
+      fixture.detectChanges();
+
+      expect(zoneEl().classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+    });
+
+    it("leaves a non-file dragover to the browser", () => {
+      const event = new Event("dragover", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & { dataTransfer: { types: string[]; dropEffect: string } };
+      event.dataTransfer = { types: ["text/plain"], dropEffect: "copy" };
+      zoneEl().dispatchEvent(event);
+      fixture.detectChanges();
+
+      expect(event.defaultPrevented).toBe(false);
+      expect(event.dataTransfer.dropEffect).toBe("copy");
+    });
+
+    it("refuses the drag while disabled without letting the browser take it", () => {
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      dispatchDrag(fixture, "dragenter", [makeFile("report.pdf")]);
+      const overEvent = new Event("dragover", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & { dataTransfer: { types: string[]; dropEffect: string } };
+      overEvent.dataTransfer = { types: ["Files"], dropEffect: "copy" };
+      zoneEl().dispatchEvent(overEvent);
+
+      expect(zoneEl().classList).not.toContain(
+        "tedi-file-dropzone__zone--drop-over",
+      );
+      // Claimed, so the browser cannot navigate to the file, but refused.
+      expect(overEvent.defaultPrevented).toBe(true);
+      expect(overEvent.dataTransfer.dropEffect).toBe("none");
+    });
+
+    it("swallows a drop while disabled instead of opening the file", () => {
+      fixture.componentRef.setInput("disabled", true);
+      fixture.detectChanges();
+
+      const dropEvent = new Event("drop", {
+        bubbles: true,
+        cancelable: true,
+      }) as Event & { dataTransfer: unknown };
+      dropEvent.dataTransfer = {
+        files: [makeFile("report.pdf")],
+        types: ["Files"],
+        dropEffect: "none",
+      };
+      zoneEl().dispatchEvent(dropEvent);
+      fixture.detectChanges();
+
+      expect(component.files()).toEqual([]);
+      expect(dropEvent.defaultPrevented).toBe(true);
+    });
+
+    it("matches an extensionless file on its MIME type", () => {
+      fixture.componentRef.setInput("accept", "text/plain");
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("README", 100, "text/plain")]);
+
+      expect(component.files().map((file) => file.isValid)).toEqual([true]);
+    });
+
+    it("rejects an extensionless file when accept lists extensions", () => {
+      fixture.componentRef.setInput("accept", ".txt");
+      fixture.componentRef.setInput("keepRejectedFiles", false);
+      fixture.detectChanges();
+
+      selectFiles(fixture, [makeFile("README", 100, "text/plain")]);
+
+      expect(component.files()).toEqual([]);
+    });
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, ReactiveFormsModule],
+  template: `<tedi-file-dropzone
+    [formControl]="control"
+    accept=".pdf"
+    multiple
+    keepRejectedFiles
+  />`,
+})
+class ReactiveFormsHostComponent {
+  control = new FormControl<FileDropzoneFile[]>([]);
+}
+
+describe("FileDropzoneComponent 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-attachment__title"))
+        .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 zone", () => {
+    const hasFocus = jest.spyOn(document, "hasFocus").mockReturnValue(true);
+
+    expect(host.control.touched).toBe(false);
+    zoneOf(fixture).dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+    hasFocus.mockRestore();
+  });
+
+  it("ignores the blur that opening the file dialog causes", () => {
+    const hasFocus = jest.spyOn(document, "hasFocus").mockReturnValue(false);
+
+    zoneOf(fixture).dispatchEvent(new Event("blur"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(false);
+    hasFocus.mockRestore();
+  });
+
+  it("marks the control touched when the dialog is dismissed", () => {
+    fileInput(fixture).dispatchEvent(new Event("cancel"));
+    fixture.detectChanges();
+
+    expect(host.control.touched).toBe(true);
+  });
+
+  it("marks the control touched when 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-attachment"))).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" }),
+    ]);
+  });
+
+  it("passes once no rejected file is left", () => {
+    host.control.setValue([{ id: "1", name: "ok.pdf" }]);
+    fixture.detectChanges();
+
+    expect(host.control.valid).toBe(true);
+    expect(host.control.errors).toBeNull();
+  });
+
+  it("revalidates when the user removes the rejected file", () => {
+    selectFiles(fixture, [makeFile("bad.txt", 100, "text/plain")]);
+    expect(host.control.invalid).toBe(true);
+
+    (
+      fixture.debugElement.query(By.css(".tedi-attachment__actions button"))
+        .nativeElement as HTMLButtonElement
+    ).click();
+    fixture.detectChanges();
+
+    expect(host.control.invalid).toBe(false);
+    expect(host.control.value).toEqual([]);
+  });
+
+  it("disables the input from the control", () => {
+    host.control.disable();
+    fixture.detectChanges();
+
+    const input = fileInput(fixture);
+
+    expect(input.disabled).toBe(true);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, FileDropzoneFileDirective],
+  template: `
+    <tedi-file-dropzone multiple>
+      <ng-template
+        tediFileDropzoneFile
+        let-file
+        let-remove="remove"
+        let-removeLabel="removeLabel"
+      >
+        <span class="custom-row">{{ file.name }}</span>
+        <button
+          type="button"
+          class="custom-remove"
+          [attr.aria-label]="removeLabel"
+          (click)="remove()"
+        >
+          Remove
+        </button>
+      </ng-template>
+    </tedi-file-dropzone>
+  `,
+})
+class TemplateHostComponent {}
+
+describe("FileDropzoneComponent with a custom file template", () => {
+  let fixture: ComponentFixture<TemplateHostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TemplateHostComponent],
+      providers: baseProviders,
+    });
+    fixture = TestBed.createComponent(TemplateHostComponent);
+    fixture.detectChanges();
+    selectFiles(fixture, [makeFile("report.pdf")]);
+  });
+
+  it("renders the projected template instead of the attachment", () => {
+    expect(
+      fixture.debugElement.query(By.css(".custom-row")).nativeElement
+        .textContent,
+    ).toContain("report.pdf");
+    expect(fixture.debugElement.query(By.css("tedi-attachment"))).toBeNull();
+  });
+
+  it("hands the template a translated label for its remove control", () => {
+    expect(
+      fixture.debugElement
+        .query(By.css(".custom-remove"))
+        .nativeElement.getAttribute("aria-label"),
+    ).toBe("remove report.pdf");
+  });
+
+  it("accepts any context shape at compile time", () => {
+    // The guard exists purely so `let-file` is typed inside the template; it is
+    // never consulted at runtime, so nothing else would execute it.
+    expect(
+      FileDropzoneFileDirective.ngTemplateContextGuard(
+        null as never,
+        undefined,
+      ),
+    ).toBe(true);
+  });
+
+  it("removes the file through the template context", () => {
+    (
+      fixture.debugElement.query(By.css(".custom-remove"))
+        .nativeElement as HTMLButtonElement
+    ).click();
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css(".custom-row"))).toBeNull();
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, FormsModule],
+  template: `<tedi-file-dropzone
+    [(ngModel)]="files"
+    name="attachments"
+    multiple
+  />`,
+})
+class NgModelHostComponent {
+  files: FileDropzoneFile[] = [];
+}
+
+@Component({
+  standalone: true,
+  imports: [FileDropzoneComponent, FileDropzoneFileDirective],
+  template: `
+    <tedi-file-dropzone multiple>
+      <ng-template tediFileDropzoneFile let-file let-remove="remove">
+        <span class="plain-row" (click)="remove()">{{ file.name }}</span>
+      </ng-template>
+    </tedi-file-dropzone>
+  `,
+})
+class FocuslessTemplateHostComponent {}
+
+describe("FileDropzoneComponent with a template that has no focusable row", () => {
+  it("falls back to the drop zone when the previous row cannot take focus", async () => {
+    TestBed.configureTestingModule({
+      imports: [FocuslessTemplateHostComponent],
+      providers: baseProviders,
+    });
+    const fixture = TestBed.createComponent(FocuslessTemplateHostComponent);
+    fixture.detectChanges();
+    selectFiles(fixture, [makeFile("a.pdf"), makeFile("b.pdf")]);
+    fixture.detectChanges();
+
+    const rows = fixture.debugElement.queryAll(By.css(".plain-row"));
+    expect(rows.length).toBe(2);
+
+    (rows[1].nativeElement as HTMLElement).click();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(document.activeElement).toBe(
+      fixture.debugElement.query(By.css(".tedi-file-dropzone__zone"))
+        .nativeElement,
+    );
+  });
+});
+
+describe("FileDropzoneComponent 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",
+    ]);
+  });
+
+  it("renders a model value set by the host", async () => {
+    fixture.componentInstance.files = [{ id: "1", name: "preloaded.pdf" }];
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.query(By.css(".tedi-attachment__title"))
+        .nativeElement.textContent,
+    ).toContain("preloaded.pdf");
+  });
+});
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.component.ts b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
new file mode 100644
index 000000000..bdee503f7
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.component.ts
@@ -0,0 +1,750 @@
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import {
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  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 { 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 { AttachmentComponent } from "../../helpers/attachment/attachment.component";
+import { AttachmentActionsComponent } from "../../helpers/attachment/attachment-actions.component";
+import { FeedbackTextComponent } from "../feedback-text/feedback-text.component";
+import { deriveControlState } from "../form-field/derive-control-state";
+import { controlDescribedBy } from "../form-field/control-described-by";
+import {
+  FileDropzoneFileContext,
+  FileDropzoneFileDirective,
+} from "./file-dropzone-file.directive";
+import { FileDropzoneFile, FileDropzoneValidator } from "./file-dropzone.types";
+
+type FileRejectionReason = "extension" | "size";
+
+interface FileRejection {
+  name: string;
+  reasons: FileRejectionReason[];
+  message?: string;
+}
+
+let fileDropzoneIdCounter = 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;
+
+const FOCUSABLE =
+  'button:not([disabled]), a[href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/**
+ * 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: FileDropzoneFile): string =>
+  `${file.name}:${file.size}:${file.lastModified}`;
+
+@Component({
+  selector: "tedi-file-dropzone",
+  standalone: true,
+  imports: [
+    NgTemplateOutlet,
+    IconComponent,
+    ButtonComponent,
+    AttachmentComponent,
+    AttachmentActionsComponent,
+    FeedbackTextComponent,
+  ],
+  templateUrl: "./file-dropzone.component.html",
+  styleUrl: "./file-dropzone.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileDropzoneComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => FileDropzoneComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    class: "tedi-file-dropzone",
+    "[class.tedi-file-dropzone--disabled]": "isDisabled()",
+  },
+})
+export class FileDropzoneComponent
+  implements OnInit, ControlValueAccessor, Validator, OnDestroy
+{
+  private readonly document = inject(DOCUMENT);
+  private readonly translations = inject(TediTranslationService);
+  private readonly announcer = inject(ToastAnnouncerService);
+  private addAnnounceTimeout?: ReturnType<typeof setTimeout>;
+  private readonly injector = inject(Injector);
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+  private readonly fileInput =
+    viewChild<ElementRef<HTMLInputElement>>("fileInput");
+  private readonly dropZone = viewChild<ElementRef<HTMLElement>>("zone");
+
+  /**
+   * Files held by the dropzone, and the value written by `formControl` /
+   * `ngModel`. Bind it one-way to seed the list and leave the dropzone 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<FileDropzoneFile[]>([]);
+  /**
+   * Id of the file input. Generated when not set.
+   */
+  readonly inputId = input<string>();
+  /**
+   * `name` attribute of the file input. The files do not travel with a native
+   * form submit: dropped files never reach the input, and its 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>();
+  /**
+   * Text inside the dropzone, which also names the file input. Falls back to
+   * the translated `file-dropzone.label`.
+   */
+  readonly label = 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 drop, which bypasses it.
+   *
+   * 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, 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 lands on that file's
+   * `error` after the built-in ones, and joins the rejection summary 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.
+   *
+   * 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<FileDropzoneValidator>();
+  /**
+   * Whether more than one file can be held at a time. A single-file dropzone
+   * replaces its file on the next selection.
+   * @default false
+   */
+  readonly multiple = input(false, { transform: booleanAttribute });
+  /**
+   * Keeps rejected files in the list, each carrying its own reason, so the user
+   * can see which of their files failed and remove it. Left off, a rejected
+   * file is discarded and every rejection is summarised in one message under
+   * the dropzone instead.
+   * @default false
+   */
+  readonly keepRejectedFiles = input(false, { transform: booleanAttribute });
+  /**
+   * Whether the allowed types and maximum size are summarised in the hint below
+   * the dropzone. Turn it off when the same information is shown elsewhere;
+   * `hint` and rejection errors still render.
+   * @default true
+   */
+  readonly showRestrictions = input(true, { transform: booleanAttribute });
+  /**
+   * Whether each file's size is shown next to its name.
+   * @default false
+   */
+  readonly showFileSize = input(false, { transform: booleanAttribute });
+  /**
+   * Guidance of your own, such as what a `validator` checks, shown after the
+   * allowed types and maximum size in the dropzone's hint.
+   */
+  readonly hint = input<string>();
+  /**
+   * An error of your own, such as one the server returned. Shown in the
+   * dropzone's error text after its own rejection message, above the hint, and
+   * paints the border red. It does not change a bound control's validity. For
+   * an error that belongs to one file, set that file's `error` instead.
+   */
+  readonly error = input<string>();
+  /**
+   * A success message, shown in the error's place above the hint and painting
+   * the border green. Shown only while the dropzone has no error: an error
+   * means the user still has something to fix.
+   */
+  readonly success = input<string>();
+  /**
+   * Disables the dropzone from a parent template. Combined with the
+   * reactive-forms disabled state.
+   */
+  readonly disabled = input(false, { transform: booleanAttribute });
+  /**
+   * Marks the dropzone as invalid. The error state is also derived from the
+   * bound control and from rejected files, so this only forces it on.
+   * @default false
+   */
+  readonly invalid = input(false, { transform: booleanAttribute });
+  /**
+   * Emits the file the user removed. `filesChange` carries the new list; this
+   * says which entry left it, so an in-flight upload can be aborted or a blob
+   * URL revoked without diffing the two.
+   */
+  readonly fileRemove = output<FileDropzoneFile>();
+
+  private readonly derived = deriveControlState();
+  private readonly formDisabled = signal(false);
+  private readonly dragDepth = signal(0);
+  /**
+   * Summarises the rejections from the last selection. Describes files that
+   * were discarded rather than listed, so it cannot be derived from `files()`.
+   */
+  protected readonly rejectionError = signal<string | undefined>(undefined);
+  private readonly fallbackId = `tedi-file-dropzone-${fileDropzoneIdCounter++}`;
+
+  protected readonly fileTemplate = contentChild(FileDropzoneFileDirective);
+
+  protected readonly isDisabled = computed(
+    () => this.disabled() || this.formDisabled(),
+  );
+
+  protected readonly isInvalid = computed(
+    () => this.invalid() || !!this.errorText() || this.derived.invalid(),
+  );
+
+  protected readonly isValid = computed(
+    () => !this.isInvalid() && !!this.success(),
+  );
+
+  protected readonly resolvedId = computed(
+    () => this.inputId() ?? this.fallbackId,
+  );
+
+  protected readonly resolvedLabel = computed(
+    () => this.label() ?? this.translations.translate("file-dropzone.label"),
+  );
+
+  protected readonly isDragActive = computed(() => this.dragDepth() > 0);
+
+  protected readonly selectedFilesLabel = this.translations.track(
+    "file-dropzone.selected-files",
+  );
+
+  /**
+   * Everything the file list binds, resolved once per `files()` change. Keeps
+   * the template free of calls that would re-run — and re-allocate strings — on
+   * every check.
+   */
+  protected readonly fileRows = computed(() => {
+    const template = this.fileTemplate();
+    const showSize = this.showFileSize();
+    const removeLabel = this.translations.translate("remove");
+
+    return this.files().map((file) => {
+      const label = `${removeLabel} ${file.name}`;
+
+      return {
+        file,
+        name: file.name,
+        removeLabel: label,
+        size:
+          showSize && typeof file.size === "number"
+            ? formatFileSize(file.size)
+            : undefined,
+        context: template
+          ? ({
+              $implicit: file,
+              remove: () => this.removeFile(file),
+              removeLabel: label,
+            } satisfies FileDropzoneFileContext)
+          : undefined,
+      };
+    });
+  });
+
+  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 hintText = computed(() => {
+    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 dropzone 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`,
+      success: `${id}-success`,
+      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 input never references.
+   */
+  readonly describedBy = controlDescribedBy();
+
+  private onChange: (files: FileDropzoneFile[]) => void = () => {};
+  private onTouched: () => void = () => {};
+
+  constructor() {
+    effect(() => {
+      const ids = this.feedbackIds();
+      this.describedBy.set(
+        [
+          this.errorText() ? ids.error : null,
+          this.successText() ? ids.success : null,
+          this.hintText() ? ids.hint : null,
+        ].filter((id): id is string => !!id),
+      );
+    });
+  }
+
+  ngOnInit(): void {
+    this.derived.connect();
+  }
+
+  writeValue(files: FileDropzoneFile[] | null): void {
+    this.files.set(files ?? []);
+    this.clearRejectionWhenEmpty();
+  }
+
+  registerOnChange(fn: (files: FileDropzoneFile[]) => void): void {
+    this.onChange = fn;
+  }
+
+  /**
+   * 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, which `keepRejectedFiles` leaves in the value.
+   */
+  validate(control: AbstractControl): ValidationErrors | null {
+    const rejected = ((control.value ?? []) as FileDropzoneFile[]).filter(
+      (file) => file.isValid === false,
+    );
+
+    return rejected.length ? { rejectedFiles: rejected } : null;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.formDisabled.set(isDisabled);
+  }
+
+  protected openPicker(): void {
+    if (!this.isDisabled()) {
+      this.fileInput()?.nativeElement.click();
+    }
+  }
+
+  /**
+   * A `role="button"` div gets no keyboard activation of its own, so Enter and
+   * Space have to be wired up by hand. Space also scrolls the page by default.
+   */
+  protected handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this.openPicker();
+    }
+  }
+
+  protected handleSelection(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.addFiles(Array.from(input.files ?? []));
+    this.onTouched();
+    input.value = "";
+  }
+
+  protected handleBlur(): void {
+    if (this.document.hasFocus()) {
+      this.onTouched();
+    }
+  }
+
+  /** Dismissing the dialog counts as interaction, even with nothing picked. */
+  protected handleDialogCancel(): void {
+    this.onTouched();
+  }
+
+  protected handleDragEnter(event: DragEvent): void {
+    if (this.isDisabled() || !this.hasFiles(event)) return;
+
+    event.preventDefault();
+    this.dragDepth.update((depth) => depth + 1);
+  }
+
+  protected handleDragOver(event: DragEvent): void {
+    if (!this.hasFiles(event)) return;
+
+    // Without preventDefault the browser opens the dropped file in the tab, so
+    // a disabled zone has to claim the drag too — and then refuse it.
+    event.preventDefault();
+    if (event.dataTransfer) {
+      event.dataTransfer.dropEffect = this.isDisabled() ? "none" : "copy";
+    }
+  }
+
+  protected handleDragLeave(): void {
+    this.dragDepth.update((depth) => Math.max(0, depth - 1));
+  }
+
+  protected handleDrop(event: DragEvent): void {
+    this.dragDepth.set(0);
+    event.preventDefault();
+    if (this.isDisabled()) return;
+
+    this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+    this.onTouched();
+  }
+
+  protected removeFile(file: FileDropzoneFile): void {
+    if (this.isDisabled()) return;
+
+    const removedIndex = this.files().indexOf(file);
+
+    this.commit(this.files().filter((current) => current !== file));
+    this.clearRejectionWhenEmpty();
+    this.fileRemove.emit(file);
+    this.onTouched();
+    // A pending "added" is superseded by this removal; letting it fire would
+    // announce the two in the wrong order.
+    clearTimeout(this.addAnnounceTimeout);
+    this.announce(
+      this.translations.translate("file-upload.removed", file.name),
+    );
+    this.restoreFocus(removedIndex);
+  }
+
+  /**
+   * The button the user just pressed leaves the DOM with its row, so focus would
+   * fall to `<body>`, losing the user's place. Move it to the *previous* file's
+   * remove button rather than the next one, so repeated presses cannot walk
+   * destructively down the list. Removing the first file has no previous row, so
+   * focus goes to the one that replaced it; removing the last goes to the drop
+   * zone.
+   */
+  private restoreFocus(removedIndex: number): void {
+    afterNextRender(
+      () => {
+        const rows = this.host.nativeElement.querySelectorAll(
+          ".tedi-file-dropzone__file",
+        );
+
+        if (!rows.length) {
+          this.dropZone()?.nativeElement.focus();
+          return;
+        }
+
+        const row = rows[Math.max(removedIndex - 1, 0)];
+
+        (
+          row.querySelector<HTMLElement>(FOCUSABLE) ??
+          this.dropZone()?.nativeElement
+        )?.focus();
+      },
+      { injector: this.injector },
+    );
+  }
+
+  private addFiles(selected: File[]): void {
+    if (!selected.length) return;
+
+    const keepRejected = this.keepRejectedFiles();
+
+    // Picking the same file twice almost always means the user lost track of
+    // what they had already added, so the repeat is skipped rather than listed
+    // twice. Matching on more than the name keeps two genuinely different files
+    // that share one — scans and camera exports collide constantly.
+    const listed = new Set(this.files().map(fileIdentity));
+    const duplicates = selected.filter((file) =>
+      listed.has(fileIdentity(file)),
+    );
+    const fresh = selected.filter((file) => !listed.has(fileIdentity(file)));
+
+    // 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 rejection: FileRejection = {
+        name: file.name,
+        reasons: this.reasonsFor(file),
+        message: this.validator()?.(file) || undefined,
+      };
+      const isValid = !rejection.reasons.length && !rejection.message;
+
+      if (!isValid) rejections.push(rejection);
+
+      const error = [
+        ...rejection.reasons.map((reason) =>
+          this.translations.translate(`file-dropzone.file-rejected-${reason}`),
+        ),
+        rejection.message,
+      ]
+        .filter(Boolean)
+        .join(". ");
+
+      return Object.assign(file, {
+        id: generateUUID(),
+        isLoading: false,
+        isValid,
+        error: keepRejected && error ? error : undefined,
+      }) as FileDropzoneFile;
+    });
+
+    // Rejected files are listed only when each carries its own reason;
+    // otherwise they are dropped and the summary below speaks for them.
+    const kept = keepRejected
+      ? candidates
+      : candidates.filter((file) => file.isValid);
+    const multiple = this.multiple();
+
+    if (kept.length) {
+      this.commit(multiple ? [...this.files(), ...kept] : [kept[0]]);
+    }
+
+    // One selection can reject, skip and add all at once. The live region holds
+    // a single message, so these are gathered and announced together —
+    // announcing them one by one overwrites all but the last.
+    const messages: string[] = [];
+
+    const rejection = this.rejectionSummary(rejections);
+
+    this.rejectionError.set(rejection && !keepRejected ? rejection : undefined);
+    if (rejection) messages.push(rejection);
+
+    if (duplicates.length) {
+      messages.push(
+        this.translations.translate(
+          "file-upload.duplicates-skipped",
+          duplicates.map((file) => `'${file.name}'`).join(", "),
+          String(duplicates.length),
+        ),
+      );
+    }
+
+    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 drop zone 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,
+    );
+  }
+
+  ngOnDestroy(): void {
+    clearTimeout(this.addAnnounceTimeout);
+  }
+
+  /**
+   * The summary names files that were never listed, so only emptying the field
+   * makes it stale — otherwise it lingers under an empty dropzone, holding the
+   * border red.
+   */
+  private clearRejectionWhenEmpty(): void {
+    if (!this.files().length) {
+      this.rejectionError.set(undefined);
+    }
+  }
+
+  private commit(files: FileDropzoneFile[]): void {
+    this.files.set(files);
+    this.onChange(files);
+  }
+
+  private hasFiles(event: DragEvent): boolean {
+    return event.dataTransfer?.types.includes("Files") ?? false;
+  }
+
+  private isAcceptedSize(file: File): boolean {
+    const maxSize = this.maxSize();
+    return !maxSize || file.size <= maxSize;
+  }
+
+  /**
+   * Mirrors how the browser reads the `accept` attribute, so a dropped file is
+   * held to the same rule as a picked one: 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 && mimeType.startsWith(token.slice(0, -1));
+      }
+
+      return token === mimeType;
+    });
+  }
+
+  /**
+   * Every restriction the file breaks, not just the first. A file can be both
+   * the wrong format and too large; reporting one reason at a time sends the
+   * user away to fix it, only to reject it again for the other.
+   */
+  private reasonsFor(file: FileDropzoneFile): FileRejectionReason[] {
+    const reasons: FileRejectionReason[] = [];
+
+    if (!this.isAcceptedType(file as File)) reasons.push("extension");
+    if (!this.isAcceptedSize(file as File)) reasons.push("size");
+
+    return reasons;
+  }
+
+  /**
+   * 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
+    );
+  }
+
+  /**
+   * Announced from the root-level regions, not a node of this component's own.
+   * Adding files rebuilds the rows beside such a node — wholesale when
+   * `multiple` is off and the row is replaced — and a live region updated in
+   * the same breath as the subtree around it is dropped by screen readers.
+   */
+  private announce(text: string, politeness: ToastPoliteness = "polite"): void {
+    if (text) {
+      this.announcer.announce(text, politeness);
+    }
+  }
+}
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
new file mode 100644
index 000000000..8332e1ba8
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.stories.ts
@@ -0,0 +1,531 @@
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  inject,
+  input,
+} from "@angular/core";
+import { FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import {
+  argsToTemplate,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from "@storybook/angular";
+import { FileDropzoneComponent } from "./file-dropzone.component";
+import { FileDropzoneFileDirective } from "./file-dropzone-file.directive";
+import { FileDropzoneFile } from "./file-dropzone.types";
+import { AlertComponent } from "../../notifications/alert/alert.component";
+import { AttachmentComponent } from "../../helpers/attachment/attachment.component";
+import { AttachmentActionsComponent } from "../../helpers/attachment/attachment-actions.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 { IconComponent } from "../../base/icon/icon.component";
+import { ProgressBarComponent } from "../../loader/progress-bar/progress-bar.component";
+import { TextComponent } from "../../base/text/text.component";
+
+const STATES = [
+  { id: "Default", label: "Default" },
+  { id: "Hover", label: "Hover" },
+  { id: "Active", label: "Active" },
+  {
+    id: "Error",
+    label: "Error",
+    error: "Fail on liiga suur. Valige mõni teine fail või vähendage suurust.",
+  },
+  { id: "DropOver", label: "Drop over", dropOver: true },
+  { id: "Disabled", label: "Disabled", disabled: true },
+  { id: "Focus", label: "Focus" },
+];
+
+/**
+ * `drop-over` is live drag state, not an input — the showcase row has to raise a
+ * real `dragenter` carrying files for the dropzone to react to it.
+ */
+@Directive({ selector: "[storyDropOver]", standalone: true })
+class StoryDropOverDirective implements AfterViewInit {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly storyDropOver = input(false);
+
+  ngAfterViewInit(): void {
+    if (!this.storyDropOver()) return;
+
+    const zone = this.host.nativeElement.querySelector(
+      ".tedi-file-dropzone__zone",
+    );
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([""], "example.pdf"));
+    zone?.dispatchEvent(
+      new DragEvent("dragenter", {
+        dataTransfer,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  }
+}
+
+/**
+ * Lets a story show the summary the dropzone writes for itself, by actually
+ * dropping a file it will reject. A hardcoded `error` would stay on screen
+ * after the user has fixed the selection.
+ */
+@Directive({ selector: "[storyRejectedDrop]", standalone: true })
+class StoryRejectedDropDirective implements AfterViewInit {
+  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  readonly storyRejectedDrop = input<string>();
+
+  ngAfterViewInit(): void {
+    const name = this.storyRejectedDrop();
+    if (!name) return;
+
+    const zone = this.host.nativeElement.querySelector(
+      ".tedi-file-dropzone__zone",
+    );
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(new File([""], name));
+    ["dragenter", "dragover", "drop"].forEach((type) =>
+      zone?.dispatchEvent(
+        new DragEvent(type, { dataTransfer, bubbles: true, cancelable: true }),
+      ),
+    );
+  }
+}
+
+/**
+ * <a href="https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-READY-2.75.90?node-id=11335-185781&m=dev" target="_blank">Figma ↗</a><br />
+ * <a href="https://www.tedi.ee/1ee8444b7/p/70876f-file-dropzone" target="_blank">Zeroheight ↗</a>
+ */
+export default {
+  title: "TEDI-Ready/Components/Form/FileDropzone",
+  component: FileDropzoneComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        FileDropzoneFileDirective,
+        AlertComponent,
+        AttachmentComponent,
+        AttachmentActionsComponent,
+        ButtonComponent,
+        ProgressBarComponent,
+        IconComponent,
+        RowComponent,
+        ColComponent,
+        TextComponent,
+        StoryDropOverDirective,
+        StoryRejectedDropDirective,
+      ],
+    }),
+  ],
+  argTypes: {
+    files: {
+      description:
+        "Files held by the dropzone, and the value written by `formControl` / `ngModel`. Bind one-way to seed the list and leave the dropzone 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: "FileDropzoneFile[]" },
+        defaultValue: { summary: "[]" },
+      },
+    },
+    inputId: {
+      description: "Id of the file input. Generated when not set.",
+      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: dropped files never reach the input, and its value is cleared after each selection so the same file can be picked again. Read them from `files` or the bound control.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    label: {
+      description:
+        "Text inside the dropzone, which also names the file input. Falls back to the translated `file-dropzone.label`.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    accept: {
+      description:
+        "Allowed file types as a comma-separated list of extensions and MIME types. Re-checked on drop, which bypasses the `accept` attribute." +
+        " 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 — files already listed keep the verdict they were given.",
+      control: "number",
+      table: { category: "inputs", type: { summary: "number" } },
+    },
+    validator: {
+      description:
+        "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. The reason lands on that file's `error` after the built-in ones and joins the rejection summary. It runs on every selected file, including ones `accept` or `maxSize` rejected." +
+        " The automatic hint cannot describe it, so describe the rule in `hint`.",
+      control: false,
+      table: {
+        category: "inputs",
+        type: { summary: "(file: File) => string | null | undefined" },
+      },
+    },
+    multiple: {
+      description:
+        "Whether more than one file can be held. A single-file dropzone 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, each carrying its own reason. Left off, a rejected file is discarded and every rejection is summarised in one message under the dropzone instead.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    showRestrictions: {
+      description:
+        "Whether the allowed types and maximum size are summarised in the hint below the dropzone. `hint` and rejection errors render either way.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    showFileSize: {
+      description: "Whether each file's size is shown next to its name.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    hint: {
+      description:
+        "Guidance of your own, such as what a `validator` checks, shown after the allowed types and maximum size in the dropzone's hint.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    error: {
+      description:
+        "An error of your own, such as one the server returned. Shown after the dropzone's own rejection message in one error text, above the hint, and paints the border red. It does not change a bound control's validity.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    success: {
+      description:
+        "A success message, shown in the error's place above the hint and painting the border green. Shown only while the dropzone has no error.",
+      control: "text",
+      table: { category: "inputs", type: { summary: "string" } },
+    },
+    disabled: {
+      description:
+        "Disables the dropzone from a parent template. Combined with the reactive-forms disabled state, so this only forces it on.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    invalid: {
+      description:
+        "Marks the dropzone as invalid. The error state is also derived from the bound control and from rejected files, so this only forces it on.",
+      control: "boolean",
+      table: {
+        category: "inputs",
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+    },
+    fileRemove: {
+      description:
+        "Emits the file the user removed — `filesChange` carries the new list, this says which entry left it.",
+      table: { category: "outputs", type: { summary: "FileDropzoneFile" } },
+    },
+    filesChange: {
+      description: "Emits the new list whenever files are added or removed.",
+      table: { category: "outputs", type: { summary: "FileDropzoneFile[]" } },
+    },
+  },
+  args: {
+    name: "file-dropzone",
+  },
+  parameters: { controls: { disable: true } },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone ${argsToTemplate(args)} />
+      </div>
+    `,
+  }),
+} as Meta<FileDropzoneComponent>;
+
+type Story = StoryObj<FileDropzoneComponent>;
+
+export const Default: Story = {
+  parameters: { controls: { disable: false } },
+};
+
+/**
+ * `accept` and `maxSize` are summarised in a hint below the dropzone, and
+ * `hint` adds guidance of your own after them. Set `showRestrictions` to
+ * `false` when the same information is already shown elsewhere.
+ */
+export const WithHint: Story = {
+  args: {
+    accept: ".jpg,.png,.pdf",
+    maxSize: 1024 ** 2,
+    hint: "Lisa allkirjastatud avalduse koopia.",
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    accept: ".jpg,.png,.pdf",
+    maxSize: 1024 ** 2,
+    files: [
+      { id: "1", name: "report.pdf" },
+      { id: "2", name: "report_1.pdf" },
+      { id: "3", name: "report_2.pdf" },
+    ],
+  },
+};
+
+export const WithFileSize: Story = {
+  args: {
+    multiple: true,
+    showFileSize: true,
+    files: [
+      { id: "1", name: "arve_2026_06.pdf", size: 1_200_000 },
+      { id: "2", name: "aastaaruanne_2025.pdf", size: 5_400_000 },
+    ],
+  },
+};
+
+/**
+ * The default. A rejected file is discarded, so only the files that passed
+ * remain and the failure is reported once under the dropzone, which turns its
+ * border red.
+ */
+export const DiscardingRejectedFiles: Story = {
+  name: "Validation: discarding rejected files",
+  args: {
+    accept: ".pdf,.txt",
+    maxSize: 1024 ** 2,
+    multiple: true,
+    keepRejectedFiles: false,
+    files: [
+      { id: "1", name: "Kodukülastusakt_Triin.pdf" },
+      { id: "2", name: "Kodukülastusakt_Triin_2.pdf" },
+    ],
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone ${argsToTemplate(args)} storyRejectedDrop="Kodukülastusakt_Triin.png" />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * The opt-in. A rejected file stays in the list carrying its own reason, so the
+ * user can see which file failed and remove it. The dropzone's border stays
+ * neutral — the failure belongs to the file, not the field.
+ */
+export const KeepingRejectedFiles: Story = {
+  name: "Validation: keeping rejected files",
+  args: {
+    multiple: true,
+    keepRejectedFiles: true,
+    accept: ".pdf,.txt",
+    files: [
+      { id: "1", name: "Kodukülastusakt_Triin.pdf" },
+      { id: "2", name: "Kodukülastusakt_Triin_2.pdf" },
+      { id: "3", name: "Kodukülastusakt_Triin_3.pdf" },
+      {
+        id: "4",
+        name: "Kodukülastusakt_Triin.png",
+        isValid: false,
+        error: "Failiformaat ei ole lubatud",
+      },
+    ],
+  },
+};
+
+/**
+ * Describe the validator's rule in `hint`; the dropzone shows it after the
+ * allowed types. Pick a file with a space in its name to try it.
+ */
+export const WithValidator: Story = {
+  render: () => ({
+    props: {
+      files: [],
+      noSpaces: (file: File) =>
+        file.name.includes(" ") ? "Failinimes ei tohi olla tühikuid" : null,
+    },
+    template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone
+          multiple
+          keepRejectedFiles
+          accept=".pdf,.txt"
+          [validator]="noSpaces"
+          hint="Failinimes ei tohi olla tühikuid."
+          [files]="files"
+        />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * An `*tediFileDropzoneFile` template replaces the built-in attachment row. It
+ * receives each file and a `remove` callback, so anything the `tedi-attachment`
+ * supports — a leading icon, a progress bar, per-file feedback, extra
+ * actions — can be composed per file.
+ */
+export const WithCustomFileTemplate: Story = {
+  render: () => {
+    const files: FileDropzoneFile[] = [
+      { id: "1", name: "arve_2026_06.pdf", size: 1_200_000 },
+      { id: "2", name: "aastaaruanne_2025.pdf", size: 24_500, isValid: false },
+      { id: "3", name: "esitlus.mp4", size: 140_000_000, isLoading: true },
+    ];
+
+    return {
+      props: { files, progress: 64 },
+      template: `
+      <div style="max-width: 420px">
+        <tedi-file-dropzone multiple [files]="files" accept=".pdf,.mp4">
+          <ng-template tediFileDropzoneFile let-file let-remove="remove" let-removeLabel="removeLabel">
+            <tedi-attachment
+              [name]="file.name"
+              icon="description"
+              [error]="file.isValid === false ? 'Fail on liiga suur. Lubatud on failid suurusega kuni 1 MB' : undefined"
+            >
+              @if (file.isLoading) {
+                <tedi-progress-bar [value]="progress" />
+              }
+              <tedi-attachment-actions>
+                <button tedi-button variant="neutral" [attr.aria-label]="removeLabel" (click)="remove()">
+                  <tedi-icon name="delete" [size]="18" color="inherit" />
+                </button>
+              </tedi-attachment-actions>
+            </tedi-attachment>
+          </ng-template>
+        </tedi-file-dropzone>
+      </div>
+      `,
+    };
+  },
+};
+
+export const States: Story = {
+  parameters: {
+    // The states live on the drop zone, not on the component host, and the addon
+    // only rewrites a pseudo-class to a class on the styled element itself — so
+    // every selector has to reach the zone. It is also the focusable element:
+    // the file input is `display: none` and out of the tab order.
+    pseudo: {
+      hover: "#Hover .tedi-file-dropzone__zone",
+      active: "#Active .tedi-file-dropzone__zone",
+      focusVisible: "#Focus .tedi-file-dropzone__zone",
+    },
+  },
+  render: () => ({
+    props: { STATES },
+    template: `
+      <tedi-row [cols]="1" [gapY]="4">
+        @for (state of STATES; track state.id) {
+          <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">
+              <div style="max-width: 420px">
+                <tedi-file-dropzone
+                  [id]="state.id"
+                  [inputId]="state.id + '-input'"
+                  [maxSize]="30 * 1024 ** 2"
+                  [disabled]="!!state.disabled"
+                  [error]="state.error"
+                  [storyDropOver]="!!state.dropOver"
+                />
+              </div>
+            </tedi-col>
+          </tedi-row>
+        }
+      </tedi-row>
+    `,
+  }),
+};
+
+/**
+ * Rejected files stay in the value with `isValid: false`, so the control holds
+ * what the user picked rather than a silently filtered subset. The dropzone
+ * validates itself, so the control fails with a `rejectedFiles` error while one
+ * is listed — no validator of your own needed. Still filter on `isValid` before
+ * uploading.
+ */
+export const WithReactiveForms: Story = {
+  render: () => {
+    const control = new FormControl<FileDropzoneFile[]>([], {
+      nonNullable: true,
+      validators: [Validators.required],
+    });
+
+    return {
+      props: {
+        control,
+        invalidCount: () =>
+          control.value.filter((file) => file.isValid === false).length,
+      },
+      template: `
+        <div style="max-width: 420px">
+        <tedi-row [cols]="1" [gapY]="3">
+          <tedi-col>
+            <tedi-file-dropzone
+              multiple
+              accept=".pdf,.txt"
+              [maxSize]="1024 ** 2"
+              [formControl]="control"
+            />
+          </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>
+        </div>
+      `,
+    };
+  },
+};
diff --git a/src/tedi/components/form/file-dropzone/file-dropzone.types.ts b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
new file mode 100644
index 000000000..d39d18875
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/file-dropzone.types.ts
@@ -0,0 +1,43 @@
+/**
+ * Validates a selected file. Returns the reason it is rejected, or nothing to
+ * accept it.
+ */
+export type FileDropzoneValidator = (file: File) => string | null | undefined;
+
+/**
+ * A file held by the dropzone. Real selections are `File` objects carrying the
+ * extra fields; a preloaded entry only needs a `name`.
+ */
+export interface FileDropzoneFile extends Partial<File> {
+  /**
+   * File name shown in the list and used in the remove button's label and the
+   * announcements, so the user can tell the files apart.
+   */
+  name: string;
+  /**
+   * Stable identifier, used to track the file across re-renders. 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 dropzone only selects files, it does not upload them.
+   */
+  isLoading?: boolean;
+  /**
+   * Whether the file passed the `accept`, `maxSize` and `validator` checks. To
+   * change it, set a new array on `files` or the bound control — the dropzone
+   * does not see an in-place edit.
+   */
+  isValid?: boolean;
+  /**
+   * Validation message rendered under this file. Set for files the dropzone
+   * rejects itself; set it yourself on preloaded files, or to surface an error
+   * the upload returned.
+   *
+   * Worth setting whenever you set `isValid: false`: without it the error icon
+   * falls back to a generic "invalid file" label, so the failure is announced
+   * but its reason is not.
+   */
+  error?: string;
+}
diff --git a/src/tedi/components/form/file-dropzone/index.ts b/src/tedi/components/form/file-dropzone/index.ts
new file mode 100644
index 000000000..d94e61941
--- /dev/null
+++ b/src/tedi/components/form/file-dropzone/index.ts
@@ -0,0 +1,3 @@
+export * from "./file-dropzone.component";
+export * from "./file-dropzone-file.directive";
+export * from "./file-dropzone.types";
diff --git a/src/tedi/components/form/index.ts b/src/tedi/components/form/index.ts
index 557690f65..95a60a189 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-dropzone";
 export * from "./label-row";
 export * from "./number-field/number-field.component";
 export * from "./search";
diff --git a/src/tedi/components/helpers/attachment/attachment.component.html b/src/tedi/components/helpers/attachment/attachment.component.html
index 490693a3b..621ac5651 100644
--- a/src/tedi/components/helpers/attachment/attachment.component.html
+++ b/src/tedi/components/helpers/attachment/attachment.component.html
@@ -10,7 +10,7 @@
           name="error"
           color="danger"
           [size]="18"
-          [label]="error()"
+          [label]="error() ? undefined : invalidLabel()"
           class="tedi-attachment__error-icon"
         />
       }
diff --git a/src/tedi/components/helpers/attachment/attachment.component.spec.ts b/src/tedi/components/helpers/attachment/attachment.component.spec.ts
index 63abc5764..f54cf42da 100644
--- a/src/tedi/components/helpers/attachment/attachment.component.spec.ts
+++ b/src/tedi/components/helpers/attachment/attachment.component.spec.ts
@@ -192,6 +192,32 @@ describe("AttachmentComponent", () => {
     );
   });
 
+  it("should keep the error icon out of the accessibility tree", () => {
+    host.error = "File too large";
+    fixture.detectChanges();
+
+    const icon = element.querySelector(".tedi-attachment__error-icon")!;
+
+    expect(icon.getAttribute("aria-hidden")).toBe("true");
+    expect(icon.getAttribute("aria-label")).toBeNull();
+    expect(icon.hasAttribute("tabindex")).toBe(false);
+    // Announced once, by the feedback text, not twice.
+    expect(element.textContent?.match(/File too large/g)?.length).toBe(1);
+  });
+
+  it("should name the error icon when nothing else reports the failure", () => {
+    host.invalid = true;
+    fixture.detectChanges();
+
+    const icon = element.querySelector(".tedi-attachment__error-icon")!;
+
+    // `invalid` renders no message, so an unnamed icon would leave the failure
+    // conveyed by colour alone.
+    expect(element.querySelector("tedi-feedback-text")).toBeNull();
+    expect(icon.getAttribute("aria-label")).toBe("file-attachment.invalid");
+    expect(icon.getAttribute("aria-hidden")).toBe("false");
+  });
+
   it("should not render the feedback line when there is no error", () => {
     expect(element.querySelector("tedi-feedback-text")).toBeNull();
   });
diff --git a/src/tedi/components/helpers/attachment/attachment.component.ts b/src/tedi/components/helpers/attachment/attachment.component.ts
index a5ee36e20..c27b2f1f2 100644
--- a/src/tedi/components/helpers/attachment/attachment.component.ts
+++ b/src/tedi/components/helpers/attachment/attachment.component.ts
@@ -15,6 +15,7 @@ import {
   Breakpoint,
   BreakpointService,
 } from "../../../services/breakpoint/breakpoint.service";
+import { TediTranslationService } from "../../../services/translation/translation.service";
 
 export type AttachmentDirection = "horizontal" | "vertical";
 
@@ -36,6 +37,9 @@ export type AttachmentDirection = "horizontal" | "vertical";
 export class AttachmentComponent {
   protected projectedProgress = contentChild(ProgressBarComponent);
   private breakpointService = inject(BreakpointService);
+  private translations = inject(TediTranslationService);
+
+  protected invalidLabel = this.translations.track("file-attachment.invalid");
 
   /**
    * File name to display.
diff --git a/src/tedi/services/translation/translations.ts b/src/tedi/services/translation/translations.ts
index e2f64985a..a14e33cd4 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",
@@ -293,10 +311,66 @@ export const translationsMap = {
   "file-dropzone.label": {
     description: "Default label for dropzone",
     components: ["FileDropzone"],
-    et: "Lohista failid siia või klõpsa, et sirvida",
+    et: "Lohista failid siia või klõpsa failide valimiseks",
     en: "Drop files here, or click to browse",
     ru: "Перетащите файлы сюда или нажмите, чтобы выбрать",
   },
+  "file-dropzone.selected-files": {
+    description: "Accessible name for the list of selected files",
+    components: ["FileDropzone"],
+    et: "Valitud failid",
+    en: "Selected files",
+    ru: "Выбранные файлы",
+  },
+  "file-dropzone.file-rejected-extension": {
+    description:
+      "Validation message shown under a single file that has a disallowed type",
+    components: ["FileDropzone"],
+    et: "Failiformaat ei ole lubatud",
+    en: "File format is not allowed",
+    ru: "Формат файла не разрешен",
+  },
+  "file-dropzone.file-rejected-size": {
+    description:
+      "Validation message shown under a single file that is too large",
+    components: ["FileDropzone"],
+    et: "Fail on liiga suur",
+    en: "File is too large",
+    ru: "Файл слишком велик",
+  },
+  "file-upload.added": {
+    description: "Announced to assistive technology when files are added",
+    components: ["FileDropzone", "FileUpload"],
+    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, 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",
+    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"],
@@ -304,6 +378,14 @@ export const translationsMap = {
     en: "An error occurred while uploading the file",
     ru: "Произошла ошибка при загрузке файла",
   },
+  "file-attachment.invalid": {
+    description:
+      "Accessible name of the error icon on an attachment marked invalid without a message of its own",
+    components: ["Attachment"],
+    et: "Sobimatu fail",
+    en: "Invalid file",
+    ru: "Недопустимый файл",
+  },
   "file-attachment.uploading": {
     description:
       "Default hint label shown under the progress bar in Attachment while a file is being uploaded",
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";