$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; }
}

Depending on your browser support needs, you could use `FormData` to build the post payload (i.e. with [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append)) and then issue a `$http.post()` with the `FormData` object. You should be able to get to any attached files on the server side through the `HttpContext` (i.e. `Request.Form.Files`). — miqh, Feb 24 '19 at 07:08
For uploading files, you need to specify the header with `headers: {'Content-Type': 'multipart/form-data'}`, with this header, you need to use `FromForm` instead of `FromBody`. — Edward, Feb 25 '19 at 06:57

score 1 · Accepted Answer · answered Mar 01 '19 at 22:44

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

Thanks man. It is work! But now I need to send array of file. I mean to uploaded 3 photos. If I make IList It i will be null but headline and body text will be come — FX_Sektor, Mar 02 '19 at 15:01
I add a new question https://stackoverflow.com/questions/54959940/to-change-iformfile-to-ilistiformfile-and-sent-http-post-request-angularjs — FX_Sektor, Mar 02 '19 at 15:13

$http.post angularJS with files. ASP.NET

1 Answers1