pdf

apps/web/components/pdf-viewer.js

@@ -2,32 +2,37 @@ import { useState } from "react";
 import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
 
 export default function PDFViewer() {
+  const [file, setFile] = useState("./sample.pdf");
   const [numPages, setNumPages] = useState(null);
 
+  function onFileChange(event) {
+    setFile(event.target.files[0]);
+  }
+
   function onDocumentLoadSuccess({ numPages: nextNumPages }) {
     setNumPages(nextNumPages);
   }
 
   return (
     <>
-      <Document
-        file="/sample.pdf"
-        onLoadSuccess={onDocumentLoadSuccess}
-        onLoadError={(err) => {
-          console.error(err);
-        }}
-        onSourceError={(err) => {
-          console.error(err);
-        }}
-        onLoadProgress={(err) => {
-          console.error(err);
-        }}
-        onPassword={(err) => {
-          console.error(err);
-        }}
-      >
-        <Page pageNumber={1} />
-      </Document>
+      <div>
+        <div>
+          <label htmlFor="file">Load from file:</label>{" "}
+          <input onChange={onFileChange} type="file" />
+        </div>
+        <div>
+          <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
+            {Array.from({ length: numPages }, (_, index) => (
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+              />
+            ))}
+          </Document>
+        </div>
+      </div>
     </>
   );
 }