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.
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
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:
Copy resources to the folder public:
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);
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