using ng-file-upload to upload file from client to node and multer at node js to upload file on server, get req.file undefined always

Question

I am using ng-file-upload to upload file from angular client to node js and at server side I am using multer to upload, Problem is I am not getting any error in multer but file is not uploaded, I found req.file is undefined always.Thanks in advance. I am sharing my code:

view:

 <form name="uploadform" role="upload" enctype="multipart/form-data" ng-submit="uploadFile();">
  <input type="file" placeholder="Browse" class="btn btn-sm btn- 
default" accept="application/pdf,application/msword,application/excel" 
ngf-select="onFileSelect($files)">
</form>

myController:

$scope.onFileSelect = function($files) {
        $scope.uploadfile = $files;
        console.log("onFileSelect $scope.uploadfile is "+$scope.uploadfile);
        for (var i = 0; i < $files.length; i++) {
          var $file = $files[i];
          console.log("$file name is "+$file.name);
          console.log("$file type is "+$file.type);
          console.dir("$file is "+$file);
        }
    }

    //After click on  upload button following method get called and fot that Upload here is ng-upload-file
$scope.uploadFile = function(){
    Upload.upload({
        url: hostname+'/upload',
        //file:$scope.uploadfile[0], //webAPI exposed to upload the file
        data:{file:$scope.uploadfile[0]} //pass file as data, should be user ng-model

    }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
        //upload function returns a promise
        if(data.data.error_code === 0){ //validate success
            $window.alert('Success ' + data.config.data.file.name + 'uploaded. Response: ');
        } else {
            $window.alert('an error occured');
        }
    });
}

Routing:

    router.post('/upload',upload1);

In app.js:

    var multer = require('multer');

    var storage = multer.diskStorage({ //multers disk storage settings
        destination: function (req, file, cb) {
            console.log("come inside storage destination"+" file is "+file);
            cb(null, './uploads/')
        },
        filename: function (req, file, cb) {
            var datetimestamp = Date.now();
            console.log("come inside filename");
            cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1])
        }
    });

    var upload = multer({ //multer settings
                        storage: storage
                    }).single('file');*/


    upload1: function(req, res) {

        req.headers['content-type'] = 'multipart/form-data; boundary=something';
        res.setHeader('Content-Type', 'applicaton/json');

        /** API path that will upload the files */

        console.dir("req is "+req);


        req.headers['content-type'] = 'multipart/form-data; boundary=something';
        res.setHeader('Content-Type', 'applicaton/json');
        upload(req,res,function(err){
            if(err){
                 res.json({error_code:1,err_desc:err});
                 return;
            }
            res.json({error_code:0,err_desc:null});

            console.log("req.file" +req.file);


        })

    }

b3nc1 b3nc1 · Accepted Answer · 2018-04-17T08:51:58

you should take the file as parameter in your function

$scope.uploadFile = function(file){
    Upload.upload({
        url: hostname+'/upload',
        //file:$scope.uploadfile[0], //webAPI exposed to upload the file
        data:{file:file} //pass file as data, should be user ng-model

    }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
        //upload function returns a promise
        if(data.data.error_code === 0){ //validate success
            $window.alert('Success ' + data.config.data.file.name + 'uploaded. Response: ');
        } else {
            $window.alert('an error occured');
        }
    });
}

using ng-file-upload to upload file from client to node and multer at node js to upload file on server, get req.file undefined always

1 Answers