Document Imaging and Uploading With Dynamic Web TWAIN and Node.js

In this tutorial, I’d like to share how to implement a simple Web application for document imaging and uploading with Dynamic Web TWAIN SDK (DWT) and Node.js.

nodejs_dwt

Download and Installation

Creating a Web Server with Node.js

Run your command line tool to install two Node.js modules:

npm install formidable@latest
npm install express

Create a file server.js, and make the initialization:

var formidable = require('formidable');
var util = require('util');
var express = require('express');
var fs = require('fs');
var app = express();

Load static resources, such as image files, css files and etc.

app.use(express.static(__dirname, '/public'));

For cross-domain access, you need to set permissions in header:

app.use(function(req, res, next) {  
    res.header("Access-Control-Allow-Origin", "\*");   
    res.header("Access-Control-Allow-Methods","PUT, POST, GET, DELETE, OPTIONS");  
    res.header("Access-Control-Allow-Headers","X-Requested-With, content-type");  
    res.header("Access-Control-Allow-Credentials", true);  
    next();  
});

In the POST request, use formidable to extract file information:

app.post('/upload', function(req, res) {
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        // console.log(util.inspect({
        //     fields: fields,
        //     files: files
        // }));

        fs.readFile(files.RemoteFile.path, function(err, data) {
        	// save file from temp dir to new dir
            var newPath = __dirname + "/uploads/" + files.RemoteFile.name;
            fs.writeFile(newPath, data, function(err) {
            	if (err) throw err;
            	console.log('file saved');	
                res.end();
            });
        });
    });
})

Set a port number and run the server:

var server = app.listen(2014, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log('listening at http://%s:%s', host, port);
})

Creating a Web Client with Dynamic Web TWAIN

Create a Web page which includes a content container and two buttons:

<html>
    <head>
        <title>Document Imaging & Uploading</title>
        <script src="/Resources/dynamsoft.webtwain.initiate.js"></script>
        <script src="/Resources/dynamsoft.webtwain.config.js"></script>
    </head>
    <body>
        <div id="dwtcontrolContainer"></div>
        <input type="button" value="Acquire" onclick="AcquireImage();" />
        <input id="btnUpload" type="button" value="Upload Image" onclick="btnUpload_onclick()">
    </body>
</html>

Note: the two js files used for Web TWAIN initialization are located at the DWT installation directory, and thus you just need to copy the Resources files to your project.

Add a few lines of code for scanning documents:

function AcquireImage(){
     DWObject.IfShowUI = false;
     DWObject.SelectSource();
     DWObject.OpenSource();
     DWObject.AcquireImage();
}

Now, try to click the button to verify whether the code can work.

In the upload function, you need to specify the server IP, port number, action page, file name and file type:

         function btnUpload_onclick() {
                DWObject.HTTPPort = 2014;
                var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
                var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
                var strActionPage = CurrentPath + "upload";
                var strHostIP = "localhost"; // modify the IP for cross-domain access
                var sFun = function(){
                    alert('successful');
                }, fFun = function(){
                    alert('failed');
                };
                DWObject.HTTPUploadThroughPostEx(
                strHostIP,
                DWObject.CurrentImageIndexInBuffer,
                strActionPage,
                "test.jpg",
                1,// JPEG
                sFun, fFun
                );
         }

That’s all. Run the server:

node server.js

Visit http://localhost:2014 to have fun.

Source Code

https://github.com/DynamsoftRD/nodejs-dwt

git clone https://github.com/DynamsoftRD/nodejs-dwt.git