IFormFile ist immer leer in Asp.Net Core WebAPI

Question

Ich habe hier ein Problem, wenn ich versuche, Daten mit angularjs Controller zu pushen. Aber was auch immer ich mache (IFormFile-Datei) ist immer leer. Es gibt nur einige Beispiele mit Rasierersyntax, aber keine Beispiele, wie man es mit eckigen oder jQuery macht.

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> 

Richtlinie:

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

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

     .... 
     return ...; 
    } 

Ich habe auch versucht, es mit formdata zu tun, wie es konstruiert wird, wenn Sie es mit Rasierersyntax veröffentlichen. Etwas wie folgt aus:

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 
      } 

auch statt Formdata Raw-Datei zur Verfügung zu stellen, wie ich in Kommentar schrieb. Aber immer noch nichts passiert

Answer 1

Dies ist, wie es mit AngularJS zu tun:

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) { 

       }); 
} 

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

Oder wie folgt aus:

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

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

Answer 2

Sie können tun, es auch mit kendo laden viel einfacher:

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

Answer 3

IFormFile funktioniert nur, wenn Sie den Namen eingeben, der mit dem Namen Ihres Methodenparameters übereinstimmt. In Ihrem Fall lautet der Name der Eingabe "files" und der Name des Methodenparameters ist "file". Mach sie gleich und es sollte funktionieren.