update wv to v11

LICENSE

@@ -1,2 +1,2 @@
-Copyright 2020 PDFTron Systems Inc. All rights reserved.
-WebViewer React UI project/codebase or any derived works is only permitted in solutions with an active commercial PDFTron WebViewer license. For exact licensing terms please refer to your commercial WebViewer license. For use in other scenario, please contact sales@pdftron.com
+Copyright 2024 Apryse Software Inc. All rights reserved.
+WebViewer React UI project/codebase or any derived works is only permitted in solutions with an active commercial Apryse WebViewer license. For exact licensing terms refer to your commercial WebViewer license. For use in other scenario, contact sales@apryse.com.

README.md

@@ -1,20 +1,25 @@
 # WebViewer - React - Dropzone sample
 
-[WebViewer](https://www.pdftron.com/documentation/web/) is a powerful JavaScript-based PDF Library that's part of the [PDFTron PDF SDK](https://www.pdftron.com). It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.
+[WebViewer](https://apryse.com/products/webviewer) is a powerful JavaScript-based PDF Library that is part of the [Apryse SDK](https://apryse.com/). It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate, and manipulate PDFs that can be embedded into any web project.
 
-You can [watch a video](https://youtu.be/ZKt38W7Ro4Y) that walks through the demo of this app.
+You can [watch a video](https://youtu.be/ZKt38W7Ro4Y) that demonstrates the app from the end-user’s perspective.
 
-![WebViewer UI](https://github.com/PDFTron/webviewer-document-merge/blob/master/screen2.png)
+![WebViewer UI](screen2.png)
 
-This repo is specifically designed for any users interested in implementing a dropzone where users can drag and drop thumbnails from the two viewers and download the resulting file. 
+This repo is specifically designed for any user interested in implementing a drop zone, where users can drag and drop thumbnails from two viewers and download the resulting file. 
 
 ## Initial setup
 
-Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
+1. [Node.js](https://nodejs.org/en).
+2. IDE used in this sample is Visual Studio Code with NPM commands within its terminal.
+3. [GitHub command line](https://github.com/git-guides/install-git) `git`.
+
 
 ## Install
 
 ```
+gh repo clone ApryseSDK/webviewer-document-merge
+cd webviewer-angularjs-sample
 npm install
 ```
 
@@ -30,14 +35,24 @@ Run `npm run build` to build the project. The build artifacts will be stored in
 
 To test the build directory locally you can use [serve](https://www.npmjs.com/package/serve) or [http-server](https://www.npmjs.com/package/http-server). In case of serve, by default it strips the .html extension stripped from paths. We added serve.json configuration to disable cleanUrls option. 
 
+
+
+Visit PDFTron's [WebViewer](https://docs.apryse.com/documentation/web/) page to see what else you can do with the WebViewer!
+
 ## WebViewer APIs
 
-See [API documentation](https://www.pdftron.com/documentation/web/guides/ui/apis).
+* [API documentation](https://docs.apryse.com/api/web/WebViewerInstance.html)
+* [@pdftron/webviewer-react API documentation](https://github.com/ApryseSDK/webviewer-react)
+
+## Showcase
+
+Refer to a running sample on Apryse SDK [showcase page](https://showcase.apryse.com/).
 
 ## Contributing
 
-See [contributing](./CONTRIBUTING.md).
+Any submission to this repo is governed by these [guidelines](/CONTRIBUTING.md).
+
 
 ## License
 
-See [license](./LICENSE).
+For licensing, refer to [License](LICENSE).

package.json

@@ -3,16 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@pdftron/webviewer": "^7.0.1",
-    "@pdftron/webviewer-react-toolkit": "^0.6.0",
-    "react": "^16.6.0",
-    "react-dom": "^16.6.0",
-    "react-scripts": "2.1.1"
+    "@pdftron/webviewer": "^11.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1"
   },
   "devDependencies": {
-    "btoa": "^1.2.1",
-    "download": "^7.1.0",
-    "fs-extra": "^7.0.1"
+    "fs-extra": "^11.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Dropzone/Dropzone.js

@@ -3,30 +3,29 @@ import './styles.css';
 
 const Dropzone = () => {
   const dropRef = useRef(null);
-  const fileListRef = useRef(null);
   const [docs, addDocument] = useState([]);
   const [thumbArray, addThumbToArray] = useState([]);
-  const CoreControls = window.CoreControls;
-  CoreControls.setWorkerPath('/webviewer/lib/core');
 
   useEffect(() => {
     if (docs.length >= 1) {
+      const Core = window.instance.Core;
       const loadDocumentAndThumb = async () => {
-        const doc = await CoreControls.createDocument(docs[docs.length - 1]);
-        doc.loadThumbnailAsync(1, thumbnail => {
+        const doc = await Core.createDocument(docs[docs.length - 1]);
+        doc.loadThumbnail(1, (thumbnail) => {
           addThumbToArray([...thumbArray, thumbnail]);
         });
       }
-      loadDocumentAndThumb();     
+      loadDocumentAndThumb();
     }
   }, [docs]);
 
   const mergeDocuments = async () => {
+    const Core = window.instance.Core;
     if (docs.length > 0) {
-      const doc = await CoreControls.createDocument(docs[0]);
+      const doc = await Core.createDocument(docs[0]);
       let i;
       for (i = 1; i < docs.length; i++) {
-        let doc2 = await CoreControls.createDocument(docs[i]);
+        let doc2 = await Core.createDocument(docs[i]);
         await doc.insertPages(doc2);
       }
 
@@ -36,9 +35,10 @@ const Dropzone = () => {
       downloadBlob(blob);
     }
     addDocument([]);
+    addThumbToArray([]);
   };
 
-  const downloadBlob = blob => {
+  const downloadBlob = (blob) => {
     const a = document.createElement('a');
     document.body.appendChild(a);
     const url = window.URL.createObjectURL(blob);
@@ -51,7 +51,7 @@ const Dropzone = () => {
     }, 0);
   };
 
-  const onDropEvent = ev => {
+  const onDropEvent = (ev) => {
     ev.preventDefault();
     const viewerID = ev.dataTransfer.getData('dataTransferWebViewerFrame');
     const otherWebViewerIframe = window.parent.document.querySelector(
@@ -80,17 +80,17 @@ const Dropzone = () => {
         onDrop={ev => {
           onDropEvent(ev);
         }}
-        onDragOver={ev => {
+        onDragOver={(ev) => {
           ev.preventDefault();
           ev.dataTransfer.dropEffect = 'move';
         }}
       >
         <p>Drop the thumbs from the viewers here</p>
         <button onClick={mergeDocuments}>Download</button>
       </div>
-      <div className="list" ref={fileListRef}>
+      <div className="list">
         {thumbArray.map((thumb, i) => {
-          return <img key={i} src={thumb.toDataURL()} />
+          return <img key={i} src={thumb.toDataURL()} alt={i} />
         })}
       </div>
     </div>

src/components/Viewer/Viewer.js

@@ -5,20 +5,24 @@ const Viewer = ({ docToLoad }) => {
   const viewer = useRef(null);
 
   useEffect(() => {
-    WebViewer(
+    WebViewer.Iframe(
       {
         path: '/webviewer/lib',
         initialDoc: docToLoad,
+        ui: 'legacy',
         loadAsPDF: true,
       },
       viewer.current,
-    ).then(instance => {
-      instance.enableFeatures([
+    ).then((instance) => {
+      if (!window.instance) {
+        window.instance = instance;
+      }
+      instance.UI.enableFeatures([
         'ThumbnailMultiselect',
         'MultipleViewerMerging',
       ]);
-      instance.enableElements(['documentControl']);
-      instance.openElements(['leftPanel']);
+      instance.UI.enableElements(['documentControl']);
+      instance.UI.openElements(['leftPanel']);
     });
   }, []);