src/components/DrawPDFFields/index.tsx

@@ -8,10 +8,11 @@ import { ProfileMetadata, User } from '../../types';
 import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
 import { truncate } from 'lodash';
 import { hexToNpub } from '../../utils';
+import { toPdfFiles } from '../../utils/pdf.ts'
 PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
 
 interface Props {
-  selectedFiles: any[]
+  selectedFiles: File[]
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
   onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
@@ -315,73 +316,12 @@ export const DrawPDFFields = (props: Props) => {
    * creates the pdfFiles object and sets to a state
    */
   const parsePdfPages = async () => {
-    const pdfFiles: PdfFile[] = []
+    const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
-
+    console.log('pdf files: ', pdfFiles);
-    for (const file of selectedFiles) {
-      if (file.type.toLowerCase().includes('pdf')) {
-        const data = await readPdf(file)
-        const pages = await pdfToImages(data)
-
-        pdfFiles.push({
-          file: file,
-          pages: pages,
-          expanded: false
-        })
-      }
-    }
     
     setPdfFiles(pdfFiles)
   }
 
-  /**
-   * Converts pdf to the images
-   * @param data pdf file bytes
-   */
-  const pdfToImages = async (data: any): Promise<PdfPage[]> => {
-    const images: string[] = [];
-    const pdf = await PDFJS.getDocument(data).promise;
-    const canvas = document.createElement("canvas");
-  
-    for (let i = 0; i < pdf.numPages; i++) {
-      const page = await pdf.getPage(i + 1);
-      const viewport = page.getViewport({ scale: 3 });
-      const context = canvas.getContext("2d");
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-      await page.render({ canvasContext: context!, viewport: viewport }).promise;
-      images.push(canvas.toDataURL());
-    }
-  
-    return Promise.resolve(images.map((image) => {
-      return {
-        image,
-        drawnFields: []
-      }
-    }))
-  }
-  
-  /**
-   * Reads the pdf file binaries 
-   */
-  const readPdf = (file: File) => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-  
-      reader.onload = (e: any) => {
-        const data = e.target.result
-    
-        resolve(data)
-      };
-      
-      reader.onerror = (err) => {
-        console.error('err', err)
-        reject(err)
-      };
-
-      reader.readAsDataURL(file);
-    })
-  }
-
   /**
    * 
    * @returns if expanded pdf accordion is present

src/pages/create/index.tsx

@@ -340,7 +340,7 @@ export const CreatePage = () => {
   }
 
   const createMarkConfig = (fileHashes: { [key: string]: string }) => {
-    let markConfig: any = {}
+    const markConfig: any = {}
     
     drawnPdfs.forEach(drawnPdf => {
       const fileHash = fileHashes[drawnPdf.file.name]

src/utils/pdf.ts

@@ -0,0 +1,78 @@
+import { PdfFile, PdfPage } from '../types/drawing.ts'
+import * as PDFJS from 'pdfjs-dist'
+PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
+
+const toFile = (arrayBuffer: ArrayBuffer, fileName: string) : File => {
+  const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+  return new File([blob], fileName, { type: "application/pdf" });
+}
+
+const toPdfFile = async (file: File): Promise<PdfFile> => {
+  const data = await readPdf(file)
+  const pages = await pdfToImages(data)
+  return { file, pages, expanded: false }
+}
+
+const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
+  return Promise.all(
+    selectedFiles
+      .filter(isPdf)
+      .map(toPdfFile));
+}
+
+const isPdf = (file: File) => file.type.toLowerCase().includes('pdf');
+
+/**
+ * Reads the pdf file binaries
+ */
+const readPdf = (file: File) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e: any) => {
+      const data = e.target.result
+
+      resolve(data)
+    };
+
+    reader.onerror = (err) => {
+      console.error('err', err)
+      reject(err)
+    };
+
+    reader.readAsDataURL(file);
+  })
+}
+
+/**
+ * Converts pdf to the images
+ * @param data pdf file bytes
+ */
+const pdfToImages = async (data: any): Promise<PdfPage[]> => {
+  const images: string[] = [];
+  const pdf = await PDFJS.getDocument(data).promise;
+  const canvas = document.createElement("canvas");
+
+  for (let i = 0; i < pdf.numPages; i++) {
+    const page = await pdf.getPage(i + 1);
+    const viewport = page.getViewport({ scale: 3 });
+    const context = canvas.getContext("2d");
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    await page.render({ canvasContext: context!, viewport: viewport }).promise;
+    images.push(canvas.toDataURL());
+  }
+
+  return Promise.resolve(images.map((image) => {
+    return {
+      image,
+      drawnFields: []
+    }
+  }))
+}
+
+export {
+  toFile,
+  toPdfFile,
+  toPdfFiles
+}