req.file is undefined when using AWS

On local host req.file is available however on my ec2 instance whenever I try and upload a file req.file is always undefined. I dont know what to do about it at this point.

var storage = multer.diskStorage({ destination: function (req, file, cb) {
  cb(null, './app/uploads')},  filename: function (req, file, cb) {
      crypto.pseudoRandomBytes(16, function (err, raw) {
       cb(null, raw.toString('hex') + Date.now() + '.' + mime.extension(file.mimetype)); });  });

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

here is the code that uploads

    vm.submit = function(){ //function to post a profile picture
      vm.upload(vm.file); 
    }
    vm.upload = function (file) {
        Upload.upload({
            url: 'http://www.mealabode.com:8080/#!/upload', 
            data:{file:file} 
        }).then(function (resp) { 
            if(resp.data.error_code === 0){ 
            } else {
                $window.alert('an error occured');
            }
        }, function (resp) { 
            console.log('Error status: ' + resp.status);
            $window.alert('Error status: ' + resp.status);
        }, function (evt) { 
            console.log(evt);
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
            vm.progress = 'progress: ' + progressPercentage + '% '; 
        });
    };

and the post

 app.post('/upload', function(req, res) {
  sess = req.session.passport.user
    console.log(sess)
    console.log("this is in upload")
    upload(req,res,function(err){
           console.log(req.file)
           console.log(req.files)
           var path = req.file.path.substring(3)
           var host = "http://www.mealabode.com:8080/" + path

         Users.findOneAndUpdate({ "_id": sess }, { $set:{ "profilepic": host}}, {upsert:true}, function(err,docs){

        })
        if(err){
             res.json({error_code:1,err_desc:err});
             return;
        }
         res.json({error_code:0,err_desc:null});
    })
});

I saw another user had a similar problem and the solution was to have body-parser before the multer declaration which i did. I also have the body parser declarations before the multer storage declaration like the previous solution suggested

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

also heres the html section. Im using ng-fileupload

<form ng-controller="ChefCtrl as up" name="up.upload_form">
        <span ng-show="up.file"><img style="width:100px;" ngf-thumbnail="up.file"/></span>
        <br>
        <br>
        <input type="file" ngf-select ng-model="up.file" name="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="20MB" />
        <i ng-show="up.upload_form.file.$error.required">*required</i>
        <br>
        <i ng-show="up.upload_form.file.$error.maxSize">File too large 
        MB: max 20M</i>
        <button type="submit" ng-click="up.submit()">submit</button>
        <p></p>
    </form>

thanks for any help

via teknek