3

I am new to hybrid mobile app and I want to implement a profile picture updation in my app. Till now I have implemented the following. On clicking a Imageview a dialog pops up and ask you to choose the app (Gallery or Camera). On selecting the desired app I am able to go to the respective app and choose the image. But I a stuck in some point and I dont know how to replace my sample imageview with the new content. Below is my code

profile.html

<ion-view class="profile-view">
<ion-nav-title>
    <span>Profile</span>
</ion-nav-title>
<ion-content>
    <div class="top-content row">
        <div class="profile-container">
            <div class="user-image-container">
                <pre-img ratio="_1_1" helper-class="rounded-image">
                    <img class="user-image" ng-src="http://115.115.122.10/vishnu/image/sample.png" ng-click="confirmDialog()"  spinner-on-load>
                </pre-img>
            </div>
            <div class="user-name">Brynn Evans</div>
            <div class="user-twitter">@brynn</div>
        </div>
        <div class="user-background-image-outer">
            <div multi-bg="['http://115.115.122.10/vishnu/image/sample.png']"></div>
        </div>
    </div>
    <div class="bottom-content">
        <div class="user-bio">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</ion-content>

controller.js

    .controller('ProfileCtrl', function ($scope, $cordovaDevice, $cordovaFile, $ionicPlatform, $ionicActionSheet, ImageService, FileService, $ionicPopup, $cordovaDialogs) {
    $ionicPlatform.ready(function() {
        $scope.images = FileService.images();

        $scope.$apply();
    });

    $scope.addpicture = function() {
        $scope.hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: 'Take photo' },

              { text: 'Photo from library' }
            ],
            titleText: 'Add images',
            cancelText: 'Cancel',
            buttonClicked: function(index) {
                $scope.addImage(index);
            }
        });
    }

    $scope.showAlert = function () {

        var alertPopup = $ionicPopup.alert({

            buttons: [
              {
                  text: 'Take photo',
                  onTap: function (index) {  $scope.addImage(index) }
              },
              {
                  text: 'Photo from library',
                  onTap: function (index) { $scope.addImage(index) }
              },
               {
                   text: 'Cancel',
                   onTap: function (alertPopup) { popup.close(); }
               }
            ],

            title: 'Add Images',

        });


    }

    $scope.confirmDialog = function() {
        navigator.notification.confirm("Choose your app to perform the action", function (buttonIndex) {
             var btnIndex = buttonIndex;
             switch (btnIndex) {
                case 1:
                    $scope.addImage(btnIndex);
                    break;
                case 2:
                    $scope.addImage(btnIndex);                  
                    break;

            }
        }, "Change Profile Picture", ["Take photo", "Photo From Library"]);
    }




    $scope.addImage = function(type) {
        ImageService.handleMediaDialog(type).then(function() {
            $scope.$apply();
        });
    }

})

services.js

    .factory('FileService', function () {
    var images;
    var IMAGE_STORAGE_KEY = 'dav-images';

    function getImages() {
        var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
        if (img) {
            images = JSON.parse(img);
        } else {
            images = ['http://115.115.122.10/vishnu/image/sample.png'];
        }
        return images;
    };

    function addImage(img) {
        images.push(img);
        window.localStorage.setItem(IMAGE_STORAGE_KEY, JSON.stringify(images));
    };

    return {
        storeImage: addImage,
        images: getImages
    }
})

.factory('ImageService', function ($cordovaCamera, FileService, $q, $cordovaFile) {

    function optionsForType(type) {
        var source;
        switch (type) {
            case 2:
                source = Camera.PictureSourceType.PHOTOLIBRARY;
                break;
            case 1:
                source = Camera.PictureSourceType.CAMERA;
                break;
        }
        return {
            quality: 90,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: source,
            allowEdit: false,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false,
            correctOrientation: true
        };
    }

    function saveMedia(type) {
        return $q(function (resolve, reject) {
            var options = optionsForType(type);

            $cordovaCamera.getPicture(options).then(function (imageBase64) {
                FileService.storeImage(imageBase64);
            });
        })
    }
    return {
        handleMediaDialog: saveMedia
    }
})

Can anybody please help me to implement my functionality.

Thanks in advance

Vishnu M Menon
  • 1,459
  • 2
  • 19
  • 34

0 Answers0