Node express ect multerのサンプルをGitHubで公開

以前にNode express ect multerでファイルアップロードする機能を実装した記事を書いた。
今回は、そのNodeのプロジェクトを少しブラッシュアップして、GitHubに登録、公開した。
※ブラッシュアップ箇所は、日本語を英語に変更、プログラム内の不要なステートメントの削除など。

node express ect multerでファイルアップロード

手順は次のとおり。
自PCはMac book Pro、masOS High Sierra バージョン10.13.6

GitHubで新規リポジトリを作成する。
GitHubの自分のリポジトリの画面で、New repositoryボタンをクリック。

Repository nameに、multer_sample を入力。
Initialize this repository with a README をチェック。
Add .gitignoreで、Nodeを選択。
これら以外は、デフォルト値のまま。
Create repositoryボタンをクリック。

リポジトリが作成直後。
次の手順に進める。

自分のPCに作成したリポジトリをCloneするために、Clone or downloadボタンをクリック、SSHでClone用のテキストをコピーする。

自PCにmulter_sampleのプロジェクトをCloneする。
Gitのコマンドを入力する。その際にGitHubに登録したSSH keyのパスフレーズを聞かれるので入力が必要。
※[XXXXX]はユーザディレクトリ。

git clone git@github.com:takaharu-kobayashi/multer_sample.git
Cloning into 'multer_sample'...
Enter passphrase for key '/Users/[XXXXX]/.ssh/id_rsa': 
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 4 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (4/4), done.

自PCにmulter_sampleプロジェクトをClone直後。次の手順に進む。

multer_sampleにプログラム一式をコピーする。

multer_sampleプロジェクトの状態を確認してみる。
Gitのコマンドを入力する。

cd ./multer_sample/
git status
On branch master
Your branch is up to date with 'origin/master'.

Untracked files:
  (use "git add ..." to include in what will be committed)

 app.js
 bin/
 package.json
 public/
 routes/
 views/

nothing added to commit but untracked files present (use "git add" to track)

コピーしたプログラム一式をステージ領域に登録、確認をする。
Gitのコマンドを入力する。

git add .
git status
On branch master
Your branch is up to date with 'origin/master'.

Changes to be committed:
  (use "git reset HEAD ..." to unstage)

 new file:   app.js
 new file:   bin/www
 new file:   package.json
 new file:   public/javascripts/jquery-2.1.4.min.js
 new file:   public/uploads/dummy.txt
 new file:   routes/index.js
 new file:   views/error.ect
 new file:   views/footer.ect
 new file:   views/index.ect
 new file:   views/layout.ect
 new file:   views/script.ect

自PCのGitのリポジトリへ、前の操作でステージ領域に登録された内容をコミットする。
Gitのコマンドを入力する。

git commit -m "Added multer sample files"
[master f20cf5d] Added multer sample files
 11 files changed, 296 insertions(+)
 create mode 100644 app.js
 create mode 100755 bin/www
 create mode 100644 package.json
 create mode 100644 public/javascripts/jquery-2.1.4.min.js
 create mode 100644 public/uploads/dummy.txt
 create mode 100644 routes/index.js
 create mode 100644 views/error.ect
 create mode 100644 views/footer.ect
 create mode 100644 views/index.ect
 create mode 100644 views/layout.ect
 create mode 100644 views/script.ect

GitHubのリポジトリへ、自PCのGitリポジトリにコミットした内容をPushする。
Gitのコマンドを入力する。その際にGitHubに登録したSSH keyのパスフレーズを聞かれるので入力が必要。
※[XXXXX]はユーザディレクトリ。

git push
Enter passphrase for key '/Users/[XXXXX]/.ssh/id_rsa': 
Counting objects: 19, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (19/19), 32.59 KiB | 5.43 MiB/s, done.
Total 19 (delta 0), reused 0 (delta 0)
To github.com:takaharu-kobayashi/multer_sample.git
   80e8133..f20cf5d  master -> master

GitHubの画面でPushされた内容を確認する。問題なくPushした内容が反映されているみたいだ。

次は念のため、GitHubのmulter_sampleプロジェクトをCloneして動作するか確認する。
自PCのmulter_sampleプロジェクトがあるディレクトリではない別のディレクトリでCloneを行う。
Gitのコマンドを入力する。その際にGitHubに登録したSSH keyのパスフレーズを聞かれるので入力が必要。
※[XXXXX]はユーザディレクトリ。

