ng-file複数のアップロードをアップロードして同じリストに追加する

Question

初めてng-file-uploadを使用しています。私は2つのボタンを持っています.1つは1つの画像用で、もう1つは複数のファイル用です。 1ボタンを使用すると、他のボタンからアップロードしたファイルを上書きします。上書きするのではなく、リストに追加するにはどうすればよいですか？

<!-- UPLOAD FILES BUTTON --> 
<a class="waves-effect waves-light btn col l2 m2 bluebut" 
    style="margin-left: 50px;" 
    id="upbut" 
    ngf-select="uploadFiles($files, $invalidFiles)" 
    multiple 
    accept="image/*" 
    ngf-max-size="50MB">UPLOAD FILE(S)</a> 
<label for="upbut" id="label-add-pat">Attach File(s)</label> 

<!-- UPLOAD PROFILE PIC --> 
<a class="waves-effect waves-light btn col m2 l2 bluebut" 
    style="margin-left: 53px;" 
    id="uppicbut" 
    ngf-select="uploadFiles($files, $invalidFiles)" 
    ng-model="picFile" 
    accept="image/*">UPLOAD PROFILE PICTURE 
</a> 
<label for="uppicbut" id="label-pic-pat">Upload a Profile Picture</label> 

<!-- FILE STUFF --> 
<br><br> 
<ul> 
    <li ng-repeat="f in files" style="font:smaller; margin-left: 51px;">{{f.name}} {{f.$errorParam}} 
    <span class="progress" ng-show="f.progress >= 0"> 
     <div style="width:{{f.progress}}%" 
      ng-bind="f.progress + '%'"></div> 
    </span> 
    </li> 
    <li ng-repeat="f in errFiles" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}} 
    </li> 
</ul> 
{{errorMsg}} 
<!-- END FILE STUFF --> 

---_ EDITは-------- コントローラー：

$scope.uploadFiles = function(files, errFiles) { 
     $scope.files = files; 
     $scope.errFiles = errFiles; 
     angular.forEach(files, function(file) { 
      file.upload = Upload.upload({ 
       url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
       data: {file: file} 
      }); 

      file.upload.then(function (response) { 
       $timeout(function() { 
        file.result = response.data; 
       }); 
      }, function (response) { 
       if (response.status > 0) 
        $scope.errorMsg = response.status + ': ' + response.data; 
      }, function (evt) { 
       file.progress = Math.min(100, parseInt(100.0 * 
             evt.loaded/evt.total)); 
      }); 
     }); 
    } 

Answer 1

問題は、今、あなたは$をリセットしていることuploadFilesイベントが実行されるたびにscope.filesということです。

uploadFiles関数の外で$ scope.files = []を設定する必要があります。

uploadFiles内で、ファイルを$ scope.files配列に追加します。これにより、新しいファイルが追加され、上書きされません。

$scope.files = [] 
$scope.uploadFiles = function(files, errFiles) { 
     files.forEach(function(e){$scope.files.push(e)}) 
     $scope.errFiles = errFiles; 
     angular.forEach(files, function(file) { 
      file.upload = Upload.upload({ 
       url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
       data: {file: file} 
      }); 

      file.upload.then(function (response) { 
       $timeout(function() { 
        file.result = response.data; 
       }); 
      }, function (response) { 
       if (response.status > 0) 
        $scope.errorMsg = response.status + ': ' + response.data; 
      }, function (evt) { 
       file.progress = Math.min(100, parseInt(100.0 * 
             evt.loaded/evt.total)); 
      }); 
     }); 

     } 

    } 

また、同じファイルが複数回アップロードされていないことをuploadFilesのどこかでチェックしたいと思うでしょう。 Angular ng-repeatは、同じ名前の要素を繰り返すとエラーになります。