nuxeo-development-framework 3.1.1 → 3.1.2

package/src/lib/components/documents/components/document-scan/document-scan.component.ts

@@ -0,0 +1,1156 @@
+import { APP_BASE_HREF, DatePipe } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter, Inject,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import Dynamsoft from 'dwt';
+import { Subscription } from 'rxjs';
+import { DocumentsService } from '../../services/documents.service';
+import { DocumentScanService } from './document-scan.service';
+
+/**
+ * Document Scan is a reusable nuxeo API & Scanner integrated component,
+ * that utilizes the scanner to create and upload PDF file as a batch, then provide
+ * that batch for consumption
+ *
+ * @title
+ * Document Scan
+ *
+ * @example
+ *
+ * <app-document-scan
+ *   (file)="onSuccess($event)"
+ * ></app-document-scan>
+ */
+@Component({
+  selector: 'app-document-scan',
+  templateUrl: './document-scan.component.html',
+  styleUrls: ['./document-scan.component.scss'],
+  host: { class: 'scanner' },
+  encapsulation: ViewEncapsulation.None
+})
+export class ScanComponent implements OnInit, AfterViewInit {
+  uploadedFile;
+  onMinimizingSubscription : Subscription;
+
+  @Input() useStoredFile = false;
+  @Input() hideUploadButton=false;
+  /** Event emitted when a batch is uploaded */
+  @Output()
+  file: EventEmitter<any> = new EventEmitter();
+
+  DWObject;
+  selectSources: HTMLSelectElement;
+  DWTSourceCount = 0;
+  filename = '';
+  containerId = 'dwtcontrolContainer';
+  bWASM = Dynamsoft.Lib.env.bMobile || Dynamsoft.DWT.UseLocalService;
+  _iLeft;
+  _iTop;
+  _iRight;
+  _iBottom;
+  _strTempStr = '';
+  re = /^\d+$/;
+  strre = /^[\s\w]+$/;
+  refloat = /^\d+\.*\d*$/i;
+  innerHTML: string;
+  constructor(
+    public translate: TranslateService,
+    public documentsService: DocumentsService,
+    public datePipe: DatePipe,
+    public DocumentScanService : DocumentScanService,
+    @Inject('environment') private environment,
+    @Inject(APP_BASE_HREF) private baseHref: string
+  ) { }
+  ngOnInit(): void {
+    Dynamsoft.DWT.ResourcesPath = this.baseHref + '/assets/dwt-resources';
+    ///
+    Dynamsoft.DWT.AutoLoad = true;
+    ///
+    // const width = window.outerWidth * 0.3;
+    // const height = window.outerHeight * 0.3;
+    Dynamsoft.DWT.Containers = [
+      {
+        WebTwainId: 'DWTObject',
+        ContainerId: 'dwtcontrolContainer',
+        Width: '100%',
+        Height: '100%'
+      }
+    ];
+
+    Dynamsoft.DWT.ProductKey = this.environment.dynamsoftProductKey;
+        // Dynamsoft.DWT.Trial = false;
+    // Dynamsoft.DWT.Debug = false; // only for debugger output
+
+    ///
+    Dynamsoft.DWT.IfAddMD5InUploadHeader = false;
+
+    ///
+    Dynamsoft.DWT.IfConfineMaskWithinTheViewer = false;
+    Dynamsoft.MSG = {
+      ConvertingToBase64: this.translate.instant(
+        'scanner.ConvertingToBase64'
+      ),
+      ConvertingToBlob: this.translate.instant(
+        'scanner.ConvertingToBlob'
+      ),
+      Downloading: this.translate.instant('scanner.Downloading'),
+      Encoding: this.translate.instant('scanner.Encoding'),
+      Err_BrowserNotSupportWasm: this.translate.instant(
+        'scanner.Err_BrowserNotSupportWasm'
+      ),
+      Init_AllJsLoaded: Dynamsoft.MSG.Init_AllJsLoaded,
+      Init_CheckDWT: Dynamsoft.MSG.Init_CheckDWT,
+      Init_CheckDWTVersion: Dynamsoft.MSG.Init_CheckDWTVersion,
+      Init_CheckingLicense: Dynamsoft.MSG.Init_CheckingLicense,
+      Init_CompilingWasm: Dynamsoft.MSG.Init_CompilingWasm,
+      Init_ConfiguringDWT: Dynamsoft.MSG.Init_ConfiguringDWT,
+      Init_CreatingDWT: Dynamsoft.MSG.Init_CreatingDWT,
+      Init_DownloadingWasm: Dynamsoft.MSG.Init_DownloadingWasm,
+      Init_FireBeforeInitEvt: Dynamsoft.MSG.Init_FireBeforeInitEvt,
+      Init_GetLicenseInfoForDWT: Dynamsoft.MSG.Init_GetLicenseInfoForDWT,
+      Init_InitActiveX: Dynamsoft.MSG.Init_InitActiveX,
+      Init_InitDynamsoftService: Dynamsoft.MSG.Init_InitDynamsoftService,
+      Init_InitH5: Dynamsoft.MSG.Init_InitH5,
+      Init_InitWasm: Dynamsoft.MSG.Init_InitWasm,
+      Init_LoadingViewerJs: Dynamsoft.MSG.Init_LoadingViewerJs,
+      Init_LookingLicense: Dynamsoft.MSG.Init_LookingLicense,
+      Init_SetLicenseForDWT: Dynamsoft.MSG.Init_SetLicenseForDWT,
+      Loading: this.translate.instant('scanner.Loading'),
+      LoadingPdf: this.translate.instant('scanner.LoadingPdf'),
+      LoadingTiff: this.translate.instant('scanner.LoadingTiff'),
+      SavingPdf: this.translate.instant('scanner.SavingPdf'),
+      SavingTiff: this.translate.instant('scanner.SavingTiff'),
+      Uploading: this.translate.instant('scanner.Uploading')
+    };
+    Dynamsoft.DWT.CustomizableDisplayInfo = {
+      errorMessages: this.translate.instant('scanner.errorMessages'),
+
+      // launch
+      generalMessages: this.translate.instant('scanner.generalMessages'),
+
+      customProgressText: this.translate.instant(
+        'scanner.customProgressText'
+      ),
+
+      // image editor
+      buttons: this.translate.instant('scanner.buttons'),
+
+      dialogText: this.translate.instant('scanner.dialogText')
+    };
+
+    Dynamsoft.DWT.OnWebTwainReady = (): any => {
+      this.pageonload();
+      this.Dynamsoft_OnReady();
+    };
+    Dynamsoft.DWT.Load();
+
+    this.onMinimizingSubscription = this.DocumentScanService.onMinimizing.subscribe(res => {
+      this.convertToBlobForSaving();
+    })
+  }
+  ngAfterViewInit() {
+    this.pageonload();
+    if(this.useStoredFile){
+        if(this.DocumentScanService.storedFile){
+          setTimeout(() => {
+            this.setStoredFileToScanner(this.DocumentScanService.storedFile);
+          }, 2000);
+        }
+    }
+
+  }
+
+  setStoredFileToScanner(result){
+    this.DWObject.LoadImageFromBinary(
+      result,
+      function() {
+          console.log('success');
+      },
+      function(errorCode, errorString) {
+          console.log(errorString);
+      }
+  );
+  }
+
+  pageonload() {
+    this.HideLoadImageForLinux();
+    const twainsource: any = document.getElementById('source');
+    if (twainsource) {
+      twainsource.options.length = 0;
+      twainsource.options.add(
+        new Option(this.translate.instant('scanner.pleaseWait'), '0')
+      );
+      twainsource.options[0].selected = true;
+    }
+
+    this.initiateInputs();
+  }
+
+  HideLoadImageForLinux() {
+    const o = document.getElementById('liLoadImage');
+    if (o) {
+      if (Dynamsoft.Lib.env.bLinux) { o.style.display = 'none'; }
+      else { o.style.display = ''; }
+    }
+  }
+
+  initiateInputs() {
+    const allinputs = document.getElementsByTagName('input');
+    for (let i = 0; i < allinputs.length; i++) {
+      if (allinputs[i].type === 'checkbox') {
+        allinputs[i].checked = false;
+      } else if (allinputs[i].type === 'text') {
+        allinputs[i].value = '';
+      }
+    }
+
+    if (Dynamsoft.Lib.env.bIE === true && Dynamsoft.Lib.env.bWin64 === true) {
+      let o = document.getElementById('samplesource64bit');
+      if (o) { o.style.display = 'inline'; }
+
+      o = document.getElementById('samplesource32bit');
+      if (o) { o.style.display = 'none'; }
+    }
+  }
+
+  initDllForChangeImageSize() {
+    const vInterpolationMethod: any = document.getElementById(
+      'InterpolationMethod'
+    );
+    vInterpolationMethod.options.length = 0;
+    vInterpolationMethod.options.add(new Option('NearestNeighbor', '1'));
+    vInterpolationMethod.options.add(new Option('Bilinear', '2'));
+    vInterpolationMethod.options.add(new Option('Bicubic', '3'));
+  }
+
+  setDefaultValue() {
+    const vGray: any = document.getElementById('Gray');
+    if (vGray) { vGray.checked = true; }
+
+    const varImgTypepng2: any = document.getElementById('imgTypepng2');
+    if (varImgTypepng2) { varImgTypepng2.checked = true; }
+    const varImgTypepng: any = document.getElementById('imgTypepng');
+    if (varImgTypepng) { varImgTypepng.checked = true; }
+
+    const _strDefaultSaveImageName = 'WebTWAINImage';
+    const _txtFileNameforSave: any = document.getElementById(
+      'txt_fileNameforSave'
+    );
+    if (_txtFileNameforSave) {
+      _txtFileNameforSave.value = _strDefaultSaveImageName;
+    }
+
+    const _txtFileName: any = document.getElementById('txt_fileName');
+    if (_txtFileName) { _txtFileName.value = _strDefaultSaveImageName; }
+
+    const _chkMultiPageTIFF_save: any = document.getElementById(
+      'MultiPageTIFF_save'
+    );
+    if (_chkMultiPageTIFF_save) { _chkMultiPageTIFF_save.disabled = true; }
+    const _chkMultiPagePDF_save: any = document.getElementById(
+      'MultiPagePDF_save'
+    );
+    if (_chkMultiPagePDF_save) { _chkMultiPagePDF_save.disabled = true; }
+    const _chkMultiPageTIFF: any = document.getElementById('MultiPageTIFF');
+    if (_chkMultiPageTIFF) { _chkMultiPageTIFF.disabled = true; }
+    const _chkMultiPagePDF: any = document.getElementById('MultiPagePDF');
+    if (_chkMultiPagePDF) { _chkMultiPagePDF.disabled = true; }
+  }
+
+  // Check if the control is fully loaded.
+  Dynamsoft_OnReady() {
+    const liNoScanner = document.getElementById('pNoScanner');
+    // If the ErrorCode is 0, it means everything is fine for the control. It is fully loaded.
+    this.DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer');
+    if (this.DWObject) {
+      if (this.DWObject.ErrorCode === 0) {
+        this.DWObject.LogLevel = 0;
+        this.DWObject.IfAllowLocalCache = true;
+        this.DWObject.ImageCaptureDriverType = 4;
+        this.setDefaultValue();
+
+        this.DWObject.RegisterEvent(
+          'OnTopImageInTheViewChanged',
+          this.Dynamsoft_OnTopImageInTheViewChanged
+        );
+        this.DWObject.RegisterEvent(
+          'OnMouseClick',
+          this.Dynamsoft_OnMouseClick
+        );
+
+        let twainsource: any = document.getElementById('source');
+        if (!twainsource) {
+          twainsource = document.getElementById('webcamsource');
+        }
+
+        const vCount = this.DWObject.SourceCount;
+        this.DWTSourceCount = vCount;
+
+        if (twainsource) {
+          twainsource.options.length = 0;
+          for (let i = 0; i < vCount; i++) {
+            twainsource.options.add(
+              new Option(this.DWObject.GetSourceNameItems(i), i.toString())
+            );
+          }
+        }
+
+        // If source list need to be displayed, fill in the source items.
+        if (vCount === 0) {
+          if (liNoScanner) {
+            if (Dynamsoft.Lib.env.bWin) {
+              liNoScanner.style.display = 'block';
+              liNoScanner.style.textAlign = 'center';
+            } else { liNoScanner.style.display = 'none'; }
+          }
+        }
+
+        if (vCount > 0) {
+          this.source_onchange();
+        }
+
+        if (Dynamsoft.Lib.env.bWin) { this.DWObject.MouseShape = false; }
+
+        const btnScan: any = document.getElementById('btnScan');
+        if (btnScan) {
+          if (vCount === 0) { btnScan.disabled = true; }
+          else {
+            btnScan.disabled = false;
+          }
+        }
+
+        if (!Dynamsoft.Lib.env.bWin && vCount > 0) {
+          if (document.getElementById('lblShowUI')) {
+            document.getElementById('lblShowUI').style.display = 'none';
+          }
+          if (document.getElementById('ShowUI')) {
+            document.getElementById('ShowUI').style.display = 'none';
+          }
+        } else {
+          if (document.getElementById('lblShowUI')) {
+            document.getElementById('lblShowUI').style.display = '';
+          }
+          if (document.getElementById('ShowUI')) {
+            document.getElementById('ShowUI').style.display = '';
+          }
+        }
+
+        this.initDllForChangeImageSize();
+
+        this._iLeft = 0;
+        this._iTop = 0;
+        this._iRight = 0;
+        this._iBottom = 0;
+
+        for (let i = 0; i < document.links.length; i++) {
+          if (document.links[i].className === 'ShowtblLoadImage') {
+            document.links[i].onclick = this.showtblLoadImage_onclick;
+          }
+          if (document.links[i].className === 'ClosetblLoadImage') {
+            document.links[i].onclick = this.closetblLoadImage_onclick;
+          }
+        }
+        if (vCount === 0) {
+          if (Dynamsoft.Lib.env.bWin) {
+            if (
+              document.getElementById('aNoScanner') &&
+              window['bDWTOnlineDemo']
+            ) {
+              if (document.getElementById('div_ScanImage').style.display === '') {
+                this.showtblLoadImage_onclick();
+              }
+            }
+            if (document.getElementById('Resolution')) {
+              document.getElementById('Resolution').style.display = 'none';
+            }
+          }
+        } else {
+          const divBlank = document.getElementById('divBlank');
+          if (divBlank) { divBlank.style.display = 'none'; }
+        }
+
+        this.updatePageInfo();
+        const ua = navigator.userAgent.toLowerCase();
+        if (!ua.indexOf('msie 6.0')) {
+        }
+
+        this.DWObject.RegisterEvent(
+          'OnPostTransfer',
+          this.Dynamsoft_OnPostTransfer
+        );
+        this.DWObject.RegisterEvent(
+          'OnPostLoad',
+          this.Dynamsoft_OnPostLoadfunction
+        );
+        this.DWObject.RegisterEvent(
+          'OnPostAllTransfers',
+          this.Dynamsoft_OnPostAllTransfers
+        );
+        this.DWObject.RegisterEvent(
+          'OnImageAreaSelected',
+          this.Dynamsoft_OnImageAreaSelected
+        );
+        this.DWObject.RegisterEvent(
+          'OnImageAreaDeSelected',
+          this.Dynamsoft_OnImageAreaDeselected
+        );
+        this.DWObject.RegisterEvent(
+          'OnGetFilePath',
+          this.Dynamsoft_OnGetFilePath
+        );
+      }
+    }
+  }
+
+  showtblLoadImage_onclick() {
+    switch (document.getElementById('tblLoadImage').style.visibility) {
+      case 'hidden':
+        document.getElementById('tblLoadImage').style.visibility = 'visible';
+        document.getElementById('Resolution').style.visibility = 'hidden';
+        break;
+      case 'visible':
+        document.getElementById('tblLoadImage').style.visibility = 'hidden';
+        document.getElementById('Resolution').style.visibility = 'visible';
+        break;
+      default:
+        break;
+    }
+    if (document.getElementById('pNoScanner')) {
+      // document.getElementById("tblLoadImage").style.top = ds_gettop(document.getElementById("pNoScanner")) + pNoScanner.offsetHeight + "px";
+      // document.getElementById("tblLoadImage").style.left = ds_getleft(document.getElementById("pNoScanner")) + 0 + "px";
+    }
+    return false;
+  }
+
+  closetblLoadImage_onclick() {
+    document.getElementById('tblLoadImage').style.visibility = 'hidden';
+    document.getElementById('Resolution').style.visibility = 'visible';
+    return false;
+  }
+
+  // --------------------------------------------------------------------------------------
+  // ************************** Used a lot *****************************
+  // --------------------------------------------------------------------------------------
+  updatePageInfo() {
+    const totalImage: any = document.getElementById('DW_TotalImage');
+    const currentImage: any = document.getElementById('DW_CurrentImage');
+    if (totalImage) { totalImage.value = this.DWObject.HowManyImagesInBuffer; }
+    if (currentImage) {
+      currentImage.value = this.DWObject.CurrentImageIndexInBuffer + 1;
+    }
+  }
+
+  appendMessage(strMessage) {
+    this._strTempStr += strMessage;
+    const _divMessageContainer = document.getElementById('DWTemessage');
+    if (_divMessageContainer) {
+      _divMessageContainer.innerHTML = this._strTempStr;
+      _divMessageContainer.scrollTop = _divMessageContainer.scrollHeight;
+    }
+  }
+
+  checkIfImagesInBuffer() {
+    if (this.DWObject.HowManyImagesInBuffer === 0) {
+      this.appendMessage('There is no image in buffer.<br />');
+      return false;
+    } else { return true; }
+  }
+
+  checkErrorString() {
+    return this.checkErrorStringWithErrorCode(
+      this.DWObject.ErrorCode,
+      this.DWObject.ErrorString
+    );
+  }
+
+  checkErrorStringWithErrorCode(errorCode, errorString, responseString = null) {
+    if (errorCode === 0) {
+      this.appendMessage(
+        '<span style=\'color:#cE5E04\'><b>' + errorString + '</b></span><br />'
+      );
+
+      return true;
+    }
+    if (errorCode === -2115) {
+      // Cancel file dialog
+      return true;
+    }
+    else {
+      if (errorCode === -2003) {
+        const ErrorMessageWin = window.open(
+          '',
+          'ErrorMessage',
+          'height=500,width=750,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no'
+        );
+        ErrorMessageWin.document.writeln(responseString); // this.DWObject.HTTPPostResponseString);
+      }
+      this.appendMessage(
+        '<span style=\'color:#cE5E04\'><b>' + errorString + '</b></span><br />'
+      );
+      return false;
+    }
+  }
+  // --------------------------------------------------------------------------------------
+  // ************************** Used a lot *****************************
+  // --------------------------------------------------------------------------------------
+  ds_getleft(el) {
+    let tmp = el.offsetLeft;
+    el = el.offsetParent;
+    while (el) {
+      tmp += el.offsetLeft;
+      el = el.offsetParent;
+    }
+    return tmp;
+  }
+  ds_gettop(el) {
+    let tmp = el.offsetTop;
+    el = el.offsetParent;
+    while (el) {
+      tmp += el.offsetTop;
+      el = el.offsetParent;
+    }
+    return tmp;
+  }
+
+  Over_Out_DemoImage(obj, url) {
+    obj.src = url;
+  }
+  source_onchange() {
+    if (document.getElementById('divTwainType')) {
+      document.getElementById('divTwainType').style.display = '';
+    }
+
+    if (document.getElementById('source')) {
+      const cIndex = (document.getElementById('source') as HTMLSelectElement)
+        .selectedIndex;
+      if (Dynamsoft.Lib.env.bMac) {
+        const strSourceName = this.DWObject.GetSourceNameItems(cIndex);
+        if (strSourceName.indexOf('ICA') === 0) {
+          if (document.getElementById('lblShowUI')) {
+            document.getElementById('lblShowUI').style.display = 'none';
+          }
+          if (document.getElementById('ShowUI')) {
+            document.getElementById('ShowUI').style.display = 'none';
+          }
+        } else {
+          if (document.getElementById('lblShowUI')) {
+            document.getElementById('lblShowUI').style.display = '';
+          }
+          if (document.getElementById('ShowUI')) {
+            document.getElementById('ShowUI').style.display = '';
+          }
+        }
+      } else { this.DWObject.SelectSourceByIndex(cIndex); }
+    }
+  }
+
+  mediaType_onchange() {
+    const MediaType: any = document.getElementById('MediaType');
+    if (MediaType && MediaType.options.length > 0) {
+      const valueMediaType = MediaType.options[MediaType.selectedIndex].text;
+      if (valueMediaType !== '') {
+        if (!this.DWObject.Addon.Webcam.SetMediaType(valueMediaType)) {
+          this.appendMessage('<b>Error setting MediaType value: </b>');
+          this.appendMessage(
+            '<span style=\'color:#cE5E04\'><b>' +
+            this.DWObject.ErrorString +
+            '</b></span><br />'
+          );
+          return;
+        }
+      }
+    }
+
+    const ResolutionWebcam: any = document.getElementById('ResolutionWebcam');
+    if (ResolutionWebcam) {
+      ResolutionWebcam.options.length = 0;
+      const aryResolution = this.DWObject.Addon.Webcam.GetResolution();
+      const countResolution = aryResolution.GetCount();
+      for (let i = 0; i < countResolution; i++) {
+        const value = aryResolution.Get(i);
+        ResolutionWebcam.options.add(new Option(value, value));
+      }
+    }
+  }
+
+  /*-----------------Acquire Image---------------------*/
+
+  acquireImage() {
+    const cIndex = (document.getElementById('source') as HTMLSelectElement)
+      .selectedIndex;
+    if (cIndex < 0) { return; }
+
+    this.DWObject.SelectSourceByIndex(cIndex);
+    this.DWObject.CloseSource();
+    this.DWObject.OpenSource();
+    this.DWObject.IfShowUI = (document.getElementById(
+      'ShowUI'
+    ) as HTMLInputElement).checked;
+
+    let i;
+    for (i = 0; i < 3; i++) {
+      if (
+        (document.getElementsByName('PixelType').item(i) as HTMLInputElement)
+          .checked === true
+      ) {
+        this.DWObject.PixelType = i;
+      }
+    }
+    if (this.DWObject.ErrorCode !== 0) {
+      this.appendMessage('<b>Error setting PixelType value: </b>');
+      this.appendMessage(
+        '<span style=\'color:#cE5E04\'><b>' +
+        this.DWObject.ErrorString +
+        '</b></span><br />'
+      );
+    }
+    this.DWObject.Resolution = (document.getElementById(
+      'Resolution'
+    ) as HTMLInputElement).value;
+    if (this.DWObject.ErrorCode !== 0) {
+      this.appendMessage('<b>Error setting Resolution value: </b>');
+      this.appendMessage(
+        '<span style=\'color:#cE5E04\'><b>' +
+        this.DWObject.ErrorString +
+        '</b></span><br />'
+      );
+    }
+
+    const bADFChecked = (document.getElementById('ADF') as HTMLInputElement)
+      .checked;
+    this.DWObject.IfFeederEnabled = bADFChecked;
+    if (bADFChecked === true && this.DWObject.ErrorCode !== 0) {
+      this.appendMessage('<b>Error setting ADF value: </b>');
+      this.appendMessage(
+        '<span style=\'color:#cE5E04\'><b>' +
+        this.DWObject.ErrorString +
+        '</b></span><br />'
+      );
+    }
+
+    const bDuplexChecked = (document.getElementById(
+      'Duplex'
+    ) as HTMLInputElement).checked;
+    this.DWObject.IfDuplexEnabled = bDuplexChecked;
+    if (bDuplexChecked === true && this.DWObject.ErrorCode !== 0) {
+      this.appendMessage('<b>Error setting Duplex value: </b>');
+      this.appendMessage(
+        '<span style=\'color:#cE5E04\'><b>' +
+        this.DWObject.ErrorString +
+        '</b></span><br />'
+      );
+    }
+    if (
+      Dynamsoft.Lib.env.bWin ||
+      (!Dynamsoft.Lib.env.bWin && this.DWObject.ImageCaptureDriverType === 0)
+    ) {
+      this.appendMessage(
+        'Pixel Type: ' +
+        this.DWObject.PixelType +
+        '<br />Resolution: ' +
+        this.DWObject.Resolution +
+        '<br />'
+      );
+    }
+    this.DWObject.IfDisableSourceAfterAcquire = true;
+    this.DWObject.AcquireImage();
+  }
+
+  /*-----------------Load Image---------------------*/
+  btnLoadImagesOrPDFs_onclick() {
+
+    const OnPDFSuccess = () => {
+      this.appendMessage('Loaded an image successfully.<br/>');
+      this.updatePageInfo();
+    };
+
+    const OnPDFFailure = (errorCode, errorString) => {
+      this.checkErrorStringWithErrorCode(errorCode, errorString);
+    };
+
+    this.DWObject.IfShowFileDialog = true;
+    this.DWObject.Addon.PDF.SetResolution(200);
+    this.DWObject.Addon.PDF.SetConvertMode(
+      Dynamsoft.DWT.EnumDWT_ConvertMode.CM_RENDERALL
+    );
+    this.DWObject.LoadImageEx(
+      '',
+      Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL,
+      OnPDFSuccess,
+      OnPDFFailure
+    );
+  }
+
+  // --------------------------------------------------------------------------------------
+  // ************************** Edit Image ******************************
+
+  // --------------------------------------------------------------------------------------
+  btnShowImageEditor_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.ShowImageEditor();
+  }
+
+  btnRotateRight_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.RotateRight(this.DWObject.CurrentImageIndexInBuffer);
+    this.appendMessage('<b>Rotate right: </b>');
+    if (this.checkErrorString()) {
+      return;
+    }
+  }
+  btnRotateLeft_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.RotateLeft(this.DWObject.CurrentImageIndexInBuffer);
+    this.appendMessage('<b>Rotate left: </b>');
+    if (this.checkErrorString()) {
+      return;
+    }
+  }
+
+  btnRotate180_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.Rotate(this.DWObject.CurrentImageIndexInBuffer, 180, true);
+    this.appendMessage('<b>Rotate 180: </b>');
+    if (this.checkErrorString()) {
+      return;
+    }
+  }
+
+  btnMirror_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.Mirror(this.DWObject.CurrentImageIndexInBuffer);
+    this.appendMessage('<b>Mirror: </b>');
+    if (this.checkErrorString()) {
+      return;
+    }
+  }
+  btnFlip_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.Flip(this.DWObject.CurrentImageIndexInBuffer);
+    this.appendMessage('<b>Flip: </b>');
+    if (this.checkErrorString()) {
+      return;
+    }
+  }
+
+  /*----------------------Crop Method---------------------*/
+  btnCrop_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    if (
+      this._iLeft !== 0 ||
+      this._iTop !== 0 ||
+      this._iRight !== 0 ||
+      this._iBottom !== 0
+    ) {
+      this.DWObject.Crop(
+        this.DWObject.CurrentImageIndexInBuffer,
+        this._iLeft,
+        this._iTop,
+        this._iRight,
+        this._iBottom
+      );
+      this._iLeft = 0;
+      this._iTop = 0;
+      this._iRight = 0;
+      this._iBottom = 0;
+      this.appendMessage('<b>Crop: </b>');
+      if (this.checkErrorString()) {
+        return;
+      }
+      return;
+    } else {
+      this.appendMessage(
+        '<b>Crop: </b>failed. Please first select the area you\'d like to crop.<br />'
+      );
+    }
+  }
+  /*----------------Change Image Size--------------------*/
+  btnChangeImageSize_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    switch (document.getElementById('ImgSizeEditor').style.visibility) {
+      case 'visible':
+        document.getElementById('ImgSizeEditor').style.visibility = 'hidden';
+        break;
+      case 'hidden':
+        document.getElementById('ImgSizeEditor').style.visibility = 'visible';
+        break;
+      default:
+        break;
+    }
+    // document.getElementById("ImgSizeEditor").style.top = ds_gettop(document.getElementById("btnChangeImageSize")) + document.getElementById("btnChangeImageSize").offsetHeight + 15 + "px";
+    // document.getElementById("ImgSizeEditor").style.left = ds_getleft(document.getElementById("btnChangeImageSize")) - 14 + "px";
+
+    const iWidth = this.DWObject.GetImageWidth(
+      this.DWObject.CurrentImageIndexInBuffer
+    );
+    if (iWidth !== -1) {
+      (document.getElementById('img_width') as HTMLInputElement).value = iWidth;
+    }
+    const iHeight = this.DWObject.GetImageHeight(
+      this.DWObject.CurrentImageIndexInBuffer
+    );
+    if (iHeight !== -1) {
+      (document.getElementById(
+        'img_height'
+      ) as HTMLInputElement).value = iHeight;
+    }
+  }
+  btnCancelChange_onclick() {
+    document.getElementById('ImgSizeEditor').style.visibility = 'hidden';
+  }
+
+  btnChangeImageSizeOK_onclick() {
+    document.getElementById('img_height').className = '';
+    document.getElementById('img_width').className = '';
+    if (
+      !this.re.test(
+        (document.getElementById('img_height') as HTMLInputElement).value
+      )
+    ) {
+      document.getElementById('img_height').className += ' invalid';
+      document.getElementById('img_height').focus();
+      this.appendMessage('Please input a valid <b>height</b>.<br />');
+      return;
+    }
+    if (
+      !this.re.test(
+        (document.getElementById('img_width') as HTMLInputElement).value
+      )
+    ) {
+      document.getElementById('img_width').className += ' invalid';
+      document.getElementById('img_width').focus();
+      this.appendMessage('Please input a valid <b>width</b>.<br />');
+      return;
+    }
+    this.DWObject.ChangeImageSize(
+      this.DWObject.CurrentImageIndexInBuffer,
+      (document.getElementById('img_width') as HTMLInputElement).value,
+      (document.getElementById('img_height') as HTMLInputElement).value,
+      (document.getElementById('InterpolationMethod') as HTMLSelectElement)
+        .selectedIndex + 1
+    );
+    this.appendMessage('<b>Change Image Size: </b>');
+    if (this.checkErrorString()) {
+      document.getElementById('ImgSizeEditor').style.visibility = 'hidden';
+      return;
+    }
+  }
+  // --------------------------------------------------------------------------------------
+  // ************************** Save Image***********************************
+  // --------------------------------------------------------------------------------------
+
+
+  btnSave_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    const strimgType_save = 'pdf';
+
+    this.DWObject.IfShowFileDialog = true;
+    const _txtFileNameforSave: any = document.getElementById('txt_fileName');
+    if (_txtFileNameforSave) { _txtFileNameforSave.className = ''; }
+    let bSave: any = false;
+
+    const strFilePath = _txtFileNameforSave.value + '.' + strimgType_save;
+
+    const OnSuccess = () => {
+      this.appendMessage('<b>Save Image: </b>');
+      this.checkErrorStringWithErrorCode(0, 'Successful.');
+    };
+
+    const OnFailure = (errorCode, errorString) => {
+      this.checkErrorStringWithErrorCode(errorCode, errorString);
+    };
+
+    bSave = this.DWObject.SaveAllAsPDF(strFilePath, OnSuccess, OnFailure);
+
+    if (bSave) { this.appendMessage('<b>Save Image: </b>'); }
+    if (this.checkErrorString()) {
+      return;
+    }
+  }
+  // --------------------------------------------------------------------------------------
+  // ************************** Upload Image***********************************
+  // --------------------------------------------------------------------------------------
+  makeid(length) {
+    let result = '';
+    const characters =
+      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  }
+
+  convertToBlob() {
+    this.DocumentScanService.uploadStart.emit(true);
+    const pages = [];
+    for (let index = 0; index < this.DWObject?.HowManyImagesInBuffer; index++) {
+      pages.push(index);
+    }
+    this.DWObject.ConvertToBlob(
+      pages,
+      Dynamsoft.DWT.EnumDWT_ImageType.IT_PDF,
+      (result, indices, type) => {
+        result.lastModifiedDate = new Date();
+        result.name = 'scan-' + this.datePipe.transform(result.lastModifiedDate, 'dd-MM-yyyy') + '.pdf';
+        this.DocumentScanService.uploadBatch(result).subscribe((batch) => {
+          batch.forEach(doc => {
+            this.file.next(doc);
+          });
+        });
+      },
+      (errorCode, errorString) => {
+        console.log(errorString);
+        this.DocumentScanService.uploadStart.emit(false);
+      }
+    );
+  }
+
+
+  convertToBlobForSaving() {
+    const pages = [];
+    for (let index = 0; index < this.DWObject?.HowManyImagesInBuffer; index++) {
+      pages.push(index);
+    }
+    this.DWObject.ConvertToBlob(
+      pages,
+      Dynamsoft.DWT.EnumDWT_ImageType.IT_PDF,
+      (result, indices, type) => {
+        result.lastModifiedDate = new Date();
+        result.name = 'scan-' + this.datePipe.transform(result.lastModifiedDate, 'dd-MM-yyyy') + '.pdf';
+        this.DocumentScanService.storedFile = result;
+        this.onMinimizingSubscription ? this.onMinimizingSubscription.unsubscribe() : '';
+      },
+      (errorCode, errorString) => {
+        console.log(errorString);
+      }
+    );
+  }
+  // --------------------------------------------------------------------------------------
+  // ************************** Navigator functions***********************************
+  // --------------------------------------------------------------------------------------
+
+  btnFirstImage_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.CurrentImageIndexInBuffer = 0;
+    this.updatePageInfo();
+  }
+
+  btnPreImage_wheel() {
+    if (this.DWObject.HowManyImagesInBuffer !== 0) { this.btnPreImage_onclick(); }
+  }
+
+  btnNextImage_wheel() {
+    if (this.DWObject.HowManyImagesInBuffer !== 0) { this.btnNextImage_onclick(); }
+  }
+
+  btnPreImage_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    } else if (this.DWObject.CurrentImageIndexInBuffer === 0) {
+      return;
+    }
+    this.DWObject.CurrentImageIndexInBuffer =
+      this.DWObject.CurrentImageIndexInBuffer - 1;
+    this.updatePageInfo();
+  }
+  btnNextImage_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    } else if (
+      this.DWObject.CurrentImageIndexInBuffer ===
+      this.DWObject.HowManyImagesInBuffer - 1
+    ) {
+      return;
+    }
+    this.DWObject.CurrentImageIndexInBuffer =
+      this.DWObject.CurrentImageIndexInBuffer + 1;
+    this.updatePageInfo();
+  }
+
+  btnLastImage_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.CurrentImageIndexInBuffer =
+      this.DWObject.HowManyImagesInBuffer - 1;
+    this.updatePageInfo();
+  }
+
+  btnRemoveCurrentImage_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.RemoveAllSelectedImages();
+    if (this.DWObject.HowManyImagesInBuffer === 0) {
+      (document.getElementById(
+        'DW_TotalImage'
+      ) as HTMLInputElement).value = this.DWObject.HowManyImagesInBuffer;
+      (document.getElementById('DW_CurrentImage') as HTMLInputElement).value =
+        '';
+      return;
+    } else {
+      this.updatePageInfo();
+    }
+  }
+
+  btnRemoveAllImages_onclick() {
+    if (!this.checkIfImagesInBuffer()) {
+      return;
+    }
+    this.DWObject.RemoveAllImages();
+    (document.getElementById('DW_TotalImage') as HTMLInputElement).value = '0';
+    (document.getElementById('DW_CurrentImage') as HTMLInputElement).value = '';
+  }
+  setlPreviewMode() {
+    const varNum = parseInt(
+      (
+        (document.getElementById('DW_PreviewMode') as HTMLSelectElement)
+          .selectedIndex + 1
+      ).toString(),
+      10
+    );
+    const btnCrop: any = document.getElementById('btnCrop');
+    if (btnCrop) {
+      let tmpstr = btnCrop.src;
+      if (varNum > 1) {
+        tmpstr = tmpstr.replace('Crop.', 'Crop_gray.');
+        btnCrop.src = tmpstr;
+        btnCrop.onclick = function () { };
+      } else {
+        tmpstr = tmpstr.replace('Crop_gray.', 'Crop.');
+        btnCrop.src = tmpstr;
+        btnCrop.onclick = () => {
+          this.btnCrop_onclick();
+        };
+      }
+    }
+
+    this.DWObject.SetViewMode(varNum, varNum);
+    if (Dynamsoft.Lib.env.bMac || Dynamsoft.Lib.env.bLinux) {
+      return;
+    } else if (
+      (document.getElementById('DW_PreviewMode') as HTMLSelectElement)
+        .selectedIndex !== 0
+    ) {
+      this.DWObject.MouseShape = true;
+    } else {
+      this.DWObject.MouseShape = false;
+    }
+  }
+
+  // --------------------------------------------------------------------------------------
+  // *********************************radio response***************************************
+  // --------------------------------------------------------------------------------------
+  rdTIFF_onclick() {
+    const _chkMultiPageTIFF: any = document.getElementById('MultiPageTIFF');
+    _chkMultiPageTIFF.disabled = false;
+    _chkMultiPageTIFF.checked = false;
+
+    const _chkMultiPagePDF: any = document.getElementById('MultiPagePDF');
+    _chkMultiPagePDF.checked = false;
+    _chkMultiPagePDF.disabled = true;
+  }
+
+  rdPDF_onclick() {
+    const _chkMultiPageTIFF: any = document.getElementById('MultiPageTIFF');
+    _chkMultiPageTIFF.checked = false;
+    _chkMultiPageTIFF.disabled = true;
+
+    const _chkMultiPagePDF: any = document.getElementById('MultiPagePDF');
+    _chkMultiPagePDF.disabled = false;
+    _chkMultiPagePDF.checked = true;
+  }
+
+  rd_onclick() {
+    const _chkMultiPageTIFF: any = document.getElementById('MultiPageTIFF');
+    _chkMultiPageTIFF.checked = false;
+    _chkMultiPageTIFF.disabled = true;
+
+    const _chkMultiPagePDF: any = document.getElementById('MultiPagePDF');
+    _chkMultiPagePDF.checked = false;
+    _chkMultiPagePDF.disabled = true;
+  }
+
+  // --------------------------------------------------------------------------------------
+  // ************************** Dynamic Web TWAIN Events***********************************
+  // --------------------------------------------------------------------------------------
+
+  Dynamsoft_OnPostTransfer = () => {
+    this.updatePageInfo();
+  }
+
+  Dynamsoft_OnPostLoadfunction = (path, name, type) => {
+    this.updatePageInfo();
+  }
+
+  Dynamsoft_OnPostAllTransfers = () => {
+    this.DWObject.CloseSource();
+    this.updatePageInfo();
+    this.checkErrorString();
+  }
+
+  Dynamsoft_OnMouseClick = index => {
+    this.updatePageInfo();
+  }
+
+  Dynamsoft_OnMouseRightClick = index => {
+    // To add
+  }
+
+  Dynamsoft_OnImageAreaSelected = (index, left, top, right, bottom) => {
+    this._iLeft = left;
+    this._iTop = top;
+    this._iRight = right;
+    this._iBottom = bottom;
+  }
+
+  Dynamsoft_OnImageAreaDeselected = index => {
+    this._iLeft = 0;
+    this._iTop = 0;
+    this._iRight = 0;
+    this._iBottom = 0;
+  }
+
+  Dynamsoft_OnMouseDoubleClick() {
+    return;
+  }
+
+  Dynamsoft_OnTopImageInTheViewChanged = index => {
+    this._iLeft = 0;
+    this._iTop = 0;
+    this._iRight = 0;
+    this._iBottom = 0;
+    this.DWObject.CurrentImageIndexInBuffer = index;
+    this.updatePageInfo();
+  }
+
+  Dynamsoft_OnGetFilePath = (bSave, count, index, path, name) => { };
+}