git clone git@github.com:takaharu-kobayashi/multer_sample.git
Cloning into 'multer_sample'...
Enter passphrase for key '/Users/[XXXXX]/.ssh/id_rsa': 
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (23/23), done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 23 (delta 1), reused 19 (delta 0), pack-reused 0
Receiving objects: 100% (23/23), 33.63 KiB | 242.00 KiB/s, done.
Resolving deltas: 100% (1/1), done.

multer_sampleプロジェクトに必要なパッケージをインストールする。
npmのコマンドを入力する。
※package.json内で指定しているバージョンがdeprecateになっているものがある。2016年1月に作成したプログラムなので古いから、deprecateになっててもおかしくない。動作確認が目的なので、とりあえずそのままにしておく。

cd ./multer_sample/
npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm notice created a lockfile as package-lock.json. You should commit this file.
added 136 packages from 155 contributors and audited 212 packages in 3.884s
found 15 vulnerabilities (8 low, 2 moderate, 5 high)
  run `npm audit fix` to fix them, or `npm audit` for details

いよいよ、multer_sampleプロジェクトを動作させる。
npmのコマンドを入力する。

npm start

ブラウザで、multer_sampleプロジェクトを表示してみる。
ちゃんと表示された。あとアップロードも正常に動いた。
これで終わり。

ちなみに、GitHub上のmulter_sampleのリンクは次のとおり。

https://github.com/takaharu-kobayashi/multer_sample

node express ectにbootstrapを組み入れてみる

node express ectにbootstrapを組み入れてみる。

まず、次のサイトにアクセスする。

http://getbootstrap.com/

"Download Bootstrap"ボタンを押す。

"Download Bootstra"ボタンを押すとzipファイル(自分がダウンロード時のファイル名は、"bootstrap-3.3.6-dist.zip"でした。) をダウンロードする。

そして、ダウンロードしたzipファイルを解凍する。

この解凍されたcss、fonts、jsのフォルダをnodeのプロジェクトのpublicフォルダにコピーする。
nodeのプロジェクトのpublicフォルダには、はじめからjs及びcss用のフォルダとして、それぞれjavascripts、stylesheetsフォルダがあるが、今回はbootstrapのために、これらのフォルダは使用せず、ダウンロードしたzipファイルから解凍されたcss、fonts、jsのフォルダをそのまま、コピーすることにする。

コピー後

そして、今回は組み込んだbootstrapの動作確認のために、bootstrapのExsamplesにあるBootstrap themeのButtonsの部分を取り込んで正しく表示できるようにする。
* Examplesの中身を確認する方法は以下の記事を参照のこと。
  Bootstrapのサンプルを見る

Bootstrap themeのButtons部分のコードは次の通り。
これをindex.ectファイル内に組み込む。

<div class="page-header">
<h1>Buttons</h1>
</div>
<button class="btn btn-lg btn-default" type="button">Default</button>
<button class="btn btn-lg btn-primary" type="button">Primary</button>
<button class="btn btn-lg btn-success" type="button">Success</button>
<button class="btn btn-lg btn-info" type="button">Info</button>
<button class="btn btn-lg btn-warning" type="button">Warning</button>
<button class="btn btn-lg btn-danger" type="button">Danger</button>
<button class="btn btn-lg btn-link" type="button">Link</button>
   
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>

<button class="btn btn-sm btn-default" type="button">Default</button>
<button class="btn btn-sm btn-primary" type="button">Primary</button>
<button class="btn btn-sm btn-success" type="button">Success</button>
<button class="btn btn-sm btn-info" type="button">Info</button>
<button class="btn btn-sm btn-warning" type="button">Warning</button>
<button class="btn btn-sm btn-danger" type="button">Danger</button>
<button class="btn btn-sm btn-link" type="button">Link</button>

<button class="btn btn-xs btn-default" type="button">Default</button>
<button class="btn btn-xs btn-primary" type="button">Primary</button>
<button class="btn btn-xs btn-success" type="button">Success</button>
<button class="btn btn-xs btn-info" type="button">Info</button>
<button class="btn btn-xs btn-warning" type="button">Warning</button>
<button class="btn btn-xs btn-danger" type="button">Danger</button>
<button class="btn btn-xs btn-link" type="button">Link</button>

