Angular 1.x image upload preview code not updating DOM - angularjs

Question

Using Angular 1.x I want to provide a drag and drop box for uploading images. When the images have been dropped I want to show a preview in the front end.
This is my code:
dropbox.addEventListener("drop", function(evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.$apply(function(){
$scope.dropText = 'Drop files here...';
$scope.dropClass = '';
});
var files = evt.dataTransfer.files;
if (files.length > 0) {
$scope.listing.listing_images = [];
$scope.imagepreview = [];
for (var i = 0; i < files.length; i++) {
// push the image to be uploaded
$scope.listing.listing_images.push(files[i]);
// push the image to be rendered
var reader = new FileReader();
reader.onload = function (e) {
$scope.imagepreview[i] = e.target.result;
}
reader.readAsDataURL(files[i]);
}
console.log($scope.imagepreview);
console.log($scope.imagepreview.length);
}
}, false);
If I drop say 3 images into the dropbox area and I console.log $scope.imagepreview I can see that the image is stored - so far so good!
[]
0: "data:image/jpeg;base64,/9j/4fzyRXhpZgAATU0AKgAAAAg"
1: "data:image/jpeg;base64,/9j/4f8ERXhpZgAATU0AKgAAAAg"
2: "data:image/jpeg;base64,/9j/4f+eRXhpZgAATU0AKgAAAAg"
length: 3
__proto__: Array(0)
Then on the very next line:
$scope.imagepreview.length 0
This makes no sense and looks like a bug to me, how can Scope object have data but also have a length of 0?
The problem is that in my template when I try to ng-repeat on the $scope.previewimages the object is empty so no images are rendered. Any ideas?

Answer 1

The code is missing an $apply block for the reader load event:
for (var i = 0; i < files.length; i++) {
// push the image to be uploaded
$scope.listing.listing_images.push(files[i]);
// push the image to be rendered
var reader = new FileReader();
reader.onload = function (e) {
//IMPORTANT
$scope.$apply(function() {
$scope.imagepreview[i] = e.target.result;
});
}
reader.readAsDataURL(files[i]);
}
When the FileReader load event handler modifies $scope, the AngularJS frame needs to digest the changes and update the DOM.
For more information, see
AngularJS Developer Guide - Integration with the browser event loop