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
+      <div>
-        file="/sample.pdf"
+        <div>
-        onLoadSuccess={onDocumentLoadSuccess}
+          <label htmlFor="file">Load from file:</label>{" "}
-        onLoadError={(err) => {
+          <input onChange={onFileChange} type="file" />
-          console.error(err);
+        </div>
-        }}
+        <div>
-        onSourceError={(err) => {
+          <Document file={file} onLoadSuccess={onDocumentLoadSuccess}>
-          console.error(err);
+            {Array.from({ length: numPages }, (_, index) => (
-        }}
+              <Page
-        onLoadProgress={(err) => {
+                key={`page_${index + 1}`}
-          console.error(err);
+                pageNumber={index + 1}
-        }}
+                renderAnnotationLayer={false}
-        onPassword={(err) => {
+                renderTextLayer={false}
-          console.error(err);
+              />
-        }}
+            ))}
-      >
-        <Page pageNumber={1} />
           </Document>
+        </div>
+      </div>
     </>
   );
 }