いよいよ、動作確認。
ブラウザで表示すると次のようになった。組み込んだbootstrapが、正しく動いている。

今回のbootstrapの動作確認に関連あるソースコードは以下の通り。

=== app.js ===
変更部分はexpressコマンドでプロジェクト生成後にect用に変更した13〜18行目

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

=== index.js ===
変更部分はなし。expressコマンドでプロジェクト生成後のそのまま。ただ載せているだけ。

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

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

module.exports = router;

=== error.ect ===
ectのエラー出力のためのテンプレート。bootstrapとは関係ない。ただ載せているだけ。

<html>
<head>
    <title>Error <%= @error.status %>>/title>
</head>
<body>
<span>
    Error Status: <%= @error.status %>
    <hr />
    <pre><%= @error.stack %></pre>
</span>
</body>
</html>

=== footer.ect ===
ectのフッター部分のテンプレート。bootstrapとは関係ない。ただ載せているだけ。

<div id="footer">
<div class="left">
Generated by ECT</div>
<% content 'footer-info' %>
</div>

=== index.ect ===
また、ExapmlesのButtons部分を取り込んでいる。8〜46行目

<% extend 'layout' %>

<%= "This is sample"  %>

<h1>
<%= @title %></h1>
Welcome to <%= @title %>



<div class="page-header">
<h1>
Buttons</h1>
</div>
<button class="btn btn-lg btn-default" type="button">Default</button>
<button class="btn btn-lg btn-primary" type="button">Primary</button>
<button class="btn btn-lg btn-success" type="button">Success</button>
<button class="btn btn-lg btn-info" type="button">Info</button>
<button class="btn btn-lg btn-warning" type="button">Warning</button>
<button class="btn btn-lg btn-danger" type="button">Danger</button>
<button class="btn btn-lg btn-link" type="button">Link</button>

<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>

<button class="btn btn-sm btn-default" type="button">Default</button>
<button class="btn btn-sm btn-primary" type="button">Primary</button>
<button class="btn btn-sm btn-success" type="button">Success</button>
<button class="btn btn-sm btn-info" type="button">Info</button>
<button class="btn btn-sm btn-warning" type="button">Warning</button>
<button class="btn btn-sm btn-danger" type="button">Danger</button>
<button class="btn btn-sm btn-link" type="button">Link</button>

<button class="btn btn-xs btn-default" type="button">Default</button>
<button class="btn btn-xs btn-primary" type="button">Primary</button>
<button class="btn btn-xs btn-success" type="button">Success</button>
<button class="btn btn-xs btn-info" type="button">Info</button>
<button class="btn btn-xs btn-warning" type="button">Warning</button>
<button class="btn btn-xs btn-danger" type="button">Danger</button>
<button class="btn btn-xs btn-link" type="button">Link</button>

<% block 'footer-info' : %>
  <div class="right">
page: sample</div>
<% end %>

=== layout.ect ===
ectのレイアウト外枠。
以下のbootstrapのテンプレート部分(http://getbootstrap.com/getting-started/#download に載っている。)を取り込んでいる。5、6、8〜10行目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><%- @title %></title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <% include 'script' %>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <% content %>
        <% include 'footer' %>
    </body>
</html>

=== script.ect ===
ectのscriptタグ部分箇所。bootstrapを動作させるために必要なjqueryの読み込みを定義。また、bootstrapsのjsの定義より前の行に定義する必要あり。

<script src="./javascripts/jquery-2.1.4.min.js"></script>

=== package.json ===
bootstrapとは関係ない。ただ載せているだけ。

{
    "name": "bootstrap",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.13.2",
        "cookie-parser": "~1.3.5",
        "debug": "~2.2.0",
        "express": "~4.13.1",
        "jade": "~1.11.0",
        "morgan": "~1.6.1",
        "serve-favicon": "~2.3.0"
    }
}

node express POSTのデータの送信と受信

node express ectでクライアントからサーバにPOSTでデータの送信と受信する処理をプログラミングしてみました。formのsubmitからの送信の場合とjQueryを使用して送信した場合です。

