$http.post angularJS with files. ASP.NET - angularjs

Question

Try to use one of this example - Angularjs $http post file and form data
for example this
$scope.createPost = function () {
$http({
method: 'POST',
url: '/api/Blog/create-post/',
headers: {'Content-Type': 'multipart/form-data'},
data: {
Headline: $scope.Headline,
BodyText: $scope.BodyText,
ImgPost: $scope.fileAdress
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
})
.then(function onSuccess(response){
if(response.data = "Ok"){
$window.location.reload();
}
})
.catch(function onError(response) {
console.log("Error")
});
}
But I have an error in console (Internal Server Error) 500. I deleted header in my post request and it goes to api controller but with null parameters;
If I modify to this case shown below, but with out files it is working good.
$scope.createPost = function () {
$http({
method: 'POST',
url: '/api/Blog/create-post/',
data: {
Headline: $scope.Headline,
BodyText: $scope.BodyText,
},
})
.then(function onSuccess(response){
if(response.data = "Ok"){
$window.location.reload();
}
})
.catch(function onError(response) {
console.log("Error")
});
}
and I have this result
How I must modify my $http.Post that it will works with files?
My PostViewModel
public class PostViewModel
{
[ScaffoldColumn(false)]
public int Id { get; set; }
[ScaffoldColumn(false)]
public string User { get; set; }
[StringLength(100, MinimumLength = 1)]
public string Headline { get; set; }
[StringLength(1000, MinimumLength = 1)]
public string BodyText { get; set; }
[ScaffoldColumn(false)]
public DateTime? Date_Time { get; set; }
public IList<IFormFile> ImgPost { get; set; }
public IList<int> fileAdress { get; set; }
}

Answer 1

First of all check if $scope.fileAdress is set to actual file. In $http call you can set Content-Type header to undefined before transformRequest
$http({
method: 'POST',
url: '/api/Blog/create-post/',
headers: {'Content-Type': undefined }, //set undefined here
data: {
Headline: $scope.Headline,
BodyText: $scope.BodyText,
ImgPost: $scope.fileAdress
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
return formData;
}
})
Also you need to change action parameter attribute to [FromForm] or you can just remove it completely
[HttpPost]
[Route("create-post")]
public async Task<object> PostSaveOnFile(PostViewModel model)
This is enough to make it work. If you need to pass a single file consider updating your model to contain IFormFile instead of IList<IFormFile>
public class PostViewModel
{
//..
public IFormFile ImgPost { get; set; }
//..
}