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