diff --git a/LICENSE b/LICENSE
index c7c8280..8fc9527 100644
--- a/LICENSE
+++ b/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
\ No newline at end of file
+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.
diff --git a/README.md b/README.md
index d9156b3..52465c9 100644
--- a/README.md
+++ b/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.
-
+
-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).
diff --git a/package.json b/package.json
index 2d6e9b1..7d3ea40 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Dropzone/Dropzone.js b/src/components/Dropzone/Dropzone.js
index 07971f2..d94eb2f 100644
--- a/src/components/Dropzone/Dropzone.js
+++ b/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,7 +80,7 @@ const Dropzone = () => {
onDrop={ev => {
onDropEvent(ev);
}}
- onDragOver={ev => {
+ onDragOver={(ev) => {
ev.preventDefault();
ev.dataTransfer.dropEffect = 'move';
}}
@@ -88,9 +88,9 @@ const Dropzone = () => {
})
+ return