Save Image in App and retreive with ionic


#1

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/