Document Scanning and Uploading in Node.js with Express and Jade
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