Multer - Cannot read property 'path' of undefined

I am using multer module as advised to upload files. following properly the ressource, I have defined my form to be multipart/form-data, and added the module multer to npm but I do get all sort of error messages such as Cannot read property 'path' of undefined. Here below are the different parts of my code.

var path = require('path');
var express = require('express');
var routes = require('./routes'); //routes for GET, POST...requests
var exphbs = require('express-handlebars'); //templating engine
//var bodyParser = require('body-parser'); //form submission request are    accessible with req.body
var cookieParser = require('cookie-parser'); //cookies to be send and received
var morgan = require('morgan'); //module for logging - used in debugging
var methodOverride = require('method-override'); //for older browser to fake REST verbs
var errorHandler = require('errorhandler'); //handles error through the middleware
var moment = require('moment'); //npm module to handle dates formating
var multer = require('multer'); //to handle file uploading

module.exports = function(app) {

app.use(morgan('dev'));
//app.use(multer({dest: path.join(__dirname, 'public/upload/temp')})); //proper use of multer
app.use(multer({ dest: path.join(__dirname,'public/upload/temp')}).any());

app.use(methodOverride());
app.use(cookieParser('IciCestParis'));

routes(app); //moving the routes to route folder

app.use('/public/', express.static(path.join(__dirname,'../public')));

if ('development' === app.get('env')) {

  app.use(errorHandler());
}

//register the rendering engine as handlebars
app.engine('handlebars', exphbs.create({

    defaultLayout: 'main',
    layoutsDir: app.get('views') + '/layouts',
    partialsDir: app.get('views') + '/partials',

    //hbs helper
    helpers: {
        timeago: function(timeStamp){

            return moment(timeStamp).startOf('minute').fromNow(); //custom time using moment.js
        }
    }

}).engine);

//set the view engine
app.set('view engine', 'handlebars');

return app; //return the app
};

My view:

<form method="post" action="/images" enctype="multipart/form-data">
    <div class="panel-body form-horizontal">
        <div class="form-group col-md-12">
            <label for="file" class="col-sm-2 control-label">Browse:</label>
            <div class="col-md-10">
                <input type="file" name="file" id="file" class="form-control">
            </div>
        </div>

Controller:

// file location and extension variables

        var tempPath = req.files.file.path;
        var ext = path.extname(req.files.file.name).toLowerCase();
        var finalPath = path.resolve('./public/upload' + imageUrl + ext);

I have looked at most similar questions posted here but none of them helped figure it out. Any help would be greatly appreciated.

via Celaro