Hello. I am trying to set a local profile image in Ionic. Anyone who can tell me what I am doing wrong is a hero.
dashboard.html:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()"></ion-refresher>
<h3> {{ name }} </h3>
<h4> {{ id }} </h4>
<img id="barcode">
<ion-scroll>
<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px"/>
</ion-scroll>
</ion-content>
</ion-view>
settings.html:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h1>Edit Data</h1>
<p>Please remember to pull to refresh the ID page to reflect your changes.</p>
<form ng-submit="setLocal()">
<div class="list">
<label class="item item-input">
<input type="text" ng-value="name" ng-model="name" id="name" placeholder="Full Name">
</label>
<label class="item item-input">
<input type="text" ng-model="id" id="id" ng-value="id" placeholder="ID Number">
</label>
<label class="item item-input">
<button class="button button-energized" ng-click="addImage()">
Add image
</button><br><br>
<ion-scroll>
<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" height="200px"/>
</ion-scroll>
</label>
<input type="submit" class="button button-positive button-block" value="Save">
</div>
</ion-content>
</ion-view>
controllers.js:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.camera);
}
document.addEventListener
$scope.name = window.localStorage.getItem('name');
$scope.id = window.localStorage.getItem('id');
if (!Object.prototype.watch) {
Object.defineProperty(Object.prototype, "watch", {
enumerable: false
, configurable: true
, writable: false
, value: function (prop, handler) {
var
oldval = this[prop]
, newval = oldval
, getter = function () {
return newval;
}
, setter = function (val) {
oldval = newval;
return newval = handler.call(this, prop, oldval, val);
}
;
if (delete this[prop]) { // can't watch constants
Object.defineProperty(this, prop, {
get: getter
, set: setter
, enumerable: true
, configurable: true
});
}
}
});
}
$scope.doRefresh = function() {
$scope.name = window.localStorage.getItem('name');
$scope.id = window.localStorage.getItem('id');
$("#barcode").JsBarcode($scope.id, {format: "CODE39"});
$scope.$broadcast('scroll.refreshComplete');
}
if ($scope.id != undefined) {
$("#barcode").JsBarcode($scope.id, {format: "CODE39"});
}
$scope.urlForImage = function(imageName) {
console.log(imageName);
var name = imageName.substr(imageName.lastIndexOf('/') + 1);
var trueOrigin = cordova.file.dataDirectory + name;
return trueOrigin;
}
})
.controller('SettingsCtrl', function($scope, $cordovaCamera, $cordovaFile){
// 1
$scope.images = [];
$scope.addImage = function() {
// 2
var options = {
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.PHOTOLIBRARY, // Camera.PictureSourceType.PHOTOLIBRARY
allowEdit : false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
};
// 3
$cordovaCamera.getPicture(options).then(function(imageData) {
// 4
onImageSuccess(imageData);
function onImageSuccess(fileURI) {
createFileEntry(fileURI);
}
function createFileEntry(fileURI) {
window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
}
// 5
function copyFile(fileEntry) {
var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
var newName = makeid() + name;
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
fileEntry.copyTo(
fileSystem2,
newName,
onCopySuccess,
fail
);
},
fail);
}
// 6
function onCopySuccess(entry) {
$scope.$apply(function () {
$scope.images.push(entry.nativeURL);
});
}
function fail(error) {
console.log("fail: " + error.code);
}
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i=0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
}, function(err) {
console.log(err);
});
}
// Set Local Storage Variables
$scope.setLocal = function(){
window.localStorage.setItem("name", document.getElementById('name').value);
window.localStorage.setItem("id", document.getElementById('id').value);
console.log(window.localStorage.getItem('name'));
console.log(window.localStorage.getItem('id'));
$scope.name = window.localStorage.getItem('name');
$scope.id = window.localStorage.getItem('id');
}
});
Thank you all for your help.
Taken from this tutorial: http://devdactic.com/how-to-capture-and-store-images-with-ionic/