IFormFile is always empty in Asp.Net Core WebAPI

Question

I have a problem when I try to output data using angularjs controller. But what I do (IFormFile) is always empty. There are only some examples with razor syntax, but no examples of how to do this using 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 also tried to do this with formdata as it is created when you submit it with razor syntax. Something like that:

 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 a raw file, as I wrote in a comment. But still nothing is happening.

Answer 1

Here's 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) { //.... } } 

Answer 2

IFormFile will only work if the input name matches the name of the method parameter. In your case, the input name is “files” and the name of the method parameter is “file”. Make them the same and they should work.

Answer 3

You can do this also by downloading kendo much easier:

 $("#files").kendoUpload({ async: { saveUrl: dataService.upload, removeUrl: dataService.remove, autoUpload: false }, success: onSuccess, files: files });