Document Scanning and Uploading in Node.js with Express and Jade

Xiao Ling /  / Nodejs / , ,

Last time, I shared an article Document Imaging and Uploading with Dynamic Web TWAIN (DWT) and Node.js, which demonstrated how to deploy a website on the Web server that implemented in node.js with Express. Today, I’ll re-write the sample with Express application generator and the template engine jade.

express_jade

 

Creating a Project with Expression Application Generator

Install express generator:

npm install express-generator -g

Generate the project with the following command:

express Dynamic_Web_TWAIN

express_generator

Take a look at package.json:

{
  "name": "Dynamic_Web_TWAIN",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.10.2",
    "cookie-parser": "~1.3.3",
    "debug": "~2.1.1",
    "express": "~4.11.1",
    "jade": "~1.9.1",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0"
  }
}

To install all dependencies, use the command:

npm install

Run the app:

node ./bin/www

Open http://localhost:3000/ to access the default page.

Re-writing DWT Sample with Jade

Add a new dependency multer, which is used to handle multipart/form-data, to package.json:

express_dependencies

Copy resources to the folder public:

express_res

Open /routes/index.js, and then change the title:

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Dynamic Web TWAIN Demo' });
});

It’s time to edit jade files. Open layout.jade, and include two js files:

script(src='/Resources/dynamsoft.webtwain.initiate.js')
script(src='/Resources/dynamsoft.webtwain.config.js')

Open index.jade. To generate the corresponding HTML page, fill the file with the following contents:

extends layout

block content
  h1= title
  p Welcome to #{title}
  #dwtcontrolContainer
  input(
    type='button'
    value='Acquire'
    onclick='AcquireImage()'
  )
  input(
    id='btnUpload'
    type='button'
    value='Upload Image'
    onclick='btnUpload_onclick()'
  )
  script(type='text/javascript').
        function AcquireImage(){
            DWObject.IfShowUI = false;
            DWObject.SelectSource();
            DWObject.OpenSource();
            DWObject.AcquireImage();
            }
            function btnUpload_onclick() {
                DWObject.HTTPPort = 3000;
                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";
                var sFun = function(){
                    alert('successful');
                }, fFun = function(){

                };
                DWObject.HTTPUploadThroughPostEx(
                strHostIP,
                DWObject.CurrentImageIndexInBuffer,
                strActionPage,
                "test.jpg",
                1,// JPEG
            sFun, fFun
            );
            }

Here is how the final HTML source code looks like:

<!DOCTYPE html><html><head><title>DWT Hello World</title><link rel="stylesheet" href="/stylesheets/style.css"><script src="/Resources/dynamsoft.webtwain.initiate.js"></script><script src="/Resources/dynamsoft.webtwain.config.js"></script></head><body><h1>Dynamic Web TWAIN Demo</h1><p>Welcome to Dynamic Web TWAIN Demo</p><div id="dwtcontrolContainer"></div><input type="button" value="Acquire" onclick="AcquireImage()"><input id="btnUpload" type="button" value="Upload Image" onclick="btnUpload_onclick()"><script type="text/javascript">function AcquireImage(){
    DWObject.IfShowUI = false;
    DWObject.SelectSource();
    DWObject.OpenSource();
    DWObject.AcquireImage();
    }
    function btnUpload_onclick() {
        DWObject.HTTPPort = 3000;
        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";
        var sFun = function(){
            alert('successful');
        }, fFun = function(){

        };
        DWObject.HTTPUploadThroughPostEx(
        strHostIP,
        DWObject.CurrentImageIndexInBuffer,
        strActionPage,
        "test.jpg",
        1,// JPEG
    sFun, fFun
    );
    }</script></body></html>

Create a folder upload in your project root. In folder routes, create upload.js:

var express = require('express'); 
var router = express.Router(); 
var multer = require('multer');

router.use(multer({dest:"./upload/", 
	rename: function (fieldname, filename) {
		return Date.now()
	}
}));

module.exports = router;

Load the upload module in app.js:

var upload = require('./routes/upload');
app.use('/upload', upload);

express_upload

That’s all. We can test the app now:

Source Code

https://github.com/DynamsoftRD/DWT-with-Web-App-Framework/tree/master/express_jade

git clone https://github.com/DynamsoftRD/DWT-with-Web-App-Framework.git