How to upload file using multer or body-parser

multer() returns a middleware generator that uses the settings you specified, so you cannot pass its return value directly to app.use(). You can see all of the types of middleware it can generate in the documentation, but typically the generated middleware are added at the route level instead of globally like the other body parsers. This is because you will typically pass in the name of the file field(s) that you will be expecting.

For example, this will accept a single file (along with any non-file fields) whose form field name is foo:

var upload = multer({  dest: path.join(__dirname, '../public/upload/temp')});// ...app.post('/upload', upload.single('foo'), function(req, res) {  if (req.file) {    console.dir(req.file);    return res.end('Thank you for the file');  }  res.end('Missing file');});

Also, body-parser does not currently export a multipart/form-data-capable middleware, so you cannot use that module for handling uploaded files (well, short of passing a base64-encoded string in an application/x-www-form-urlencoded form or something, but that's much less efficient).

Here is the basic code for file upload in MEAN please check

HTML

<form id="frmDoc" name="frmDocument" ng-submit="upload()" class="form-horizontal form-bordered" enctype="multipart/form-data" >        <fieldset>            <div class="form-group">                <label class="col-md-4 control-label" for="val_email">Document<span class="text-danger">*</span></label>                <div class="col-md-4">                    <div class="input-group">                    <input type="file" name="file" id='file' required="required" />                    </div>                </div>            </div>        </fieldset>        <div class="form-group form-actions">            <div class="col-md-8 col-md-offset-4">                <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> submit</button>            </div>        </div>    </form>

CLIENT SIDE CODE

app.controller ('myctrl',function($scope,$http){  $scope.upload = function () {            var file = angular.element(document.querySelector('#file')).prop("files")[0];                $scope.files = [];                $scope.files.push(file);                $http({                    method: 'POST',                    url: '/users/upload',                    headers: { 'Content-Type': undefined },                    transformRequest: function (data) {                        var formData = new FormData();                        formData.append('model', angular.toJson(data.model));                        formData.append('file', data.files[0]);                        return formData;                    },                    data: { model: { title: 'hello'}, files: $scope.files }                }).success(function (res) {                    console.log(res)                });        }});

SERVER SIDE CODE

var multer  = require('multer');var mkdirp = require('mkdirp');var storage = multer.diskStorage({  destination: function (req, file, cb) {    //var code = JSON.parse(req.body.model).empCode;    var dest = 'public/uploads/';    mkdirp(dest, function (err) {        if (err) cb(err, dest);        else cb(null, dest);    });  },  filename: function (req, file, cb) {    cb(null, Date.now()+'-'+file.originalname);  }});var upload = multer({ storage: storage });router.post('/upload', upload.any(), function(req , res){    console.log(req.body);    res.send(req.files);});

I corrected the code of the book "Web Development with MongoDB and NodeJS" as follows:

app.use(multer({dest:path.join(__dirname,'../public/upload/temp')}).any());....const tempPath = req.files[0].path,  // Temporary location of uploaded fileext = path.extname(req.files[0].originalname).toLowerCase(), // Get file extension of the uploaded filetargetPath = path.resolve(`./public/upload/${imgUrl}${ ext}`); // The final path for the image file

The other parts of code remained intact. It worked and I could upload image files.Best wishes,Mehrdad Sheikhan