Detect and Extract Barcodes - React JS

class DocumentHelper { 
    // Startup function 
    static connectToDocumentService = () => { 
        let serviceStatus; 
        document.addEventListener("DOMContentLoaded", function () { 
        serviceStatus = document.getElementById("serviceStatus"); 
        let output = document.getElementById("output"); 
        // To communicate with the DocumentsService, it must be running! 
        // Change these parameters to match the path to the service. 
        lt.Document.DocumentFactory.serviceHost = "http://localhost:40000"; 
        lt.Document.DocumentFactory.servicePath = ""; 
        lt.Document.DocumentFactory.serviceApiPath = "api"; 
        serviceStatus.innerHTML = "Connecting to service " + lt.Document.DocumentFactory.serviceUri; 
        lt.Document.DocumentFactory.verifyService() 
            .done(function (serviceData) { 
     
                let setStatus = function(){ 
                    serviceStatus.innerHTML = ("\n" + "\u2022" + " Service connection verified!"); 
                } 
            setTimeout(setStatus, 1500); 
            }) 
            .fail(showServiceError) 
            .fail(function () { 
                serviceStatus.innerHTML = "Service not properly connected."; 
            }); 
        }); 
    } 
 
    static showServiceError = (jqXHR, statusText, errorThrown) => { 
      alert("Error returned from service. See the console for details."); 
      const serviceError = lt.Document.ServiceError.parseError(jqXHR, statusText, errorThrown); 
      console.error(serviceError); 
    } 
    static log = (message, data) => { 
      const outputElement = document.getElementById("output"); 
      if (outputElement) { 
        const time = (new Date()).toLocaleTimeString(); 
        const textElement = document.createElement("p"); 
        textElement.innerHTML = "\u2022" + " [" + time + "]: " + message; 
        textElement.style = "text-align: left;"; 
        outputElement.appendChild(textElement, outputElement.firstChild); 
      } 
      if (!data) 
        console.log(message); 
      else 
        console.log(message, data); 
    } 
} 

import React from 'react'; 
import './App.css'; 
 
function App() { 
  return ( 
    <div className="App"> 
      <header className="App-header"> 
        <p id="serviceStatus"></p> 
        <h3>React Barcode Example </h3> 
        <div id="btnMenu"> 
        <input type="file" id="file-input" accept=".jpg,.jpeg,.png"></input> 
        <button id="addToViewer">Add Image To Viewer</button> 
        <button id="barcodeButton">Read Barcodes</button> 
        </div> 
        <div id="imageViewerDiv"></div> 
        <h6 id="output"></h6> 
      </header> 
    </div> 
  ); 
} 
 
export default App; 

//Create an Image Viewer 
let imageViewerDiv = document.getElementById("imageViewerDiv"); 
const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, 1, imageViewer.defaultZoomOrigin); 
this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
this.imageViewer.autoCreateCanvas = true; 
this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
//Create variables Grabbing the HTML elements 
let fileList = document.getElementById("file-input"); 
let btn = document.getElementById("addToViewer"); 
 
btn.onclick = (function () { 
  //create our iterator 
  // let i = 0; 
  //initially set our target to the first child of the uploaded files, then iterate it so 
  //subsequent images can be loaded in. 
  let files = fileList.files[0]; 
  let newUrl = window.URL.createObjectURL(files); 
  imageViewer.imageUrl = newUrl; 
  // i++; 
}); 
 
//Create the Barcode Button 
var barcodeBtn = document.getElementById("barcodeButton"); 
 
//Create the Click Event 
barcodeBtn.onclick = function () { 
//Before running Barcode Recognition, we check if an image has been uploaded 
// let i = 0; 
if (!fileList.files[0]) { 
  alert("No Image Chosen for Barcode Recognition. Select an Image via Choose File, before getting the Barcode"); 
} 
else { 
 
  lt.Document.DocumentFactory.loadFromFile(fileList.files[0], new lt.Document.LoadDocumentOptions()) 
    .done((leadDoc) => { 
      console.log("Document loaded and has cache id: " + leadDoc.documentId); 
           
      let leadRectD = lt.LeadRectD.empty; 
      DocumentHelper.log("Barcode Recognition Starting..."); 
 
      let output = document.getElementById('output'); 
 
      let scrollOptions = { 
        left: output.offsetParent.offsetWidth, 
        top: output.offsetParent.offsetHeight, 
        behavior: 'smooth' 
      } 
 
      window.scrollTo(scrollOptions); 
 
      leadDoc.pages.item(0).readBarcodes(leadRectD) 
        .done((CharacterData) => { 
          console.log(CharacterData); 
          DocumentHelper.log("Barcode's value: " + CharacterData[0]._data); 
          window.scrollTo(scrollOptions); 
        }); 
 
    }) 
    .fail(DocumentHelper.showServiceError); 
  }  
};