Encountering an issue while attempting to upload multiple files using ng-file-upload in Angular.js. Below is a breakdown of my code:
<input type="file" class="filestyle form-control" data-size="lg" name="bannerimage" id="bannerimage" ng-model="file" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="100" ngf-resize="{width: 100, height: 100}" custom-on-change="uploadFile" required="required" ngf-select="onFileSelect($file);" ngf-multiple="true">
</div>
<label for="bannerimage" accesskey="B" ><span class="required">*</span> View Image</labe
<div style="padding-bottom:10px;" ng-repeat="pht in stepsModel">
<img ng-src="{{pht.image}}" border="0" name="bannerimage" style="width:70px; height:70px;" id="imgId">
</div>
The corresponding controller-side code looks like this:
$scope.stepsModel = [];
$scope.allFiles=[];
$scope.uploadFile = function(event){
console.log('event',event.target.files);
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = $scope.imageIsLoaded;
reader.readAsDataURL(file);
}
};
$scope.imageIsLoaded = function(e){
$scope.$apply(function() {
var data={'image':e.target.result};
$scope.stepsModel.push(data)
});
}
$scope.submitImage=function(){
console.log('all files',$scope.allFiles);
}
$scope.onFileSelect = function($files) {
$scope.allFiles.push($files);
}
The issue arises when inspecting the image URLs in the console message within the submitImage function:
all files [Blob, null, Blob, null, Blob]
0: Blob
1: null
2: Blob
3: null
4: Blob
Objectlength: 5v
Despite uploading only 3 files, the length displayed is 5, indicating a non-sequential order. Assistance needed to ensure all files are listed serially. Thank you.