Display Files in the Document Viewer - ReactJS

///<reference path="../../public/Common/Leadtools.d.ts"/> 
///<reference path="../../public/Common/Leadtools.Document.d.ts"/> 
///<reference path="../../public/Common/Leadtools.Document.Viewer.d.ts"/> 
///<reference path="../../public/Common/jquery.d.ts" /> 
import { useEffect, useRef, useState } from "react"; 
 
interface Props { 
    inputFile?: string; 
    interactiveMode: string; 
} 
 
function DocumentViewer({ inputFile, interactiveMode }: Props) { 
    const [documentViewer, setDocumentViewer] = useState<lt.Document.Viewer.DocumentViewer>(); 
    const viewer = useRef(null); 
    const thumbnail = useRef(null); 
 
    // On load connect to DocumentService and create DocumentViewer 
    useEffect(() => { 
        connectToDocumentService(); 
        createDocumentViewer(); 
    }, []); 
 
    // Update the document's file when a new file is uploaded 
    useEffect(() => { 
        updateDocumentViewer(); 
    }, [inputFile]); 
 
    // Update the DocumentViewer's interractive mode when a new one is selected 
    useEffect(() => { 
        updateDocumentInteractiveMode(); 
    }, [interactiveMode]); 
 
    async function updateDocumentViewer() { 
        if (documentViewer && inputFile) { 
            try { 
                const response = await fetch(inputFile); 
                const blob = await response.blob(); 
                const doc = await lt.Document.DocumentFactory.loadFromFile(blob, new lt.Document.LoadDocumentOptions()); 
                if (doc) { 
                    documentViewer.setDocument(doc); 
                } 
            } catch (error) { 
                console.log(error); 
            } 
        } 
    } 
 
    function updateDocumentInteractiveMode() { 
        documentViewer?.commands.run(interactiveMode, null); 
    } 
 
    async function connectToDocumentService() { 
        try { 
            lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
            lt.Document.DocumentFactory.servicePath = ""; 
            lt.Document.DocumentFactory.serviceApiPath = "api"; 
            await lt.Document.DocumentFactory.verifyService(); 
            console.log("Service Connection Verified!"); 
        } catch (error) { 
            console.error(error); 
            console.log("Service not properly connected."); 
        } 
    } 
 
    async function createDocumentViewer() { 
        try { 
            const createOptions = new lt.Document.Viewer.DocumentViewerCreateOptions(); 
            if (viewer.current && thumbnail.current) { 
                createOptions.viewContainer = viewer.current; 
                createOptions.thumbnailsContainer = thumbnail.current; 
                createOptions.viewCreateOptions.useElements = true; 
                createOptions.thumbnailsCreateOptions.useElements = false; 
                const docViewer = lt.Document.Viewer.DocumentViewerFactory.createDocumentViewer(createOptions); 
                docViewer.view.preferredItemType = lt.Document.Viewer.DocumentViewerItemType.image; 
                const url = "https://demo.leadtools.com/images/pdf/leadtools.pdf"; 
                const doc = await lt.Document.DocumentFactory.loadFromUri(url, new lt.Document.LoadDocumentOptions()); 
                if (doc) { 
                    docViewer.setDocument(doc); 
                    docViewer.commands.run(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom, null); 
                    setDocumentViewer(docViewer); 
                } 
            } 
        } catch (error) { 
            console.error(error); 
            console.log("DocumentViewer not created properly"); 
        } 
    } 
 
    return ( 
        <div className="container"> 
            <div id="thumbnail" ref={thumbnail} /> 
            <div id="viewer" ref={viewer} /> 
        </div> 
    ); 
} 
 
export default DocumentViewer; 

import { ChangeEvent, useState } from "react"; 
 
function useToolbar() { 
    const [file, setFile] = useState<string>(); 
    const [interactiveMode, setInteractiveMode] = useState<string>(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom); 
 
    const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => { 
        if (e.target.files) { 
            const selectedFile = e?.target?.files[0]; 
            if (selectedFile) { 
                const newChosenFile = URL.createObjectURL(selectedFile); 
                setFile(newChosenFile); 
            } 
        } 
    }; 
 
    const handleDropDownChange = (button: string) => { 
        if (button === "selectText") { 
            setInteractiveMode(lt.Document.Viewer.DocumentViewerCommands.interactiveSelectText); 
        } else if (button === "panZoom") { 
            setInteractiveMode(lt.Document.Viewer.DocumentViewerCommands.interactivePanZoom); 
        } 
    }; 
 
    return { 
        file, 
        interactiveMode, 
        render: ( 
            <div className="Toolbar"> 
                <h2 className="Toolbar-title">LEADTOOLS Document Viewer</h2> 
                <div> 
                    <input type="file" onChange={handleFileUpload} /> 
                    <select onChange={(e) => handleDropDownChange(e.target.value)}> 
                        <option value="panZoom">Pan Zoom</option> 
                        <option value="selectText">Select Text</option> 
                    </select> 
                </div> 
            </div> 
        ), 
    }; 
} 
 
export default useToolbar; 

///<reference path="../public/Common/Leadtools.d.ts"/> 
import "./App.css"; 
import { useEffect } from "react"; 
import DocumentViewer from "./Components/DocumentViewer"; 
import useToolbar from "./Components/useToolbar"; 
 
function App() { 
    useEffect(() => { 
        init(); 
    }, []); 
 
    const { file, interactiveMode, render } = useToolbar(); 
 
    function init() { 
        const licenseUrl = "https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt"; 
        const developerKey = "EVAL"; 
        lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function (setLicenseResult) { 
            if (setLicenseResult.result) { 
                console.log("LEADTOOLS client license set successfully"); 
            } else { 
                const msg = "LEADTOOLS License is missing, invalid or expired\nError:\n"; 
                console.log(msg); 
                alert(msg); 
            } 
        }); 
    } 
 
    return ( 
        <> 
            {render} 
            <DocumentViewer inputFile={file} interactiveMode={interactiveMode} /> 
        </> 
    ); 
} 
 
export default App;