Hi, folks!
I work on a Ionic Framework app. I want to select the photos from gallery and preview them in view.
The problem is that the $scope is updating, but to display the new selected image I need to animate something in app and that’s strange for me.
I created a PoC here.
Ionic info:
Silviu:~ silviu$ ionic info
Your system information:
Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v7.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002
In my view I have the code:
<label class="item item-input item-stacked-label">
<button class="button" ng-click="doGetImage()">Incarca imagini</button>
</label>
<ion-list>
<ion-item ng-repeat="item in toBeUploaded">
<img ng-src={{item.base_src}} class="image-list-thumb"/>
{{item.file_name}}
<a ng-click="deleteImage(item)">Sterge</a>
</ion-item>
</ion-list>
In my controller I have the following function:
$scope.toBeUploaded = [];
$scope.doGetImage = function () {
var options = {
maximumImagesCount: 1, // only pick one image
width: 800,
height: 800,
quality: 80
};
var fileName, path;
var element = {};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
window.resolveLocalFileSystemURL(results[0], onResolveSuccess, fail);
function onResolveSuccess(fileEntry) {
// convert to Base64 string
fileEntry.file(
function (file) {
//got file
var reader = new FileReader();
reader.onloadend = function (evt) {
element.base_src = evt.target.result;
};
reader.readAsDataURL(file);
},
function (evt) {
//failed to get file
});
}
// error callback
function fail(fct) {
console.log("Error");
}
// lets read the image into an array buffer..
// see documentation:
// http://ngcordova.com/docs/plugins/file/
fileName = results[0].replace(/^.*[\\\/]/, '');
// modify the image path when on Android
if ($ionicPlatform.is("android")) {
path = cordova.file.cacheDirectory
} else {
path = cordova.file.tempDirectory
}
element.file_name = fileName;
element.path = path;
$scope.toBeUploaded.push(element);
});
}