node expressのプロジェクトを生成して自分自身がプログラミングしたソースは次の通りです。(※実際はindex.ect以外のectファイルの編集もしていますが、今回の記事の内容と関係ないので割愛します。)

=== app.js ===
今回、クライアントから受信するPOSTデータをサーバ側で処理するプログラム(sendreceive.js)を紐つけています。(9、29行目)

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var sendreceive = require('./routes/sendreceive');

var app = express();

// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/sendreceive', sendreceive);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

=== sendreceive.js ===
クライアントから受信したデータ"sendParam"を、クライアントにJSONのデータに含めて、送信しています。(6行目)

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

/* POST ajax listing. */
router.post('/', function(req, res, next) {
    res.send({"send parameter is" : req.body.sendParam});
});

module.exports = router;

=== index.ect ===
formのsubmitして送信する場合は、"from form" を送信するようにしています。 (14行目)
jQueryを使用して送信する場合は、"from ajax" を送信するようにしています。 (36行目)

<% extend 'layout' %>

<%= "This is sample"  %>


<div id="drag-area" style="background-color: lightgrey; text-align: center;">
ajaxボタン送信ボタンを押すと、ajax送信します。<br />
<div class="btn-group">
<button id="btn">ajax送信</button>
</div>
</div>
<form action="/sendreceive" method="post" name="frm">
<input name="sendParam" type="hidden" value="from form" />
    >input type="submit" value="form送信" />
</form>
<div id="test">
</div>
<% block 'footer-info' : %>
  <div class="right">
page: sample</div>
<script>

$(function(){
    $('#btn').click(function() {
        sendData();
    });
});

function sendData() {

    $.ajax({
        url: "http://" + location.host + "/sendreceive",
        type: "post",
        data: {"sendParam": "from ajax"},
        success: function(data) {
            alert("データが送信されました。 : " + JSON.stringify(data));
        }
    });
}

</script>
<% end %>

また、後でメモとして見返すことを考えて、package.jsonも載せておきます。

=== package.json

{
    "name": "xxx",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.13.2",
        "cookie-parser": "~1.3.5",
        "debug": "~2.2.0",
        "express": "~4.13.1",
        "jade": "~1.11.0",
        "morgan": "~1.6.1",
        "serve-favicon": "~2.3.0",
        "node-stringify": "0.0.19"
    }
}

動作確認したスクリーンショットは次の通りです。

＊初期画面表示時
　jQueryを使用しての確認は"ajax送信"ボタンを押下して確認します。
　formのsubmitからの確認は"form送信"ボタンを押下して確認します。

＊"ajax送信"ボタンを押下後

＊"form送信"ボタンを押下後

node Readable readメソッドの戻り値のバッファについて

nodeのReadableオブジェクトのreadメソッドですが、
readメソッドの引数には、readメソッド実行結果のバッファのバイト数を設定することができるのですが、このバッファの値は、どのように設定されるのか確認してみました。

さて、確認方法ですが、以前にnodeのファイルアップロード処理の記事を書きましたが、
そのファイルアップロードされた内容をReadableオブジェクトのreadメソッドで取得してみました。

ファイル内容は次の通りです。
=== test.txt ===

abcあ

そして、app.jsで今回、確認でコーディングした部分です。(app.js全体でなく、該当部分のみです。)
=== app.js ===

var fs = require('fs');

app.post('/up', upload.single('upFile'), function (req, res, next) {
    var readableStream = fs.createReadStream(req.file['path']);
    readableStream.on('readable', function() {
        var chunk;
        while (null !== (chunk = readableStream.read(8))) {
            console.log('chunk[' + chunk + ']');
            for (var i = 0; i < chunk.length; i++) {
                console.log("chunk[" + i + "] = " + chunk[i] + " : chunk[" + i + "].toString(16) = " + chunk[i].toString(16));
            }

        }
    });
    res.render('index');
});

実行結果は、次の通りです。

chunk[abcあ
]
chunk[0] = 97 : chunk[0].toString(16) = 61
chunk[1] = 98 : chunk[1].toString(16) = 62
chunk[2] = 99 : chunk[2].toString(16) = 63
chunk[3] = 227 : chunk[3].toString(16) = e3
chunk[4] = 129 : chunk[4].toString(16) = 81
chunk[5] = 130 : chunk[5].toString(16) = 82
chunk[6] = 10 : chunk[6].toString(16) = a

