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

Sep 24, 2021

 Document Scanning

•  NODE.JS
•  EXPRESS
•  JADE
•  JAVASCRIPT
•  WEB

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.

About Dynamic Web TWAIN

• 
•  

Creating a Project with Expression Application Generator

Install express generator:

npm install express-generator -g

We can generate the project with the following command:

express Dynamic-Web-TWAIN

Here are the required dependencies in package.json file:

{
  "name": "Dynamic_Web_TWAIN",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  }
}

To install all dependencies, we use npm install.

Now a simple web app is ready. You can start the server by running npm start and then open http://localhost:3000/ in your web browser to see the default page.

Re-writing DWT Sample with Jade

To implement document uploading, we install multer, which is a node.js middleware for handling multipart/form-data:

npm i multer --save

The Dynamic Web TWAIN Resources folder needs to be copied to the public folder.

Don’t forget to apply for a valid license and update the license key in public/Resources/dynamsoft.webtwain.config.js in order to make Dynamic Web TWAIN work.

Dynamsoft.DWT.ProductKey = 'DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==';

The next step is to design the UI. We first go to /routes/index.js, and change the title:

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

Afterwards, we open layout.jade to include the JavaScript files provided by Dynamic Web TWAIN:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/Resources/dynamsoft.webtwain.initiate.js')
    script(src='/Resources/dynamsoft.webtwain.config.js')
  body
    block content

The index.jade file contains content for HTML body:

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').
        Dynamsoft.DWT.RegisterEvent('OnWebTwainReady', Dynamsoft_OnReady);

        var DWObject;

        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.DWT.GetWebTwain('dwtcontrolContainer'); 
        }
        function AcquireImage() {
          if (DWObject) {
            DWObject.IfShowUI = false;
            DWObject.SelectSource();
            DWObject.OpenSource();
            DWObject.AcquireImage();
          }
        }
        function btnUpload_onclick() {
          if (DWObject) {
            DWObject.HTTPPort = 3000;
            var CurrentPathName = unescape(location.pathname); 
            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
            );
          }
        }

To upload files, we create a upload folder in the project root directory. Then create a upload.js file in routes folder:

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

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './upload')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})

const upload = multer({ storage: storage })

router.post('/', upload.single('RemoteFile'), function (req, res, next) {
    res.send();
});

module.exports = router;

The final step is to load the upload module in app.js:

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

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

npm start

Source Code

https://github.com/yushulx/express-jade-document-management.git