Selecting a photo from library and adding to a grid. Need plugin details

ionic-v1
1

I have a grid. I’d like the user to select a picture from the device photo library and then I’d like to add the thumbnail for this photo to the grid. Repeat as necessary. How can I do this?

I used the example from https://blog.nraboy.com/2015/03/make-a-gallery-like-image-grid-using-ionic-framework/ to setup the grid:

<button ng-click="selectPhoto()">Attach</button>
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length">
            <img ng-src="{{images[$index].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length">
            <img ng-src="{{images[$index + 1].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length">
            <img ng-src="{{images[$index + 2].src}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length">
            <img ng-src="{{images[$index + 3].src}}" width="100%" />
        </div>
    </div>

If I load test images into the images array in the controller they show up, no issue. I have the following code triggered off the attach button (which does bring up the selection screen).

var onPhotoSuccess = function(FILE_URI) {
    alert(FILE_URI);
    // $scope.picData = FILE_URI;  
    $scope.images.push({id: 2, src: FILE_URI});   
    $scope.apply();
};
var onPhotoFail = function(e) {
    alert("On fail " + e);
}

$scope.selectPhoto = function(){
     var options= {
        quality: 50,
        destinationType: navigator.camera.DestinationType.FILE_URI,
        sourceType: 0,      // 0:Photo Library, 1=Camera, 2=Saved Photo Album
        encodingType: 0     // 0=JPG 1=PNG
    };        
    navigator.camera.getPicture(onPhotoSuccess,onPhotoFail,options);        
};

The added image does not show up in the grid after this gets fired. I am just not familiar with the cordova plugin enough to know how I can get the path of the selected image on the device. A thumbnail size of the image or the actual image that I can scale down. Any guidance appreciated.

2

Update: if I put an img tag and simply update its src with the FILE_URI it displays the selected image (as in example shown on https://github.com/apache/cordova-plugin-camera) . So the path is good. The question is how come the grid is not updating when I push another image to it? I thought the apply method would update the view?

3

You are not using apply right. Try $scope.$apply(function(){
$scope.images.push({id: 2, src: FILE_URI});
})

Or replace scope apply with scope.digest

4

Ah my bad. Thank you that did it!