[PM-22750] Reimplement fix old attachment logic (#17689)

* [PM-22750] Add upgradeOldCipherAttachment method to CipherService * [PM-22750] Refactor download attachment component to use signals * [PM-22750] Better download url handling * [PM-22750] Cleanup upgradeOldCipherAttachments method * [PM-22750] Refactor cipher-attachments.component to use Signals and OnPush * [PM-22750] Use the correct legacy decryption key for attachments without their own content encryption key * [PM-22750] Add fix attachment button back to attachments component * [PM-22750] Fix newly added output signals * [PM-22750] Fix failing test due to signal refactor * [PM-22750] Update copy
2025-12-17 16:53:34 +00:00 · 2025-12-08 09:14:41 -08:00
parent f89c9b0f84
commit 9f5dab05a2
12 changed files with 491 additions and 260 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -1457,6 +1457,15 @@
  "attachmentSaved": {
    "message": "Attachment saved"
  },
+  "fixEncryption": {
+    "message": "Fix encryption"
+  },
+  "fixEncryptionTooltip": {
+    "message": "This file is using an outdated encryption method."
+  },
+  "attachmentUpdated": {
+    "message": "Attachment updated"
+  },
  "file": {
    "message": "File"
  },
--- a/apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.spec.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/attachments/attachments-v2.component.spec.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, input, ChangeDetectionStrategy } from "@angular/core";
 import { ComponentFixture, TestBed, fakeAsync, tick } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { ActivatedRoute, Router } from "@angular/router";
@@ -25,31 +25,23 @@ import { PopupRouterCacheService } from "../../../../../platform/popup/view-cach

 import { AttachmentsV2Component } from "./attachments-v2.component";

-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-header",
  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class MockPopupHeaderComponent {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() pageTitle: string;
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() backAction: () => void;
+  readonly pageTitle = input<string>();
+  readonly backAction = input<() => void>();
 }

