src/pages/verify/index.tsx

@@ -31,7 +31,7 @@ import {
   addMarks,
   convertToPdfBlob,
   convertToPdfFile,
-  groupMarksByPage,
+  groupMarksByFileNamePage,
   inPx
 } from '../../utils/pdf.ts'
 import { State } from '../../store/rootReducer.ts'
@@ -415,10 +415,10 @@ export const VerifyPage = () => {
     zip.file('meta.json', stringifiedMeta)
 
     const marks = extractMarksFromSignedMeta(updatedMeta)
-    const marksByPage = groupMarksByPage(marks)
+    const marksByPage = groupMarksByFileNamePage(marks)
 
     for (const [fileName, pdf] of Object.entries(files)) {
-      const pages = await addMarks(pdf.file, marksByPage)
+      const pages = await addMarks(pdf.file, marksByPage[fileName])
       const blob = await convertToPdfBlob(pages)
       zip.file(`files/${fileName}`, blob)
     }

src/utils/file.ts

@@ -1,6 +1,6 @@
 import { Meta } from '../types'
 import { extractMarksFromSignedMeta } from './mark.ts'
-import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
+import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
 import JSZip from 'jszip'
 import { PdfFile } from '../types/drawing.ts'
 
@@ -10,10 +10,10 @@ const getZipWithFiles = async (
 ): Promise<JSZip> => {
   const zip = new JSZip()
   const marks = extractMarksFromSignedMeta(meta)
-  const marksByPage = groupMarksByPage(marks)
+  const marksByFileNamePage = groupMarksByFileNamePage(marks)
 
   for (const [fileName, pdf] of Object.entries(files)) {
-    const pages = await addMarks(pdf.file, marksByPage)
+    const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
     const blob = await convertToPdfBlob(pages)
     zip.file(`files/${fileName}`, blob)
   }

src/utils/pdf.ts

@@ -71,14 +71,19 @@ const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
 /**
  * Reads the pdf file binaries
  */
-const readPdf = (file: File): Promise<string> => {
+const readPdf = (file: File): Promise<string | ArrayBuffer> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
 
-    reader.onload = (e: any) => {
-      const data = e.target.result
-
-      resolve(data)
+    reader.onload = (e) => {
+      const data = e.target?.result
+      // Make sure we only resolve for string or ArrayBuffer type
+      // They are accepted by PDFJS.getDocument function
+      if (data && typeof data !== 'undefined') {
+        resolve(data)
+      } else {
+        reject(new Error('File is null or undefined'))
+      }
     }
 
     reader.onerror = (err) => {
@@ -94,7 +99,7 @@ const readPdf = (file: File): Promise<string> => {
  * Converts pdf to the images
  * @param data pdf file bytes
  */
-const pdfToImages = async (data: any): Promise<PdfPage[]> => {
+const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
   const images: string[] = []
   const pdf = await PDFJS.getDocument(data).promise
   const canvas = document.createElement('canvas')
@@ -142,7 +147,8 @@ const addMarks = async (
     canvas.width = viewport.width
     await page.render({ canvasContext: context!, viewport: viewport }).promise
 
-    marksPerPage[i]?.forEach((mark) => draw(mark, context!))
+    if (marksPerPage && Object.hasOwn(marksPerPage, i))
+      marksPerPage[i]?.forEach((mark) => draw(mark, context!))
 
     images.push(canvas.toDataURL())
   }
@@ -230,11 +236,11 @@ const convertToPdfFile = async (
  * @function scaleMark scales remaining marks in line with SCALE
  * @function byPage groups remaining Marks by their page marks.location.page
  */
-const groupMarksByPage = (marks: Mark[]) => {
+const groupMarksByFileNamePage = (marks: Mark[]) => {
   return marks
     .filter(hasValue)
     .map(scaleMark)
-    .reduce<{ [key: number]: Mark[] }>(byPage, {})
+    .reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
 }
 
 /**
@@ -245,10 +251,21 @@ const groupMarksByPage = (marks: Mark[]) => {
  * @param obj - accumulator in the reducer callback
  * @param mark - current value, i.e. Mark being examined
  */
-const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => {
-  const key = mark.location.page
-  const curGroup = obj[key] ?? []
-  return { ...obj, [key]: [...curGroup, mark] }
+const byPage = (
+  obj: { [filename: string]: { [page: number]: Mark[] } },
+  mark: Mark
+) => {
+  const filename = mark.fileName
+  const pageNumber = mark.location.page
+  const pages = obj[filename] ?? {}
+  const marks = pages[pageNumber] ?? []
+  return {
+    ...obj,
+    [filename]: {
+      ...pages,
+      [pageNumber]: [...marks, mark]
+    }
+  }
 }
 
 export {
@@ -259,5 +276,5 @@ export {
   convertToPdfFile,
   addMarks,
   convertToPdfBlob,
-  groupMarksByPage
+  groupMarksByFileNamePage
 }