feat: add image attachment preview

src/app/components/attachment-dialog/attachment-dialog.component.html

@@ -1,14 +1,18 @@
 <h2 mat-dialog-title>
-  {{ data.name }}
+  {{ file.name }}
 </h2>
 
 <mat-dialog-content>
-  <p>Description: {{ data.description }}</p>
-  <p>MimeType: {{ data.mimeType }}</p>
+  <p>Description: {{ file.description }}</p>
+  <p>MimeType: {{ file.mimeType }}</p>
 </mat-dialog-content>
 
 <mat-dialog-content>
+  @if(file.mimeType.includes('image/')) {
+  <img [src]="dataUrl" />
+  } @else {
   <pre>{{ fileContent }}</pre>
+  }
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">

src/app/components/attachment-dialog/attachment-dialog.component.scss

@@ -0,0 +1,11 @@
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}

src/app/components/attachment-dialog/attachment-dialog.component.ts

@@ -26,11 +26,24 @@ import { DocumentAttachment } from '@app/types/attachment';
   ],
 })
 export class AttachmentDialogComponent {
-  readonly data = inject<DocumentAttachment>(MAT_DIALOG_DATA);
+  readonly file = inject<DocumentAttachment>(MAT_DIALOG_DATA);
 
   fileContent: string | undefined;
+  dataUrl: string | undefined;
 
   constructor() {
-    this.fileContent = new TextDecoder().decode(this.data.data);
+    this.fileContent = new TextDecoder().decode(this.file.data);
+    this.dataUrl = this.toBase64Data(this.file);
+  }
+
+  private toBase64Data(file: DocumentAttachment) {
+    return `data:${file.mimeType};base64,${blobToBase64(this.file.data)}`;
   }
 }
+
+export const blobToBase64 = (blob: Uint8Array) => {
+  const output = [];
+  for (let i = 0, { length } = blob; i < length; i++)
+    output.push(String.fromCharCode(blob[i]));
+  return btoa(output.join(''));
+};

src/app/helpers/pdf.helper.ts

@@ -45,7 +45,11 @@ export const extractAttachments = (pdfDoc: PDFDocument) => {
       .lookup(PDFName.of('EF'), PDFDict)
       .lookup(PDFName.of('F'), PDFStream) as PDFRawStream;
 
-    const description = fileSpec.lookup(PDFName.of('Desc'), PDFString);
+    const description = fileSpec.lookup(
+      PDFName.of('Desc'),
+      PDFString,
+      PDFHexString
+    );
     const subtype = stream.dict.lookup(PDFName.of('Subtype'), PDFName);
 
     return {