$http.post angularJS with files. ASP.NET

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; }
    //..
}