How to get req.body MEAN-Stack - angularjs

Question

I use the MEAN-Stack to upload images with tags.
While posting is working for me I cant get the form data for my updating/put part. I'm stuck at this part here in my routes file:
router.put('/update/:uuid/:filename', upload.single(), function (req, res, next) {
// console.log("_______________________req.FILES_______________________________________");
// console.log(req.files);
// console.log("_______________________req_______________________________________");
// console.log(req);
console.log("_______________________req.BODY_______________________________________");
console.log(req.body);
console.log(req.user);
Upload.findOneAndUpdate({
'file.filename': req.params.uuid,
'file.originalname': req.params.filename
}, {
// $set: {
// tags: req.body.tags
// }
},
function (err, upload) {
if (err) next(err);
else {
res.send(upload);
}
});
});
I I get something like this in the console.
_______________________req.BODY_______________________________________
{ '0': { _id: '593bff833ffbe41a523d03ad',
name: 'asdasdasd',
tags: { info: 'TestTag, Bla' },
created: '2017-06-10T14:17:39.501Z',
file:
{ fieldname: 'file',
originalname: 'ZzpXc6c.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
filename: '6fca88b03e88b7e72a751d7a44e9ed04',
path: 'uploads/6fca88b03e88b7e72a751d7a44e9ed04',
size: '303915' },
__v: '0',
'$hashKey': 'object:4' } }
This is the form
<div ng-controller="formCtrlUpdate" id="example-form" action="#">
<h2>Update</h2>
<ul>
<li ng-repeat="upload in image">
<a ng-href='{{upload.file.path + "/" + upload.file.originalname}}'>{{upload.file.originalname}}</a></br>
<img ng-src='{{upload.file.path + "/" + upload.file.originalname}}' />
<form ng-submit="submit()">
<legend>Update file here:</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" ng-model="upload.name" />
<br/>
<label for="CreatorArtist">Artist:</label>
<input type="text" name="CreatorArtist" id="CreatorArtist" class="demo-default" ng-model="upload.tags.CreatorArtist" />
<br/>
<label for="info">Image Description:</label>
<input type="text" name="info" id="info" ng-model="upload.tags.info" />
<br/>
<input type="submit" value="Update" />
</form>
</li>
</ul>
</div>
FYI this ist the working Uploading part
Routes
router.post('/', upload.single('file'), function (req, res, next) {
console.log(req.body);
var newUpload = {
name: req.body.name,
tags: req.body.tags,
created: Date.now(),
file: req.file
};
Upload.create(newUpload, function (err, next) {
if (err) {
next(err);
} else {
res.send(newUpload);
}
});
});
Upload Form
<div ng-controller="formCtrl">
<h2>Upload</h2>
<h1>Ein Test Upload</h1>
<form ng-submit="submit()">
<legend>Upload a new file here:</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" ng-model="upload.name" required/>
<br/>
<label for="CreatorArtist">Artist:</label>
<input type="text" name="CreatorArtist" id="CreatorArtist" class="demo-default" ng-model="upload.tags.CreatorArtist" required/>
<br/>
<label for="info">Image Description:</label>
<input type="text" name="info" id="info" ng-model="upload.tags.info" required/>
<br/>
<label for="file">File:</label>
<input type="file" class="imgInp" name="file" id="file" ng-model="upload.file" ngf-select ngf-max-size="25MB" required/>
<br/>
<input type="submit" value="Submit" />
</form>
</div>
and the controller
var app = angular.module('fileUpload', [
'ngFileUpload',
'ngResource',
'ngRoute'
]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.
when('/', {
templateUrl: '../views/home.html'
}).
when('/uploadForm', {
templateUrl: '../views/uploadForm.html'
}).
when('/updateForm', {
templateUrl: '../views/updateForm.html'
}).
otherwise('/');
app.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
$scope.submit = function () {
// console.log($scope.upload)
Upload.upload({
url: '/uploads',
method: 'post',
data: $scope.upload
}).then(function (response) {
console.log(response.data);
$scope.all.push(response.data);
$scope.upload = {};
console.log("Uploaded")
})
}
}]);
app.controller('formCtrlUpdate', ['$http', 'Upload', '$scope', '$routeParams', function ($http, Upload, $scope, $routeParams) {
console.log($routeParams);
$http.get('/uploads/update/' + $routeParams.uuid + '/' + $routeParams.filename).then(function (response) {
console.log(response.data);
$scope.image = response.data;
console.log("Beginning");
});
$scope.submit = function () {
console.log($scope.image)
// console.log("Update")
Upload.upload({
url: '/uploads/update/' + $routeParams.uuid + '/' + $routeParams.filename,
method: 'put',
// data: {
// _method: 'PUT',
// data: $scope.image
// }
data: $scope.image
}).then(function (response) {
// console.log(response.data);
$scope.all.push(response.data);
// $scope.image = {};
console.log("Update")
})
}
}]);
My question is now how can I get the form data in my req.body? Something like req.body.0 is not possible. With which parameters I can access something like in my POST/Upload part?

Answer 1

You can get the form data using req.body[0] It will display all the form data which you passed when you click update button .
Result:
{ _id: '593bff833ffbe41a523d03ad',
name: 'asdasdasd',
tags: { info: 'TestTag, Bla' },
created: '2017-06-10T14:17:39.501Z',
file:
{ fieldname: 'file',
originalname: 'ZzpXc6c.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
filename: '6fca88b03e88b7e72a751d7a44e9ed04',
path: 'uploads/6fca88b03e88b7e72a751d7a44e9ed04',
size: '303915' },
__v: '0',
'$hashKey': 'object:4'
}
or
if you want to get specific field like name you can use req.body[0].name