I am utilizing Multer for uploading photos. My backend technology is Node, and I have managed to successfully upload the image. However, upon uploading the image and receiving the response back in Angular via json, all I see in the console log is [object Object]. Despite attempting to use stringify, I cannot view the response in the UI. Understanding and working with responses often proves challenging for me, and I am eager to finally grasp this concept. The HTML displays nothing.
Response from my Node.js server:
apiRoutes.post('/admin/photos',upload.single('file'),function(req,res){
console.log(req.file);
res.json(req.file);
});
Angular Upload:
$scope.submit = function() {
if ($scope.file) {
$scope.upload($scope.file);
}
};
// Function to handle file upload on select or drop
$scope.upload = function (file) {
Upload.upload({
url: '/api/admin/photos',
headers : {
'Content-Type': 'multipart/form-data',
},
data: {file: file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
$scope.myPic = resp.config.data.file.name;
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
}]);
HTML:
<form ng-controller="adminController" name="form" enctype="multipart/form-data">
Single Image with validations
<div class="button btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
>Select</div>
<button type="submit" ng-click="submit()">Submit</button>
</form>
<p>{{ myPic }} </p>
<ul ng-repeat="picture in myPic">
<li>{{ picture }} </li>
</ul>