Carica più file con FormData utilizzando AngularJS e Asp.Net MVC

Question

Voglio caricare più file utilizzando js angolari, per questo sto utilizzando FormData().

Ecco il mio i campi del modulo

<input name="profileImage" type="file" class="upload" 
    onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*"> 

<input name="avatarImage" type="file" class="upload" 
    onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*"> 

    <input name="Id" type="text" ng-model="user.Id" /> 
<input name="Name" type="text" ng-model="user.Name" /> 

Ecco il mio controller Asp.Net MVC

public ActionResult AddUser(string user, HttpPostedFileBase[] files) 
{ 
    // parse user into User 
} 

e il controller angolare

.controller('formController',['$scope','$http', function ($scope, $http) { 
    $scope.user = { 
     Id: 0, 
     Name: "" 
    }; 
    $scope.files = []; 

    $scope.LoadFileData = function(files) { 
     $scope.files = files; 
    }; 

    $scope.submit = function() { 
     $http({ 
      url: "/Home/AddUser", 
      method: "POST", 
      headers: { "Content-Type": undefined }, 
      transformRequest: function(data) { 
       var formData = new FormData(); 
       formData.append("user", angular.toJson(data.user)); 
       for (var i = 0; i < data.files.length; i++) { 
        formData.append("files[" + i + "]", data.files[i]); 
       } 
       return formData; 

      }, 
      data: { user: $scope.user, files: $scope.files } 
     }) 
     .success(function(response) { }); 
    }; 
}); 

Il problema è che voglio caricare più di una immagine per profilo e l'altra per avatar. Quando carico, compare solo la seconda che sovrascrive quella precedente. Ho provato a spingere $ scope.files.push (file) ma dà null.Need aiuto quello che mi manca.

Answer 1

modificare la funzione

$scope.LoadFileData = function (files) { 
     $scope.files.push(files[0]); 
    }; 

filesLoadFileData restituisce un oggetto Filelist e oggetto file reale è nella posizione di indice 0.

Answer 2

$scope.LoadFileData = function (element) { 
     var filesX = element.files; 
     for(var i=0;i<filesX.length;i++) 
     { 
      $scope.files.push(filesX[i]); 
     } 
    }