Using Dynamic Web TWAIN in Angular Application

Dynamsoft Dynamic Web TWAIN Angular applications

Last Updated on

Angular is a TypeScript-based open-source front-end web application platform. With Angular, you can build one application and reuse the code to build apps for any deployment – web, mobile web, native mobile or desktop.

In this article, we discuss how to use Dynamic Web TWAIN – the web-based document scanning library – in an Angular applications for online document scanning.

Environment

@angular/cli: 1.0.3
node: 7.9.0
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Using Dynamic Web TWAIN with Angular

  1. Install Angular CLI, a command line interface for Angular, globally.
npm install -g @angular/cli
  1. Initialize an Angular project:
ng new web-scan-angular
  1. Install Dynamic Web TWAIN JavaScript library – dynamsoft.webtwain.min.js and TypeScript declaration file (.d.ts) for Dynamic Web TWAIN:
npm install dwt --save
npm install @types/dwt --save
  1. Include Dynamic Web TWAIN JavaScript library in the project.

Open .angular-cli.json and add the library path to scripts:

"scripts": ["../node_modules/dwt/dist/dynamsoft.webtwain.min.js"],

Alternatively, you can add the link to src/index.html:

<script type="text/javascript" src="http://www.dynamsoft.com/library/dwt/dynamsoft.webtwain.min.js"> </script>
  1. Add a function for document scanning in **src/app/app.component.ts**:
export class AppComponent {
  title = 'Using Dynamic Web TWAIN in Angular Project';
 
  acquireImage(): void {
    const dwObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    const bSelected = dwObject.SelectSource();
    if (bSelected) {
      const onAcquireImageSuccess = () => { dwObject.CloseSource(); };
      const onAcquireImageFailure = onAcquireImageSuccess;
      dwObject.OpenSource();
      dwObject.AcquireImage({}, onAcquireImageSuccess, onAcquireImageFailure);
    }
  }
}
  1. Add a button and a div element for Dynamic Web TWAIN to src/app/app.component.html:
<button (click)="acquireImage()">Scan Document</button>
<div id="dwtcontrolContainer"></div>

Now let’s run the app:

ng serve --open

We can click ‘Scan’ to connect to a scanner and acquire documents in the browser.

web scan in Angular

How to Save An Electronic Document to Database

Once a document is acquired from the scanner, we can use XMLHttpRequest to send the document image to the web server and then use the back-end code to insert the image file to the database.

Here is a MySQL example in PHP:

<?php   

    // Interacting with MySQL
    $servername = "127.0.0.1";
    $username = "root";
    $password = "root";
    $dbname = "dwtsample";
    $tablename = "uploadedimages";

    // Create connection
    $conn = new mysqli($servername, $username, $password);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } else {
        // Check Database Existance
        $db_selected = mysqli_select_db($conn, $dbname);
        if(!$db_selected) {
            // Create database
            $sql_newDB = "CREATE DATABASE ".$dbname;
            if ($conn->query($sql_newDB) === TRUE) {
                // echo "Database created successfully";
            } else {
                die("Error creating database: " . $conn->error);
            }           
        }
        mysqli_select_db($conn, $dbname);

        // Check Table Existance
        $sql_showtable = "SHOW TABLES LIKE '".$tablename."'";
        $rowcount = mysqli_num_rows($conn->query($sql_showtable));
        if ($rowcount > 0) {
            // echo "the table exists";
        } else {
            // sql to create table
            $sql_newtable = "CREATE TABLE ".$tablename." (
            id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, 
            document_name VARCHAR(30) NOT NULL,
            document_data longblob NOT NULL,
            reg_date TIMESTAMP
            )";
            if ($conn->query($sql_newtable) === TRUE) {
                // echo "Table ".$tablename." created successfully";
            } else {
                die("Error creating table: " . $conn->error);
            }
        }           

            $fileTempName = $_FILES['RemoteFile']['tmp_name'];  
            $fileSize = $_FILES['RemoteFile']['size'];
            $fileName = $_FILES['RemoteFile']['name'];
            $strFileSize = (string)intval($fileSize/1024)."KB";
            $fReadHandle = fopen($fileTempName, 'rb');
            $fileContent = fread($fReadHandle, $fileSize);
            fclose($fReadHandle);
            $imgIndex = 0;
            $sql_insertdata = "INSERT INTO ".$tablename." (document_name,document_data) VALUES ('".$fileName."','".addslashes($fileContent)."')";
            if ($conn->query($sql_insertdata) === TRUE) {
                // echo "File saved in db successfully.";
                $sql_getIndex = "SELECT id FROM ".$tablename;
                $IDs = $conn->query($sql_getIndex);
                if ($IDs->num_rows > 0) {
                    // output data of each row
                    while($row = $IDs->fetch_assoc()) {
                        $_temp = intval($row["id"]);
                        if($_temp > $imgIndex)
                            $imgIndex = $_temp;
                    }
                }
            } else {
                die("Error saving file: " . $conn->error);
            }
            $conn->close();
            echo "PHP:"."DWTUploadFileIndex:".strval($imgIndex)."DWTUploadFileName:".$fileName."UploadedFileSize:".$strFileSize;

    }
?>

Source Code

https://github.com/dynamsoft-dwt/angular-cli-application

You can also get a sample of document scanning and uploading in an Angular 5 application in our code gallery.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com