Initial commit

.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# WebViewer
+public/webviewer
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+package-lock.json
+/public/assets/webviewer/core
+/public/assets/webviewer/ui
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

CONTRIBUTING.md

@@ -0,0 +1,28 @@
+# Contributing to WebViewer - React sample
+
+## Issues
+1. Check existing issues (open/closed) to avoid duplicates.
+2. Be clear about what the problem is.
+3. Make sure to paste error output or logs.
+4. Code snapshot or demos on online code editor will be very helpful.
+
+## Pull requests
+1. Fork the repository.
+2. Create a branch from `master`.
+3. Update the source code using style guides described below.
+4. Lint your code with `npm run lint`.
+5. Commit and push the changes with descriptive messages.
+6. Create a pull request to `master`.
+
+\* Please note that all pull requests should be tied to an issue, and all but the most trivial pull requests should be discussed before hand.
+
+## Style guides
+- Tab indentation (size of 2 spaces).
+- `'` instead of `"`.
+- Curly braces for block statements.
+- 1TBS brace style.
+- Semicolon at the end of each statement.
+- Object shorthand for ES6.
+- Parenthesis around arrow function argument.
+- Minimum line breaks.
+- No `use strict`.

LICENSE

@@ -0,0 +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

README.md

@@ -1,2 +1,44 @@
-# document-merger-drag-n-drop
-Drag and drop PDFs, MS Office, images to assemble documents.
+# WebViewer - React - Dropzone sample
+
+[WebViewer](https://www.pdftron.com/webviewer) 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 UI](https://www.pdftron.com/downloads/pl/webviewer-ui.png)
+
+This repo is specifically designed for any users interested in integrating WebViewer into React project. You can watch [a video here](https://youtu.be/bVhWXuLSL0k) to help you get started.
+
+## Initial setup
+
+Before you begin, make sure your development environment includes [Node.js](https://nodejs.org/en/).
+
+## Install
+
+```
+git clone https://github.com/PDFTron/webviewer-react-sample.git
+cd webviewer-react-sample
+npm install
+```
+
+## Run
+
+```
+npm start
+```
+
+## Build
+
+Run `npm run build` to build the project. The build artifacts will be stored in the `build/` directory. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+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. 
+
+## WebViewer APIs
+
+See [API documentation](https://www.pdftron.com/documentation/web/guides/ui/apis).
+
+## Contributing
+
+See [contributing](./CONTRIBUTING.md).
+
+## License
+
+See [license](./LICENSE).
+![](https://onepixel.pdftron.com/webviewer-react-sample)

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "webviewer-react-sample",
+  "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"
+  },
+  "devDependencies": {
+    "btoa": "^1.2.1",
+    "download": "^7.1.0",
+    "fs-extra": "^7.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "postinstall": "node tools/copy-webviewer-files.js"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

public/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React Sample</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <script src="webviewer/lib/core/CoreControls.js"></script>
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/serve.json

@@ -0,0 +1,3 @@
+{
+    "cleanUrls": false
+}

src/App.css

@@ -0,0 +1,17 @@
+.App {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.App .header {
+  width: 100%;
+  height: 60px;
+  padding: 8px 8px 8px 16px;
+  box-sizing: border-box;
+  background: #00a5e4;
+  font-size: 1.2em;
+  line-height: 44px;
+  color: white;
+}

src/App.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Viewer from './components/Viewer/Viewer';
+import Dropzone from './components/Dropzone/Dropzone';
+import './App.css';
+
+const App = () => {
+  return (
+    <div className="App">
+      <Dropzone />
+      <Viewer docToLoad='/files/PDFTRON_about.pdf'/>
+      <Viewer docToLoad='/files/Newsletter.docx'/>
+    </div>
+  );
+};
+
+export default App;

src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/components/Dropzone/Dropzone.js

@@ -0,0 +1,79 @@
+import React, { useRef, useState } from 'react';
+import './styles.css';
+
+const Dropzone = () => {
+  const dropRef = useRef(null);
+  const [docs, addDocument] = useState([]);
+
+  const mergeDocuments = async () => {
+    const CoreControls = window.CoreControls;
+    CoreControls.setWorkerPath('/webviewer/lib/core');
+    if (docs.length > 0) {
+      const doc = await CoreControls.createDocument(docs[0]);
+      let i;
+      for (i = 1; i < docs.length; i++) {
+        let doc2 = await CoreControls.createDocument(docs[i]);
+        await doc.insertPages(doc2);
+      }
+
+      const data = await doc.getFileData();
+      const arr = new Uint8Array(data);
+      const blob = new Blob([arr], { type: 'application/pdf' });
+      downloadBlob(blob);
+    }
+    addDocument([]);
+  };
+
+  const downloadBlob = blob => {
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    const url = window.URL.createObjectURL(blob);
+    a.href = url;
+    a.download = 'merged-file.pdf';
+    a.click();
+    setTimeout(() => {
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    }, 0);
+  };
+
+  const onDropEvent = ev => {
+    ev.preventDefault();
+    const viewerID = ev.dataTransfer.getData('dataTransferWebViewerFrame');
+    const otherWebViewerIframe = window.parent.document.querySelector(
+      `#${viewerID}`,
+    );
+    if (!otherWebViewerIframe) {
+      console.warn('Could not find other instance of WebViewer');
+    }
+
+    const extractedDataPromise =
+      otherWebViewerIframe.contentWindow.extractedDataPromise;
+    if (!extractedDataPromise) {
+      console.warn('Could not retrieve data from other instance of WebViewer');
+    }
+
+    extractedDataPromise.then(docToMerge => {
+      addDocument([...docs, docToMerge]);
+    });
+  };
+
+  return (
+    <div
+      className="dropDiv"
+      ref={dropRef}
+      onDrop={ev => {
+        onDropEvent(ev);
+      }}
+      onDragOver={ev => {
+        ev.preventDefault();
+        ev.dataTransfer.dropEffect = 'move';
+      }}
+    >
+      <p>Drop the thumbs from the viewers here</p>
+      <button onClick={mergeDocuments}>Download</button>
+    </div>
+  );
+};
+
+export default Dropzone;

src/components/Dropzone/styles.css

@@ -0,0 +1,7 @@
+.dropDiv {
+  border: 5px dashed #1c6ea4;
+  padding: 20px;
+  margin: 20px;
+  flex: 1;
+  margin: 8px;
+}

src/components/Viewer/Viewer.js

@@ -0,0 +1,30 @@
+import React, { useRef, useEffect } from 'react';
+import WebViewer from '@pdftron/webviewer';
+
+const Viewer = ({ docToLoad }) => {
+  const viewer = useRef(null);
+
+  // if using a class, equivalent of componentDidMount
+  useEffect(() => {
+    WebViewer(
+      {
+        path: '/webviewer/lib',
+        initialDoc: docToLoad,
+        loadAsPDF: true,
+      },
+      viewer.current,
+    ).then(instance => {
+      const { docViewer, Annotations } = instance;
+      instance.enableFeatures([
+        'ThumbnailMultiselect',
+        'MultipleViewerMerging',
+      ]);
+      instance.enableElements(['documentControl']);
+      instance.openElements(['leftPanel']);
+    });
+  }, []);
+
+  return <div className="webviewer" ref={viewer}></div>;
+};
+
+export default Viewer;

src/index.css

@@ -0,0 +1,14 @@
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.webviewer {
+  flex: 1;
+  margin: 8px;
+  -webkit-box-shadow: 1px 1px 10px #999;
+          box-shadow: 1px 1px 10px #999;
+}

src/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));