FormidableJS form does not parse when posted from AngularJS - node.js

Question

I am posting to a formidable form from AngularJS, but the form does not parse. I do not use the express.bodyParser(), which I understand often is a problem.
serverside:
...
var form = new formidable.IncomingForm();
console.log(form); //this prints
//Get access to the other fields of the request.
form.parse(req, function (err, fields, files) {
console.log("parsing.."); //this does not print
console.log(fields);
console.log(files);`
...
client-side:
...
$http({
method: 'POST',
url: '/api/ad',
data: message, // your original form data,
transformRequest: formDataObject, // this sends your data to the formDataObject provider that we are defining below. `[see this](https://stackoverflow.com/questions/17629126/how-to-upload-a-file-using-angularjs-like-the-traditional-way)`
headers: {'Content-Type': undefined}
})
.success(function(data, status, headers, config){
deferred.resolve(data); `
...
When posting form Angular with the formData object, I have to set the content/type to undefined as mentioned in the comment here. Might that be a problem for formidable?
I have been using hours to try to figure this out with no luck. I would be very grateful for any answers!

Answer 1

I figured out this. I had to bind the files to the controller, as well as using the angular.identity function. Based on this great explanation I added the following to my angular code in order to bind files to the controller: `
myApp.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;`
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
and the following to post my form to the url I wanted:
myApp.service('fileUpload', ['$http', function ($http) {
this.uploadFileToUrl = function(data, uploadUrl){
var fd = new FormData();
angular.forEach(data, function(value, key) {
fd.append(key, value);
});
$http.post(uploadUrl, fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(retObj){
console.log(retObj);
})
.error(function(retObj){
console.log(retObj);
});
}
}]);
In the submit-function in the controller I now add:
var formData = $scope.newForm;
var uploadUrl = '/api/add';
fileUpload.uploadFileToUrl(formData, uploadUrl);
and in my html, files-inputs gets the following tag in order to use the created file-model:
<input type="file" file-model="newForm.image1">
and my text inputs are just binded as before:
<input type="text" ng-model="newForm.title">
Hope this helps someone else :)