Removed drag and drop file selection and replaced it with simple pdf loading using url

Author: AishwaryaSingh123950

examples/javascript-vite/index.html

@@ -12,15 +12,7 @@
     <header>
       <div class="info-text">
         <span>📄 Sample PDF loaded by default</span> &nbsp;•&nbsp;
-        <span class="upload-options">
-          <span class="drag-text">
-            <b>Drag and Drop your own PDF</b> &nbsp; or &nbsp;
-          </span>
-          <div class="upload-btn-wrapper">
-            <button class="btn">Upload a file</button>
-            <input id="selectFile" type="file" accept="application/pdf" />
-          </div>
-        </span>
+        <button id="openAnotherDoc" class="btn">Open another document</button>
       </div>
     </header>
     <div id="app" class="App"></div>

examples/javascript-vite/src/main.js

@@ -6,15 +6,10 @@
  * - npm package: Uses ES6 import (when USE_NPM=true)
  *
  * Features:
- * - Drag and drop PDF loading
- * - File picker for PDF selection
- * - Tracks unsaved annotations
  * - Loads a default sample PDF on page load
+ * - Simple button to load another document
  */
 
-import dragDrop from "drag-drop";
-import { processFiles } from "./utils.js";
-
 // Dynamic import for npm package mode
 let NutrientViewer;
 
@@ -39,68 +34,30 @@ async function initializeNutrientViewer() {
   return true;
 }
 
-let hasUnsavedAnnotations = false;
-let isAlreadyLoaded = false;
 let currentInstance = null;
 
 // Load the default sample PDF on page load
 window.addEventListener("DOMContentLoaded", async () => {
   const initialized = await initializeNutrientViewer();
   if (initialized) {
-    loadDefaultPDF();
+    loadDocument("nutrient-web-demo.pdf");
   }
 });
 
 /**
- * Loads the default sample PDF from the public/assets folder
- */
-async function loadDefaultPDF() {
-  try {
-    const response = await fetch("/assets/nutrient-web-demo.pdf");
-    const arrayBuffer = await response.arrayBuffer();
-    load([arrayBuffer]);
-  } catch (error) {
-    console.error("Failed to load default PDF:", error);
-    console.log("You can still upload your own PDF using the controls above.");
-  }
-}
-
-/**
- * Creates an onAnnotationsChange handler that keeps track of changes.
- * Skips the first call since `annotations.change` fires when the PDF viewer
- * is initialized and populated with annotations.
+ * Loads a PDF document from the public/assets folder
+ * @param {string} documentName - The name of the PDF file to load
  */
-const createOnAnnotationsChange = () => {
-  let initialized = false;
-
-  return () => {
-    if (initialized) {
-      hasUnsavedAnnotations = true;
-    } else {
-      initialized = true;
-    }
-  };
-};
-
-/**
- * Main load function invoked when a dropped or selected file (PDF)
- * has been successfully read as ArrayBuffer.
- */
-async function load(pdfArrayBuffers) {
-  const pdfArrayBuffer = pdfArrayBuffers[0];
-
-  if (isAlreadyLoaded && currentInstance) {
+async function loadDocument(documentName) {
+  if (currentInstance) {
     console.info("Destroyed previous instance");
     NutrientViewer.unload(".App");
-    hasUnsavedAnnotations = false;
     currentInstance = null;
   }
 
-  isAlreadyLoaded = true;
-
   const configuration = {
     container: ".App",
-    document: pdfArrayBuffer,
+    document: `/assets/${documentName}`,
   };
 
   // Add baseUrl for npm mode
@@ -110,64 +67,19 @@ async function load(pdfArrayBuffers) {
 
   try {
     currentInstance = await NutrientViewer.load(configuration);
-    currentInstance.addEventListener(
-      "annotations.change",
-      createOnAnnotationsChange(),
-    );
     console.log("Nutrient loaded", currentInstance);
   } catch (error) {
     console.error("Failed to load Nutrient:", error);
-    isAlreadyLoaded = false;
   }
 }
 
-/**
- * Helper functions for file handling
- */
-function onFail({ message }) {
-  alert(message);
-}
-
-function shouldPreventLoad() {
-  return (
-    hasUnsavedAnnotations &&
-    !window.confirm(
-      "You have unsaved changes. By continuing, you will lose those changes.",
-    )
-  );
-}
-
-/**
- * Handle drag and drop functionality
- */
-const destroyListener = dragDrop("body", {
-  onDrop: (files) => {
-    if (shouldPreventLoad()) {
-      return;
-    }
-
-    processFiles(files)
-      .then((arrayBuffers) => {
-        load(arrayBuffers);
-      })
-      .catch(onFail);
-  },
-});
-
-/**
- * Handle file picker functionality
- */
-document.querySelector("#selectFile").addEventListener("change", (event) => {
-  if (!event.target.files.length || shouldPreventLoad()) {
-    event.target.value = null;
-    return;
+// Add button handler for switching documents
+document.addEventListener("DOMContentLoaded", () => {
+  const openButton = document.querySelector("#openAnotherDoc");
+  if (openButton) {
+    openButton.addEventListener("click", () => {
+      // Switch to another document (you can change this filename as needed)
+      loadDocument("another-example.pdf");
+    });
   }
-
-  processFiles([...event.target.files])
-    .then((arrayBuffers) => {
-      load(arrayBuffers);
-    })
-    .catch(onFail);
-
-  event.target.value = null;
 });