diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx index aa79b73..865310e 100644 --- a/src/pages/verify/index.tsx +++ b/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) } diff --git a/src/utils/file.ts b/src/utils/file.ts index 619ecff..401d3c4 100644 --- a/src/utils/file.ts +++ b/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 => { 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) } diff --git a/src/utils/pdf.ts b/src/utils/pdf.ts index cef12c2..ce2f132 100644 --- a/src/utils/pdf.ts +++ b/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 => { +const readPdf = (file: File): Promise => { 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 => { * Converts pdf to the images * @param data pdf file bytes */ -const pdfToImages = async (data: any): Promise => { +const pdfToImages = async (data: string | ArrayBuffer): Promise => { 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 -} \ No newline at end of file + groupMarksByFileNamePage +}