How to serialize form with input files? - angularjs

Question

I have form with textarea and:
<input type="file" name="files" file-input="files" multiple />
How to serialiaze this form and send AJAX with textarea value and files using:
I tried this way:
$scope.send = function(data) {
var path = $filter('sprintf')(paths.comment.send, $scope.issue.project.id, $scope.issue.campaign.id, $scope.issue.id);
var formData = new FormData();
angular.forEach($scope.files, function(value, key) {
formData.append(key, value);
});
formData .append('body', $scope.comment.body);
$http({
method: 'POST',
url: path,
transformRequest: angular.identity,
headers: {
'Content-Type': 'multipart/form-data',
'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
},
data: formData
})
.then(function(data) {
console.log(data);
},
function(response) {
console.log(response);
});
};
But it does not work

Answer 1

When sending a formData object created by the FormData API, it is important to set the content type header to undefined.
var formData = new FormData();
angular.forEach($scope.files, function(value, key) {
formData.append(key, value);
});
formData .append('body', $scope.comment.body);
$http({
method: 'POST',
url: path,
transformRequest: angular.identity,
headers: {
//'Content-Type': 'multipart/form-data',
//USE content type undefined
'Content-Type': undefined,
'X-CSRF-Token': $('meta[name=csrf-token]').attr('content')
},
data: formData
})
Normally the $http service sets the content type to application/json. When the content type header is undefined, the content type is set by the XHR send method.
In this case the XHR API needs to include the encapsulation boundary with the content type header. It "does not work" with formData objects when the XHR API is forced to use a content type header without an encapsulation boundary.