使用Angular.js上传后如何收集数组中的多个文件

Question

I need one help.I have multiple file upload functionality in my app.Here i need to collect all files in an array so that i can upload those and also display them after selecting.I am explaining my code below.

<div class="input-group bmargindiv1 col-md-12" ng-repeat="mul in mulImage">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
 <div>
<div ng-class="{'myError': billdata.uploadme_{{$index}}.$touched && billdata.uploadme_{{$index}}.$invalid }">
<input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="400" ngf-resize="{width: 400, height:400}"  ngf-select="onFileSelect('upload_{{$index}}',mul.image);">
<div style="clear:both;"></div>
</div>
</div>
<span class="input-group-btn" ng-show="showImage{{$index}}">
<img ng-src="{{attachmultipleimage_$index}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;">
<input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">
 </span>
 <div class="help-block" ng-messages="billdata.uploadme_{{$index}}.$error" ng-if="billdata.uploadme_{{$index}}.$touched">
 <p ng-message="maxSize" style="color:#F00;">File is too large.Max size is 2 mb.</p>
 <p ng-message="minHeight" style="color:#F00;">Minimum height should be 400px</p>
</div>
 </div>
 </div>

Here when i am clicking on plus button one new image row is creating and similarly when i will click on minus button one image uploading row will eliminate.My controller side code is given below.

$scope.mulImage=[];
   $scope.mulImage.push({'image':null});
   $scope.addNewImageRow=function(mulImage){
       mulImage.push({'image':null});
   }
   $scope.deleteNewImageRow=function(mulImage,index){
       mulImage.splice(index,1);
   }
   $scope.onFileSelect = function(name,$files,index) {
        var files =$files;
        for (var i = 0; i < files.length; i++) {
             var file = files[i];
             var reader = new FileReader();
             reader.onload = $scope.imageIsLoaded(index); 
             reader.readAsDataURL(file);
        }
   }

I have already done something.Here i need to display the selected image ( img ng-src="{{attachmultipleimage_$index}}" ) in each new created row and collect all the selected files to upload.Please help me.

Answer 1

It looks like angular-file-upload is better suited for you because it has this functionality built in. It's file uploader instance has an array queue which contains all the selected files and also has lots of helper methods.

this example does what you want to do, select multiple image files and preview them.

Major code would be:

angular.module('app', ['angularFileUpload'])
  .controller('AppController', ['$scope', 'FileUploader',
      function($scope, FileUploader) {
        // create an instance
        $scope.uploader = new FileUploader({
          url: 'upload.php'
        });
      });

Then you can use it like:

<input type="file" nv-file-select="" uploader="uploader" multiple />
<br/>
<div ng-repeat="item in uploader.queue">
  <strong>{{ item.file.name }}</strong>
  <div ng-show="uploader.isHTML5" ng-thumb="{ file: item._file, height: 100 }"></div>
</div>

ng-thumb is a directive written by it's author for image preview example.

In short, just grab this image-preview and modify it if necessary

Answer 2

The following will allow to add files to the queue and remove them. The key is to use ngf-keep="true" .

<button ngf-select ng-model="allFiles" ngf-keep="true">Add File</button>

<div ng-repeat="f in allFiles">
    <img ngf-thumbnail="f">
    <button ng-click="removeFile($index)">delete</button>
</div>

<button ng-click="upload()">upload all</button>


$scope.removeFile = function(index) {
    $scope.allFiles.splice($index, 1);
    $scope.allFiles = $scope.allFiles.slice(0);
}

$scope.upload = function() {
    Upload.upload({..., data: {file: allFiles}});
}