IFormFile is always empty in Asp.Net Core WebAPI

angularjs, asp.net, asp.net-core, file-upload

Solution

This is how to do it with angularjs:

vm.addFile = function () {                      
                var fileUpload = $("#file").get(0);
                var files = fileUpload.files;
                var data = new FormData();
                for (var i = 0; i < files.length ; i++) {
                    data.append(files[i].name, files[i]);
                }


                $http.post("/api/Files/", data, {
                    headers: { 'Content-Type': undefined },
                    transformRequest: angular.identity
                }).success(function (data, status, headers, config) {

                }).error(function (data, status, headers, config) {

                });
}

And in web Api:

[HttpPost]
public async Task<IActionResult> PostFile()
{
 //Read all files from angularjs FormData post request
 var files = Request.Form.Files;
 var strigValue = Request.Form.Keys;
 .....
}

Or like this:

    [HttpPost]
    public async Task<IActionResult>  PostFiles(IFormCollection collection)
    {
        var f = collection.Files;                         

            foreach (var file in f)
            {
                //....
             }           
    }

Problem

I have a problem here when I am trying to push data with angularjs controller. But what ever I do (IFormFile file) is always empty. There are only some examples with razor syntax but no examples how to do it with angular or jquery. HTML: ``` <form class="form-body" enctype="multipart/form-data" name="newFileForm" ng-submit="vm.addFile()"><input type="file" id="file1" name="file" multiple ng-files="getTheFiles($files)"/></form> ``` Directive: ``` (function() { 'use strict'; angular .module('app') .directive('ngFiles', ['$parse', function ($parse) { function fn_link(scope, element, attrs) { var onChange = $parse(attrs.ngFiles); element.on('change', function (event) { onChange(scope, { $files: event.target.files }); }); }; return { link: fn_link }; }]); })(); ``` Controller ``` var formdata = new FormData(); $scope.getTheFiles = function ($files) { angular.forEach($files, function (key, value) { formdata.append(key, value); }); }; vm.addFile = function () { var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.setRequestHeader("Content-Type", "undefined"); xhr.send(formdata); } ``` Asp.net core webapi: ``` [HttpPost] public async Task<IActionResult> PostProductProjectFile(IFormFile file) { if (!ModelState.IsValid) { return BadRequest(ModelState); } .... return ...; } ``` I have also tried to do it with formdata, as it is constructed when you post it with razor syntax. Something like this: ``` dataService.addFile(formdata, { contentDisposition: "form-data; name=\"files\"; filename=\"C:\\Users\\UserName\\Desktop\\snip_20160420091420.png\"", contentType: "multipart/form-data", headers: { "Content-Disposition": "form-data; name=\"files\"; filename=\"C:\\Users\\UserName\\Desktop\\snip_20160420091420.png\"", 'Content-Type': "image/png" }, fileName: "C:\\Users\\UserName\\Desktop\\snip_20160420091420.png", name: "files", length : 3563 } ``` Also instead of formData to provide raw file as I wrote in comment. But still nothing happens

Original source