-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "popup-footer",
  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class MockPopupFooterComponent {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() pageTitle: string;
+  readonly pageTitle = input<string>();
 }

 describe("AttachmentsV2Component", () => {
@@ -120,7 +112,7 @@ describe("AttachmentsV2Component", () => {
    const submitBtn = fixture.debugElement.queryAll(By.directive(ButtonComponent))[1]
      .componentInstance;

-    expect(cipherAttachment.submitBtn).toEqual(submitBtn);
+    expect(cipherAttachment.submitBtn()).toEqual(submitBtn);
  });

  it("navigates the user to the edit view `onUploadSuccess`", fakeAsync(() => {
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -708,6 +708,15 @@
  "addAttachment": {
    "message": "Add attachment"
  },
+  "fixEncryption": {
+    "message": "Fix encryption"
+  },
+  "fixEncryptionTooltip": {
+    "message": "This file is using an outdated encryption method."
+  },
+  "attachmentUpdated": {
+    "message": "Attachment updated"
+  },
  "maxFileSizeSansPunctuation": {
    "message": "Maximum file size is 500 MB"
  },
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -5173,6 +5173,15 @@
    "message": "Fix",
    "description": "This is a verb. ex. 'Fix The Car'"
  },
+  "fixEncryption": {
+    "message": "Fix encryption"
+  },
+  "fixEncryptionTooltip": {
+    "message": "This file is using an outdated encryption method."
+  },
+  "attachmentUpdated": {
+    "message": "Attachment updated"
+  },
  "oldAttachmentsNeedFixDesc": {
    "message": "There are old file attachments in your vault that need to be fixed before you can rotate your account's encryption key."
  },
--- a/libs/common/src/vault/abstractions/cipher.service.ts
+++ b/libs/common/src/vault/abstractions/cipher.service.ts
@@ -161,6 +161,17 @@ export abstract class CipherService implements UserKeyRotationDataProvider<Ciphe
    userId: UserId,
    admin?: boolean,
  ): Promise<Cipher>;
+  /**
+   * Upgrade all old attachments for a cipher by downloading, decrypting, re-uploading with new key, and deleting old.
+   * @param cipher - The cipher with old attachments to upgrade
+   * @param userId - The user ID
+   * @param attachmentId - If provided, only upgrade the attachment with this ID
+   */
+  abstract upgradeOldCipherAttachments(
+    cipher: CipherView,
+    userId: UserId,
+    attachmentId?: string,
+  ): Promise<CipherView>;
  /**
   * Save the collections for a cipher with the server
   *
@@ -274,7 +285,7 @@ export abstract class CipherService implements UserKeyRotationDataProvider<Ciphe
    response: Response,
    userId: UserId,
    useLegacyDecryption?: boolean,
-  ): Promise<Uint8Array | null>;
+  ): Promise<Uint8Array>;

  /**
   * Decrypts the full `CipherView` for a given `CipherViewLike`.
--- a/libs/common/src/vault/services/cipher.service.ts
+++ b/libs/common/src/vault/services/cipher.service.ts
@@ -1656,12 +1656,14 @@ export class CipherService implements CipherServiceAbstraction {
    const key =
      attachment.key != null
        ? attachment.key
-        : await firstValueFrom(
-            this.keyService.orgKeys$(userId).pipe(
-              filterOutNullish(),
-              map((orgKeys) => orgKeys[cipherDomain.organizationId as OrganizationId] as OrgKey),
-            ),
-          );
+        : cipherDomain.organizationId
+          ? await firstValueFrom(
+              this.keyService.orgKeys$(userId).pipe(
+                filterOutNullish(),
+                map((orgKeys) => orgKeys[cipherDomain.organizationId as OrganizationId] as OrgKey),
+              ),
+            )
+          : await firstValueFrom(this.keyService.userKey$(userId).pipe(filterOutNullish()));
    return await this.encryptService.decryptFileData(encBuf, key);
  }

@@ -1829,6 +1831,95 @@ export class CipherService implements CipherServiceAbstraction {
    }
  }

+  /**
+   * Upgrade all old attachments for a cipher by downloading, decrypting, re-uploading with new key, and deleting old.
+   * @param cipher
+   * @param userId
+   * @param attachmentId Optional specific attachment ID to upgrade. If not provided, all old attachments will be upgraded.
+   */
+  async upgradeOldCipherAttachments(
+    cipher: CipherView,
+    userId: UserId,
+    attachmentId?: string,
+  ): Promise<CipherView> {
+    if (!cipher.hasOldAttachments) {
+      return cipher;
+    }
+
+    let cipherDomain = await this.get(cipher.id, userId);
+
+    for (const attachmentView of cipher.attachments) {
+      if (
+        attachmentView.key != null ||
+        (attachmentId != null && attachmentView.id !== attachmentId)
+      ) {
+        continue;
+      }
+
+      try {
+        // 1. Get download URL
+        const downloadUrl = await this.getAttachmentDownloadUrl(cipher.id, attachmentView);
+
+        // 2. Download attachment data
+        const dataResponse = await this.apiService.nativeFetch(
+          new Request(downloadUrl, { cache: "no-store" }),
+        );
+
+        if (dataResponse.status !== 200) {
+          throw new Error(`Failed to download attachment. Status: ${dataResponse.status}`);
+        }
+
+        // 3. Decrypt the attachment
+        const decryptedBuffer = await this.getDecryptedAttachmentBuffer(
+          cipher.id as CipherId,
+          attachmentView,
+          dataResponse,
+          userId,
+        );
+
+        // 4. Re-upload with attachment key
+        cipherDomain = await this.saveAttachmentRawWithServer(
+          cipherDomain,
+          attachmentView.fileName,
+          decryptedBuffer,
+          userId,
+        );
+
+        // 5. Delete the old attachment
+        const cipherData = await this.deleteAttachmentWithServer(
+          cipher.id,
+          attachmentView.id,
+          userId,
+        );
+        cipherDomain = new Cipher(cipherData);
+      } catch (e) {
+        this.logService.error(`Failed to upgrade attachment ${attachmentView.id}`, e);
+        throw e;
+      }
+    }
+
+    return await this.decrypt(cipherDomain, userId);
+  }
+
+  private async getAttachmentDownloadUrl(
+    cipherId: string,
+    attachmentView: AttachmentView,
+  ): Promise<string> {
+    try {
+      const attachmentResponse = await this.apiService.getAttachmentData(
+        cipherId,
+        attachmentView.id,
+      );
+      return attachmentResponse.url;
+    } catch (e) {
+      // Fall back to the attachment's stored URL
+      if (e instanceof ErrorResponse && e.statusCode === 404 && attachmentView.url) {
+        return attachmentView.url;
+      }
+      throw new Error(`Failed to get download URL for attachment ${attachmentView.id}`);
+    }
+  }
+
  private async encryptObjProperty<V extends View, D extends Domain>(
    model: V,
    obj: D,
--- a/libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.html
+++ b/libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.html
@@ -1,32 +1,57 @@
 <h2 class="tw-sr-only" id="attachments">{{ "attachments" | i18n }}</h2>

-<ul *ngIf="cipher?.attachments" aria-labelledby="attachments" class="tw-list-none tw-pl-0">
-  <li *ngFor="let attachment of cipher.attachments">
-    <bit-item>
-      <bit-item-content>
-        <span data-testid="file-name" [title]="attachment.fileName">{{ attachment.fileName }}</span>
-        <span slot="secondary" data-testid="file-size">{{ attachment.sizeName }}</span>
-      </bit-item-content>
-      <ng-container slot="end">
-        <bit-item-action>
-          <app-download-attachment
-            [admin]="admin && organization?.canEditAllCiphers"
-            [cipher]="cipher"
-            [attachment]="attachment"
-          ></app-download-attachment>
-        </bit-item-action>
-        <bit-item-action>
-          <app-delete-attachment
-            [admin]="admin && organization?.canEditAllCiphers"
-            [cipherId]="cipher.id"
-            [attachment]="attachment"
-            (onDeletionSuccess)="removeAttachment(attachment)"
-          ></app-delete-attachment>
-        </bit-item-action>
-      </ng-container>
-    </bit-item>
-  </li>
-</ul>
+@if (cipher()?.attachments; as attachments) {
+  <ul aria-labelledby="attachments" class="tw-list-none tw-pl-0">
+    @for (attachment of attachments; track attachment.id) {
+      <li>
+        <bit-item>
+          <bit-item-content>
+            <span data-testid="file-name" [title]="attachment.fileName">{{
+              attachment.fileName
+            }}</span>
+            <span slot="secondary" data-testid="file-size">{{ attachment.sizeName }}</span>
+            <i
+              *ngIf="attachment.key == null"
+              slot="default-trailing"
+              class="bwi bwi-exclamation-triangle bwi-sm tw-text-muted"
+              [appA11yTitle]="'fixEncryptionTooltip' | i18n"
+            ></i>
+          </bit-item-content>
+
+          <ng-container slot="end">
+            <bit-item-action>
+              @if (attachment.key != null) {
+                <app-download-attachment
+                  [admin]="admin() && organization()?.canEditAllCiphers"
+                  [cipher]="cipher()"
+                  [attachment]="attachment"
+                ></app-download-attachment>
+              } @else {
+                <button
+                  [bitAction]="fixOldAttachment(attachment)"
+                  bitButton
+                  buttonType="primary"
+                  size="small"
+                  type="button"
+                >
+                  {{ "fixEncryption" | i18n }}
+                </button>
+              }
+            </bit-item-action>
+            <bit-item-action>
+              <app-delete-attachment
+                [admin]="admin() && organization()?.canEditAllCiphers"
+                [cipherId]="cipher().id"
+                [attachment]="attachment"
+                (onDeletionSuccess)="removeAttachment(attachment)"
+              ></app-delete-attachment>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+      </li>
+    }
+  </ul>
+}

 <form [id]="attachmentFormId" [formGroup]="attachmentForm" [bitSubmit]="submit">
  <bit-card>
--- a/libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.spec.ts
+++ b/libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.spec.ts
@@ -1,7 +1,8 @@
-import { Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 import { mock } from "jest-mock-extended";
+import { BehaviorSubject } from "rxjs";

 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -13,7 +14,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
-import { CipherId, UserId } from "@bitwarden/common/types/guid";
+import { CipherId, OrganizationId, UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.view";
@@ -26,27 +27,21 @@ import { FakeAccountService, mockAccountServiceWith } from "../../../../../commo
 import { CipherAttachmentsComponent } from "./cipher-attachments.component";
 import { DeleteAttachmentComponent } from "./delete-attachment/delete-attachment.component";

-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-download-attachment",
  template: "",
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 class MockDownloadAttachmentComponent {
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() attachment: AttachmentView;
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() cipher: CipherView;
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() admin: boolean = false;
+  readonly attachment = input<AttachmentView>();
+  readonly cipher = input<CipherView>();
+  readonly admin = input<boolean>(false);
 }

 describe("CipherAttachmentsComponent", () => {
  let component: CipherAttachmentsComponent;
  let fixture: ComponentFixture<CipherAttachmentsComponent>;
+  let submitBtnFixture: ComponentFixture<ButtonComponent>;
  const showToast = jest.fn();
  const cipherView = {
    id: "5555-444-3333",
@@ -63,17 +58,21 @@ describe("CipherAttachmentsComponent", () => {
  };

  const organization = new Organization();
+  organization.id = "org-123" as OrganizationId;
  organization.type = OrganizationUserType.Admin;
  organization.allowAdminAccessToAllCollectionItems = true;

  const cipherServiceGet = jest.fn().mockResolvedValue(cipherDomain);
+  const cipherServiceDecrypt = jest.fn().mockResolvedValue(cipherView);
  const saveAttachmentWithServer = jest.fn().mockResolvedValue(cipherDomain);

  const mockUserId = Utils.newGuid() as UserId;
  const accountService: FakeAccountService = mockAccountServiceWith(mockUserId);
+  const organizations$ = new BehaviorSubject<Organization[]>([organization]);

  beforeEach(async () => {
    cipherServiceGet.mockClear();
+    cipherServiceDecrypt.mockClear().mockResolvedValue(cipherView);
    showToast.mockClear();
    saveAttachmentWithServer.mockClear().mockResolvedValue(cipherDomain);

@@ -87,7 +86,7 @@ describe("CipherAttachmentsComponent", () => {
            get: cipherServiceGet,
            saveAttachmentWithServer,
            getKeyForCipherKeyDecryption: () => Promise.resolve(null),
-            decrypt: jest.fn().mockResolvedValue(cipherView),
+            decrypt: cipherServiceDecrypt,
          },
        },
        {
@@ -110,7 +109,9 @@ describe("CipherAttachmentsComponent", () => {
        },
        {
          provide: OrganizationService,
-          useValue: mock<OrganizationService>(),
+          useValue: {
+            organizations$: () => organizations$.asObservable(),
+          },
        },
      ],
    })
@@ -128,70 +129,67 @@ describe("CipherAttachmentsComponent", () => {
  beforeEach(() => {
    fixture = TestBed.createComponent(CipherAttachmentsComponent);
    component = fixture.componentInstance;
-    component.cipherId = "5555-444-3333" as CipherId;
-    component.submitBtn = TestBed.createComponent(ButtonComponent).componentInstance;
+    submitBtnFixture = TestBed.createComponent(ButtonComponent);
+
+    fixture.componentRef.setInput("cipherId", "5555-444-3333" as CipherId);
+    fixture.componentRef.setInput("submitBtn", submitBtnFixture.componentInstance);
    fixture.detectChanges();
  });

+  /**
+   * Helper to wait for the async initialization effect to complete
+   */
+  async function waitForInitialization(): Promise<void> {
+    await fixture.whenStable();
+    fixture.detectChanges();
+  }
+
  it("fetches cipherView using `cipherId`", async () => {
-    await component.ngOnInit();
+    await waitForInitialization();

    expect(cipherServiceGet).toHaveBeenCalledWith("5555-444-3333", mockUserId);
-    expect(component.cipher).toEqual(cipherView);
  });

-  it("sets testids for automation testing", () => {
+  it("sets testids for automation testing", async () => {
    const attachment = {
      id: "1234-5678",
      fileName: "test file.txt",
      sizeName: "244.2 KB",
    } as AttachmentView;

-    component.cipher.attachments = [attachment];
+    const cipherWithAttachments = { ...cipherView, attachments: [attachment] };
+    cipherServiceDecrypt.mockResolvedValue(cipherWithAttachments);

+    // Create fresh fixture to pick up the mock
+    fixture = TestBed.createComponent(CipherAttachmentsComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput("cipherId", "5555-444-3333" as CipherId);
    fixture.detectChanges();

+    await waitForInitialization();
+
    const fileName = fixture.debugElement.query(By.css('[data-testid="file-name"]'));
    const fileSize = fixture.debugElement.query(By.css('[data-testid="file-size"]'));

-    expect(fileName.nativeElement.textContent).toEqual(attachment.fileName);
+    expect(fileName.nativeElement.textContent.trim()).toEqual(attachment.fileName);
    expect(fileSize.nativeElement.textContent).toEqual(attachment.sizeName);
  });

  describe("bitSubmit", () => {
-    beforeEach(() => {
-      component.submitBtn.disabled.set(undefined);
-      component.submitBtn.loading.set(undefined);
-    });
-
    it("updates sets initial state of the submit button", async () => {
-      await component.ngOnInit();
+      // Create fresh fixture to properly test initial state
+      submitBtnFixture = TestBed.createComponent(ButtonComponent);
+      submitBtnFixture.componentInstance.disabled.set(undefined as unknown as boolean);

-      expect(component.submitBtn.disabled()).toBe(true);
-    });
+      fixture = TestBed.createComponent(CipherAttachmentsComponent);
+      component = fixture.componentInstance;
+      fixture.componentRef.setInput("submitBtn", submitBtnFixture.componentInstance);
+      fixture.componentRef.setInput("cipherId", "5555-444-3333" as CipherId);
+      fixture.detectChanges();

-    it("sets submitBtn loading state", () => {
-      jest.useFakeTimers();
+      await waitForInitialization();

-      component.bitSubmit.loading = true;
-
-      jest.runAllTimers();
-
-      expect(component.submitBtn.loading()).toBe(true);
-
-      component.bitSubmit.loading = false;
-
-      expect(component.submitBtn.loading()).toBe(false);
-    });
-
-    it("sets submitBtn disabled state", () => {
-      component.bitSubmit.disabled = true;
-
-      expect(component.submitBtn.disabled()).toBe(true);
-
-      component.bitSubmit.disabled = false;
-
-      expect(component.submitBtn.disabled()).toBe(false);
+      expect(submitBtnFixture.componentInstance.disabled()).toBe(true);
    });
  });

@@ -199,7 +197,7 @@ describe("CipherAttachmentsComponent", () => {
    let file: File;

    beforeEach(() => {
-      component.submitBtn.disabled.set(undefined);
+      submitBtnFixture.componentInstance.disabled.set(undefined as unknown as boolean);
      file = new File([""], "attachment.txt", { type: "text/plain" });

      const inputElement = fixture.debugElement.query(By.css("input[type=file]"));
@@ -215,11 +213,11 @@ describe("CipherAttachmentsComponent", () => {
    });

    it("sets value of `file` control when input changes", () => {
-      expect(component.attachmentForm.controls.file.value.name).toEqual(file.name);
+      expect(component.attachmentForm.controls.file.value?.name).toEqual(file.name);
    });

    it("updates disabled state of submit button", () => {
-      expect(component.submitBtn.disabled()).toBe(false);
+      expect(submitBtnFixture.componentInstance.disabled()).toBe(false);
    });
  });

@@ -250,6 +248,8 @@ describe("CipherAttachmentsComponent", () => {
      });

      it("shows error toast with server message when saveAttachmentWithServer fails", async () => {
+        await waitForInitialization();
+
        const file = { size: 100 } as File;
        component.attachmentForm.controls.file.setValue(file);

@@ -265,6 +265,8 @@ describe("CipherAttachmentsComponent", () => {
      });

      it("shows error toast with fallback message when error has no message property", async () => {
+        await waitForInitialization();
+
        const file = { size: 100 } as File;
        component.attachmentForm.controls.file.setValue(file);

@@ -279,6 +281,8 @@ describe("CipherAttachmentsComponent", () => {
      });

      it("shows error toast with string error message", async () => {
+        await waitForInitialization();
+
        const file = { size: 100 } as File;
        component.attachmentForm.controls.file.setValue(file);

@@ -296,13 +300,27 @@ describe("CipherAttachmentsComponent", () => {
    describe("success", () => {
      const file = { size: 524287999 } as File;

-      beforeEach(() => {
+      async function setupWithOrganization(adminAccess: boolean): Promise<void> {
+        // Create fresh fixture with organization set before cipherId
+        organization.allowAdminAccessToAllCollectionItems = adminAccess;
+
+        fixture = TestBed.createComponent(CipherAttachmentsComponent);
+        component = fixture.componentInstance;
+        submitBtnFixture = TestBed.createComponent(ButtonComponent);
+
+        // Set organizationId BEFORE cipherId so the effect picks it up
+        fixture.componentRef.setInput("organizationId", organization.id);
+        fixture.componentRef.setInput("submitBtn", submitBtnFixture.componentInstance);
+        fixture.componentRef.setInput("cipherId", "5555-444-3333" as CipherId);
+        fixture.detectChanges();
+
+        await waitForInitialization();
        component.attachmentForm.controls.file.setValue(file);
-        component.organization = organization;
-      });
+      }

      it("calls `saveAttachmentWithServer` with admin=false when admin permission is false for organization", async () => {
-        component.organization.allowAdminAccessToAllCollectionItems = false;
+        await setupWithOrganization(false);
+
        await component.submit();

        expect(saveAttachmentWithServer).toHaveBeenCalledWith(
@@ -314,13 +332,16 @@ describe("CipherAttachmentsComponent", () => {
      });

      it("calls `saveAttachmentWithServer` with admin=true when using admin API", async () => {
-        component.organization.allowAdminAccessToAllCollectionItems = true;
+        await setupWithOrganization(true);
+
        await component.submit();

        expect(saveAttachmentWithServer).toHaveBeenCalledWith(cipherDomain, file, mockUserId, true);
      });

      it("resets form and input values", async () => {
+        await setupWithOrganization(true);
+
        await component.submit();

        const fileInput = fixture.debugElement.query(By.css("input[type=file]"));
@@ -330,16 +351,19 @@ describe("CipherAttachmentsComponent", () => {
      });

      it("shows success toast", async () => {
+        await setupWithOrganization(true);
+
        await component.submit();

        expect(showToast).toHaveBeenCalledWith({
          variant: "success",
-          title: null,
          message: "attachmentSaved",
        });
      });

      it('emits "onUploadSuccess"', async () => {
+        await setupWithOrganization(true);
+
        const emitSpy = jest.spyOn(component.onUploadSuccess, "emit");

        await component.submit();
@@ -350,22 +374,36 @@ describe("CipherAttachmentsComponent", () => {
  });

  describe("removeAttachment", () => {
-    const attachment = { id: "1234-5678" } as AttachmentView;
+    const attachment = { id: "1234-5678", fileName: "test.txt" } as AttachmentView;

-    beforeEach(() => {
-      component.cipher.attachments = [attachment];
+    it("removes attachment from cipher", async () => {
+      // Create a new fixture with cipher that has attachments
+      const cipherWithAttachments = { ...cipherView, attachments: [attachment] };
+      cipherServiceDecrypt.mockResolvedValue(cipherWithAttachments);

+      // Create fresh fixture
+      fixture = TestBed.createComponent(CipherAttachmentsComponent);
+      component = fixture.componentInstance;
+      fixture.componentRef.setInput("cipherId", "5555-444-3333" as CipherId);
      fixture.detectChanges();
-    });

-    it("removes attachment from cipher", () => {
+      await waitForInitialization();
+
+      // Verify attachment is rendered
+      const attachmentsBefore = fixture.debugElement.queryAll(By.css('[data-testid="file-name"]'));
+      expect(attachmentsBefore.length).toEqual(1);
+
      const deleteAttachmentComponent = fixture.debugElement.query(
        By.directive(DeleteAttachmentComponent),
      ).componentInstance as DeleteAttachmentComponent;

      deleteAttachmentComponent.onDeletionSuccess.emit();

-      expect(component.cipher.attachments).toEqual([]);
+      fixture.detectChanges();
+
+      // After removal, there should be no attachments displayed
+      const attachmentItems = fixture.debugElement.queryAll(By.css('[data-testid="file-name"]'));
+      expect(attachmentItems.length).toEqual(0);
    });
  });
 });
--- a/libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.ts
+++ b/libs/vault/src/cipher-form/components/attachments/cipher-attachments.component.ts
@@ -1,17 +1,15 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { CommonModule } from "@angular/common";
 import {
-  AfterViewInit,
+  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  ElementRef,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  ViewChild,
+  effect,
  inject,
+  input,
+  output,
+  signal,
+  viewChild,
 } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import {
@@ -56,11 +54,10 @@ type CipherAttachmentForm = FormGroup<{
  file: FormControl<File | null>;
 }>;

-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-cipher-attachments",
  templateUrl: "./cipher-attachments.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    AsyncActionsModule,
    ButtonModule,
@@ -74,70 +71,50 @@ type CipherAttachmentForm = FormGroup<{
    DownloadAttachmentComponent,
  ],
 })
-export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
+export class CipherAttachmentsComponent {
  /** `id` associated with the form element */
  static attachmentFormID = "attachmentForm";

  /** Reference to the file HTMLInputElement */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @ViewChild("fileInput", { read: ElementRef }) private fileInput: ElementRef<HTMLInputElement>;
+  private readonly fileInput = viewChild("fileInput", { read: ElementRef<HTMLInputElement> });

  /** Reference to the BitSubmitDirective */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @ViewChild(BitSubmitDirective) bitSubmit: BitSubmitDirective;
+  readonly bitSubmit = viewChild(BitSubmitDirective);

  /** The `id` of the cipher in context */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input({ required: true }) cipherId: CipherId;
+  readonly cipherId = input.required<CipherId>();

  /** The organization ID if this cipher belongs to an organization */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() organizationId?: OrganizationId;
+  readonly organizationId = input<OrganizationId>();

  /** Denotes if the action is occurring from within the admin console */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() admin: boolean = false;
+  readonly admin = input<boolean>(false);

  /** An optional submit button, whose loading/disabled state will be tied to the form state. */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() submitBtn?: ButtonComponent;
+  readonly submitBtn = input<ButtonComponent>();

  /** Emits when a file upload is started */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onUploadStarted = new EventEmitter<void>();
+  readonly onUploadStarted = output<void>();

  /** Emits after a file has been successfully uploaded */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onUploadSuccess = new EventEmitter<void>();
+  readonly onUploadSuccess = output<void>();

  /** Emits when a file upload fails */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onUploadFailed = new EventEmitter<void>();
+  readonly onUploadFailed = output<void>();

  /** Emits after a file has been successfully removed */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
-  @Output() onRemoveSuccess = new EventEmitter<void>();
+  readonly onRemoveSuccess = output<void>();

-  organization: Organization;
-  cipher: CipherView;
+  protected readonly organization = signal<Organization | null>(null);
+  protected readonly cipher = signal<CipherView | null>(null);

  attachmentForm: CipherAttachmentForm = this.formBuilder.group({
-    file: new FormControl<File>(null, [Validators.required]),
+    file: new FormControl<File | null>(null, [Validators.required]),
  });

-  private cipherDomain: Cipher;
-  private activeUserId: UserId;
-  private destroy$ = inject(DestroyRef);
+  private cipherDomain: Cipher | null = null;
+  private activeUserId: UserId | null = null;
+  private readonly destroyRef = inject(DestroyRef);

  constructor(
    private cipherService: CipherService,
@@ -150,43 +127,52 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
    private organizationService: OrganizationService,
  ) {
    this.attachmentForm.statusChanges.pipe(takeUntilDestroyed()).subscribe((status) => {
-      if (!this.submitBtn) {
+      const btn = this.submitBtn();
+      if (!btn) {
        return;
      }

-      this.submitBtn.disabled.set(status !== "VALID");
-    });
-  }
-
-  async ngOnInit(): Promise<void> {
-    this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
-    // Get the organization to check admin permissions
-    this.organization = await this.getOrganization();
-    this.cipherDomain = await this.getCipher(this.cipherId);
-
-    this.cipher = await this.cipherService.decrypt(this.cipherDomain, this.activeUserId);
-
-    // Update the initial state of the submit button
-    if (this.submitBtn) {
-      this.submitBtn.disabled.set(!this.attachmentForm.valid);
-    }
-  }
-
-  ngAfterViewInit(): void {
-    this.bitSubmit.loading$.pipe(takeUntilDestroyed(this.destroy$)).subscribe((loading) => {
-      if (!this.submitBtn) {
-        return;
-      }
-
-      this.submitBtn.loading.set(loading);
+      btn.disabled.set(status !== "VALID");
    });

-    this.bitSubmit.disabled$.pipe(takeUntilDestroyed(this.destroy$)).subscribe((disabled) => {
-      if (!this.submitBtn) {
+    // Initialize data when cipherId input is available
+    effect(async () => {
+      const cipherId = this.cipherId();
+      if (!cipherId) {
        return;
      }

-      this.submitBtn.disabled.set(disabled);
+      this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+      // Get the organization to check admin permissions
+      this.organization.set(await this.getOrganization());
+      this.cipherDomain = await this.getCipher(cipherId);
+
+      if (this.cipherDomain && this.activeUserId) {
+        this.cipher.set(await this.cipherService.decrypt(this.cipherDomain, this.activeUserId));
+      }
+
+      // Update the initial state of the submit button
+      const btn = this.submitBtn();
+      if (btn) {
+        btn.disabled.set(!this.attachmentForm.valid);
+      }
+    });
+
+    // Sync bitSubmit loading/disabled state with submitBtn
+    effect(() => {
+      const bitSubmit = this.bitSubmit();
+      const btn = this.submitBtn();
+      if (!bitSubmit || !btn) {
+        return;
+      }
+
+      bitSubmit.loading$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((loading) => {
+        btn.loading.set(loading);
+      });
+
+      bitSubmit.disabled$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((disabled) => {
+        btn.disabled.set(disabled);
+      });
    });
  }

@@ -209,7 +195,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
    this.onUploadStarted.emit();

    const file = this.attachmentForm.value.file;
-    if (file === null) {
+    if (file == null) {
      this.toastService.showToast({
        variant: "error",
        title: this.i18nService.t("errorOccurred"),
@@ -228,24 +214,30 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
      return;
    }

+    if (!this.cipherDomain || !this.activeUserId) {
+      return;
+    }
+
    try {
      this.cipherDomain = await this.cipherService.saveAttachmentWithServer(
        this.cipherDomain,
        file,
        this.activeUserId,
-        this.organization?.canEditAllCiphers,
+        this.organization()?.canEditAllCiphers,
      );

      // re-decrypt the cipher to update the attachments
-      this.cipher = await this.cipherService.decrypt(this.cipherDomain, this.activeUserId);
+      this.cipher.set(await this.cipherService.decrypt(this.cipherDomain, this.activeUserId));

      // Reset reactive form and input element
-      this.fileInput.nativeElement.value = "";
+      const fileInputEl = this.fileInput();
+      if (fileInputEl) {
+        fileInputEl.nativeElement.value = "";
+      }
      this.attachmentForm.controls.file.setValue(null);

      this.toastService.showToast({
        variant: "success",
-        title: null,
        message: this.i18nService.t("attachmentSaved"),
      });

@@ -257,7 +249,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
      let errorMessage = this.i18nService.t("unexpectedError");
      if (typeof e === "string") {
        errorMessage = e;
-      } else if (e?.message) {
+      } else if (e instanceof Error && e?.message) {
        errorMessage = e.message;
      }

@@ -271,10 +263,19 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {

  /** Removes the attachment from the cipher */
  removeAttachment(attachment: AttachmentView) {
-    const index = this.cipher.attachments.indexOf(attachment);
+    const currentCipher = this.cipher();
+    if (!currentCipher?.attachments) {
+      return;
+    }
+
+    const index = currentCipher.attachments.indexOf(attachment);

    if (index > -1) {
-      this.cipher.attachments.splice(index, 1);
+      currentCipher.attachments.splice(index, 1);
+      // Trigger signal update by creating a new reference
+      this.cipher.set(
+        Object.assign(Object.create(Object.getPrototypeOf(currentCipher)), currentCipher),
+      );
    }

    this.onRemoveSuccess.emit();
@@ -286,7 +287,7 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
   * it will retrieve the cipher using the admin endpoint.
   */
  private async getCipher(id: CipherId): Promise<Cipher | null> {
-    if (id == null) {
+    if (id == null || !this.activeUserId) {
      return null;
    }

@@ -294,12 +295,13 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
    const localCipher = await this.cipherService.get(id, this.activeUserId);

    // If we got the cipher or there's no organization context, return the result
-    if (localCipher != null || !this.organizationId) {
+    if (localCipher != null || !this.organizationId()) {
      return localCipher;
    }

    // Only try the admin API if the user has admin permissions
-    if (this.organization != null && this.organization.canEditAllCiphers) {
+    const org = this.organization();
+    if (org != null && org.canEditAllCiphers) {
      const cipherResponse = await this.apiService.getCipherAdmin(id);
      const cipherData = new CipherData(cipherResponse);
      return new Cipher(cipherData);
@@ -312,7 +314,8 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
   * Gets the organization for the given organization ID
   */
  private async getOrganization(): Promise<Organization | null> {
-    if (!this.organizationId) {
+    const orgId = this.organizationId();
+    if (!orgId || !this.activeUserId) {
      return null;
    }

@@ -320,6 +323,41 @@ export class CipherAttachmentsComponent implements OnInit, AfterViewInit {
      this.organizationService.organizations$(this.activeUserId),
    );

-    return organizations.find((o) => o.id === this.organizationId) || null;
+    return organizations.find((o) => o.id === orgId) || null;
  }
+
+  protected fixOldAttachment = (attachment: AttachmentView) => {
+    return async () => {
+      const cipher = this.cipher();
+      const userId = this.activeUserId;
+
+      if (!attachment.id || !userId || !cipher) {
+        this.toastService.showToast({
+          variant: "error",
+          message: this.i18nService.t("errorOccurred"),
+        });
+        return;
+      }
+
+      try {
+        const updatedCipher = await this.cipherService.upgradeOldCipherAttachments(
+          cipher,
+          userId,
+          attachment.id,
+        );
+
+        this.cipher.set(updatedCipher);
+        this.toastService.showToast({
+          variant: "success",
+          message: this.i18nService.t("attachmentUpdated"),
+        });
+        this.onUploadSuccess.emit();
+      } catch {
+        this.toastService.showToast({
+          variant: "error",
+          message: this.i18nService.t("errorOccurred"),
+        });
+      }
+    };
+  };
 }
--- a/libs/vault/src/components/download-attachment/download-attachment.component.html
+++ b/libs/vault/src/components/download-attachment/download-attachment.component.html
@@ -1,9 +1,10 @@
-<button
-  *ngIf="!isDecryptionFailure"
-  [bitAction]="download"
-  bitIconButton="bwi-download"
-  buttonType="main"
-  size="small"
-  type="button"
-  [label]="'downloadAttachmentName' | i18n: attachment.fileName"
-></button>
+@if (!isDecryptionFailure()) {
+  <button
+    [bitAction]="download"
+    bitIconButton="bwi-download"
+    buttonType="main"
+    size="small"
+    type="button"
+    [label]="'downloadAttachmentName' | i18n: attachment().fileName"
+  ></button>
+}
--- a/libs/vault/src/components/download-attachment/download-attachment.component.spec.ts
+++ b/libs/vault/src/components/download-attachment/download-attachment.component.spec.ts
@@ -100,8 +100,8 @@ describe("DownloadAttachmentComponent", () => {
  beforeEach(() => {
    fixture = TestBed.createComponent(DownloadAttachmentComponent);
    component = fixture.componentInstance;
-    component.attachment = attachment;
-    component.cipher = cipherView;
+    fixture.componentRef.setInput("attachment", attachment);
+    fixture.componentRef.setInput("cipher", cipherView);
    fixture.detectChanges();
  });

@@ -123,7 +123,8 @@ describe("DownloadAttachmentComponent", () => {
    });

    it("hides download button when the attachment has decryption failure", () => {
-      component.attachment.fileName = DECRYPT_ERROR;
+      const decryptFailureAttachment = { ...attachment, fileName: DECRYPT_ERROR };
+      fixture.componentRef.setInput("attachment", decryptFailureAttachment);
      fixture.detectChanges();

      expect(fixture.debugElement.query(By.css("button"))).toBeNull();
@@ -156,7 +157,6 @@ describe("DownloadAttachmentComponent", () => {

        expect(showToast).toHaveBeenCalledWith({
          message: "errorOccurred",
-          title: null,
          variant: "error",
        });
      });
@@ -172,7 +172,6 @@ describe("DownloadAttachmentComponent", () => {

        expect(showToast).toHaveBeenCalledWith({
          message: "errorOccurred",
-          title: null,
          variant: "error",
        });
      });
--- a/libs/vault/src/components/download-attachment/download-attachment.component.ts
+++ b/libs/vault/src/components/download-attachment/download-attachment.component.ts
@@ -1,7 +1,5 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { CommonModule } from "@angular/common";
-import { Component, Input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 import { firstValueFrom } from "rxjs";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
@@ -17,38 +15,27 @@ import { AttachmentView } from "@bitwarden/common/vault/models/view/attachment.v
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { AsyncActionsModule, IconButtonModule, ToastService } from "@bitwarden/components";

-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
  selector: "app-download-attachment",
  templateUrl: "./download-attachment.component.html",
  imports: [AsyncActionsModule, CommonModule, JslibModule, IconButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadAttachmentComponent {
  /** Attachment to download */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input({ required: true }) attachment: AttachmentView;
+  readonly attachment = input.required<AttachmentView>();

  /** The cipher associated with the attachment */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input({ required: true }) cipher: CipherView;
+  readonly cipher = input.required<CipherView>();

-  // When in view mode, we will want to check for the master password reprompt
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() checkPwReprompt?: boolean = false;
+  /** When in view mode, we will want to check for the master password reprompt */
+  readonly checkPwReprompt = input<boolean>(false);

-  // Required for fetching attachment data when viewed from cipher via emergency access
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() emergencyAccessId?: EmergencyAccessId;
+  /** Required for fetching attachment data when viewed from cipher via emergency access */
+  readonly emergencyAccessId = input<EmergencyAccessId>();

-  /** When owners/admins can mange all items and when accessing from the admin console, use the admin endpoint */
-  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
-  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() admin?: boolean = false;
+  /** When owners/admins can manage all items and when accessing from the admin console, use the admin endpoint */
+  readonly admin = input<boolean>(false);

  constructor(
    private i18nService: I18nService,
@@ -59,26 +46,36 @@ export class DownloadAttachmentComponent {
    private cipherService: CipherService,
  ) {}

-  protected get isDecryptionFailure(): boolean {
-    return this.attachment.fileName === DECRYPT_ERROR;
-  }
+  protected readonly isDecryptionFailure = computed(
+    () => this.attachment().fileName === DECRYPT_ERROR,
+  );

  /** Download the attachment */
  download = async () => {
-    let url: string;
+    const attachment = this.attachment();
+    const cipher = this.cipher();
+    let url: string | undefined;
+
+    if (!attachment.id) {
+      this.toastService.showToast({
+        variant: "error",
+        message: this.i18nService.t("errorOccurred"),
+      });
+      return;
+    }

    try {
-      const attachmentDownloadResponse = this.admin
-        ? await this.apiService.getAttachmentDataAdmin(this.cipher.id, this.attachment.id)
+      const attachmentDownloadResponse = this.admin()
+        ? await this.apiService.getAttachmentDataAdmin(cipher.id, attachment.id)
        : await this.apiService.getAttachmentData(
-            this.cipher.id,
-            this.attachment.id,
-            this.emergencyAccessId,
+            cipher.id,
+            attachment.id,
+            this.emergencyAccessId(),
          );
      url = attachmentDownloadResponse.url;
    } catch (e) {
      if (e instanceof ErrorResponse && (e as ErrorResponse).statusCode === 404) {
-        url = this.attachment.url;
+        url = attachment.url;
      } else if (e instanceof ErrorResponse) {
        throw new Error((e as ErrorResponse).getSingleMessage());
      } else {
@@ -86,11 +83,18 @@ export class DownloadAttachmentComponent {
      }
    }

+    if (!url) {
+      this.toastService.showToast({
+        variant: "error",
+        message: this.i18nService.t("errorOccurred"),
+      });
+      return;
+    }
+
    const response = await fetch(new Request(url, { cache: "no-store" }));
    if (response.status !== 200) {
      this.toastService.showToast({
        variant: "error",
-        title: null,
        message: this.i18nService.t("errorOccurred"),
      });
      return;
@@ -99,26 +103,31 @@ export class DownloadAttachmentComponent {
    try {
      const userId = await firstValueFrom(this.stateProvider.activeUserId$);

+      if (!userId || !attachment.fileName) {
+        this.toastService.showToast({
+          variant: "error",
+          message: this.i18nService.t("errorOccurred"),
+        });
+        return;
+      }
+
      const decBuf = await this.cipherService.getDecryptedAttachmentBuffer(
-        this.cipher.id as CipherId,
-        this.attachment,
+        cipher.id as CipherId,
+        attachment,
        response,
        userId,
        // When the emergency access ID is present, the cipher is being viewed via emergency access.
        // Force legacy decryption in these cases.
-        this.emergencyAccessId ? true : false,
+        Boolean(this.emergencyAccessId()),
      );

      this.fileDownloadService.download({
-        fileName: this.attachment.fileName,
+        fileName: attachment.fileName,
        blobData: decBuf,
      });
-      // FIXME: Remove when updating file. Eslint update
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    } catch (e) {
+    } catch {
      this.toastService.showToast({
        variant: "error",
-        title: null,
        message: this.i18nService.t("errorOccurred"),
      });
    }