angularjs - IFormFile is always empty in Asp.Net Core WebAPI

Question

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

Answer 1

IFormFile will only work if you input name is the same as your method parameter name. In your case the input name is 'files' and the method parameter name is 'file'. Make them the same and it should work.