readメソッドの実行結果のバッファそのものは、ファイル内容の文字列そのものです。
そして、そのバッファを1つずつ、取り出した内容ですが

"a"の文字は、97になっています。これは、UTF8のaを10進数にしているから、97なのです。なので、16進数だと、61ですね。

ちなみに、"あ"の文字の場合は、3バイトなので、16進数だと、e3,81,82になります。
この場合、繰り返しますが、1文字3バイトです。
なので、バッファリング後に文字列処理がある場合を考慮して
バッファリングする時に、文字コードを判定して、1文字に何バイトかの判断が必要になります。
例えば、"あ"の文字の場合に、e3,81のみで、82を次の文字と判断したらいけないです。
e3,81,82です。

node express ect multerでファイルアップロード

node express ect multerでファイルアップロード処理を作成してみました。
ちなみに、ファイルアップロードは、HTML5のFile APIを使用して、PCからブラウザにファイルをドラッグアンドドロップで、実行するようにしました。
次のサイトを参考にしました。

https://github.com/expressjs/multer

http://soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4

プログラムソースは次の通りです。

=== app.js ===
メインプログラムですね。
"/"のパスの処理が呼ばれたら、ファイルアップロード入力フォームを表示します。
(開発環境だと、http://localhost:3000/ に該当します。)

"/up"のパスの処理が呼ばれたら、ファイルアップロード処理を行っています。
(開発環境だと、http://localhost:3000/up に該当します。)
そして、アップロードされたファイルの属性をコンソールに出力させてます。

var multer = require('multer');

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var app = express();

var upload = multer({
    dest: __dirname + '/public/uploads/'
});

// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);

// routes setup
var routes = require('./routes/index');

app.use('/', routes);

app.post('/up', upload.single('upFile'), function (req, res, next) {
    for (var item in req.file) {
        console.log(item + ":" + req.file[item]);
    }
   res.render('index');
});

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
           error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

module.exports = app;

=== index.js ===
ファイルアップロード入力フォーム(index.ect)表示を促しています。
ただ、それだけです。

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

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index');
});

module.exports = router;

=== index.ect ===
ファイルアップロードの入力フォームです。

<% extend 'layout' %>

<div id="drag-area" style="background-color: lightgrey; text-align: center;">
アップロードするファイルをドロップ<br />
または<br />
    <div class="btn-group">
        <input name="upFile" style="display: none;" type="file" />
            <button id="btn">ファイルを選択</button>
    </div>
</div>
<% block 'footer-info' : %>
<div class="right">
page: upload</div>
<script>

$(function(){
    $('#drag-area').bind('drop', function(e){
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        upload(files);
    }).bind('dragenter', function(){
        return false;
    }).bind('dragover', function(){
        return false;
    });

    $('#btn').click(function() {
        $('input[type="file"]').click();
    });
 
    $('input[type="file"]').change(function(){
        var files = this.files;
        upload(files);
    });
});

function upload(files) {

    if (files == null || files.length == 0) {
        return;  
    }

    var frm = new FormData();
    frm.append("upFile", files[0]);

    $.ajax({
        url: 'http://' + location.host + '/up',
        type: 'post',
        data: frm,
        processData: false,
        contentType: false,
        success: function(data) {
            alert('ファイルがアップロードされました。');
        }
    });
}

</script>
<% end %>

package.json

{
    "name": "upload",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.13.2",
        "cookie-parser": "~1.3.5",
        "debug": "~2.2.0",
        "express": "~4.13.1",
        "jade": "~1.11.0",
        "morgan": "~1.6.1",
        "serve-favicon": "~2.3.0",
        "ect": "~0.5.9"
    }
}

なお、今回multerを使用していてハマったのが
上記のように、multerを変数に格納するのでなく、次のようにapp.useを使用するサンプルがググると見つかります。

app.use(multer({ dest: './upload/'}));

この通りに、コーディングして、動作させると次のエラーが発生しました。

TypeError: app.use() requires middleware functions

このエラーメッセーじをググると、stackoverflowに次の記事が見つかりました。

app.use…は使用できないみたいです。

そもそも、上記のmulterのgithubの使用方法に、app.use…は記載されてないですね。

http://stackoverflow.com/questions/31656178/typeerror-app-use-requires-middleware-function