Added ability to see thumbs

ApryseSDK · Sep 18, 2020 · 678eb10 · 678eb10
1 parent da14a57
commit 678eb10
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/public/index.html b/public/index.html
@@ -19,7 +19,7 @@
       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>
+    <title>WebViewer Document Merge</title>
   </head>
   <body>
     <noscript>

diff --git a/src/components/Dropzone/Dropzone.js b/src/components/Dropzone/Dropzone.js
@@ -1,9 +1,25 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import './styles.css';
 
 const Dropzone = () => {
   const dropRef = useRef(null);
+  const fileListRef = useRef(null);
   const [docs, addDocument] = useState([]);
+  const [thumbArray, addThumbToArray] = useState([]);
+
+  useEffect(() => {
+    if (docs.length >= 1) {
+      const CoreControls = window.CoreControls;
+      CoreControls.setWorkerPath('/webviewer/lib/core');
+      const loadDocumentAndThumb = async () => {
+        const doc = await CoreControls.createDocument(docs[docs.length - 1]);
+        doc.loadThumbnailAsync(1, thumbnail => {
+          addThumbToArray([...thumbArray, thumbnail]);
+        });
+      }
+      loadDocumentAndThumb();     
+    }
+  }, [docs]);
 
   const mergeDocuments = async () => {
     const CoreControls = window.CoreControls;
@@ -59,19 +75,26 @@ const Dropzone = () => {
   };
 
   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>
+      <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>
+      <div className="list" ref={fileListRef}>
+        {thumbArray.map((thumb) => {
+          return <img src={thumb.toDataURL()} />
+        })}
+      </div>
     </div>
   );
 };

diff --git a/src/components/Dropzone/styles.css b/src/components/Dropzone/styles.css
@@ -4,4 +4,5 @@
   margin: 20px;
   flex: 1;
   margin: 8px;
+  height: 300px;
 }