IFormFile è sempre vuoto in Asp.Net Core WebAPI

Question

Ho un problema qui quando sto provando a spingere i dati con il controller angularjs. Ma qualunque cosa io faccia (file IFormFile) è sempre vuota. Ci sono solo alcuni esempi con la sintassi del rasoio, ma nessun esempio su come farlo con angular o 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> 

direttiva:

(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 nucleo WebAPI:

[HttpPost] 
    public async Task<IActionResult> PostProductProjectFile(IFormFile file) 
    { 
     if (!ModelState.IsValid) 
     { 
      return BadRequest(ModelState); 
     } 

     .... 
     return ...; 
    } 

Ho anche provato a farlo con i formdata, dato che è costruito quando lo pubblichi con la sintassi del rasoio. Qualcosa di simile a questo:

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 
      } 

Inoltre, invece di formdata per fornire file raw come ho scritto nel commento. Ma ancora non succede nulla

Answer 1

Questo è come farlo con 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) { 

       }); 
} 

E nel 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; 
..... 
} 

O come questa:

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

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

Answer 2

Si può fare anche con il kendo caricare molto più semplice:

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

Answer 3

IFormFile funziona solo se il nome di ingresso è uguale al nome del parametro del metodo. Nel tuo caso il nome di input è 'files' e il nome del parametro del metodo è 'file'. Rendili uguali e dovrebbe funzionare.