FormData append not working with $http post - angularjs

Question

I want to submit info to an online server and it requires that I send that using FormData.
So I am using the following function for that
var my_app = angular.module("my-app",[])
my_app.controller("MainController", function($scope, $http){
$scope.master = {title: "Title",desc: "Desctibe", tags: ["One","Two"], category: ["1","2"] };
var url = "http://freedoctor.southeastasia.cloudapp.azure.com/api/forum/create";
var config = {"headers":{"Authorization":"JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU5MzEwNDUxZjk3MjJmZTQyODE1NTIxYSIsInJvbGUiOiJwYXRpZW50IiwiaWF0IjoxNDk3NDE4ODA3fQ.ODrSlYwxvrPb93IzHW3s-7NIVFsOL4pKzqZx8yMqWWE"}};
$scope.booking = function(){
$scope.title=$scope.user.title;
$scope.desc=$scope.user.desc;
$scope.tags=$scope.user.tags;
$scope.category=$scope.user.category;
$scope.askedTo=$scope.user.askedTo;
var info = new FormData();
info.append("title", $scope.title);
info.append("desc", $scope.desc);
info.append("tags", $scope.tags);
info.append("category", $scope.category);
$http.post("http://localhost:8080/"+url, info, config).then(
function(response){
console.log(response);
$scope.reply = response.data;
},
function(response){
console.log(response);
$scope.reply = response.data;
});
}
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
So whenever I call booking function I get an internal server error
SyntaxError: Unexpected token -
at parse (/home/freedoctor/fdhbackend/node_modules/body-parser/lib/types/json.js:83:15)
at /home/freedoctor/fdhbackend/node_modules/body-parser/lib/read.js:116:18
at invokeCallback (/home/freedoctor/fdhbackend/node_modules/raw-body/index.js:262:16)
at done (/home/freedoctor/fdhbackend/node_modules/raw-body/index.js:251:7)
at IncomingMessage.onEnd (/home/freedoctor/fdhbackend/node_modules/raw-body/index.js:307:7)
at emitNone (events.js:86:13)
at IncomingMessage.emit (events.js:185:7)
at endReadableNT (_stream_readable.js:974:12)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickDomainCallback (internal/process/next_tick.js:122:9)
I know the FormData is working as i checked it out with this
for (var pair of info.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}

Answer 1

The additional data that you are trying to pass along the formData object should be appended to the data property of the FormData Object. I once wrote the following function. Should work for you too:
this.uploadFile = function (url, dataToUpload) {
var data = new FormData();
data.append("file", dataToUpload.file); //if you want to upload files along, else ignore this line
data.append("data", angular.toJson(dataToUpload.data)); //you can pass an object containing additional data and then append it here to the data property
return $http.post(url, data, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
});
}
You can chain your .then callbacks to the returned object from this function.
Try this and update if you face any issue.