Display selected from image gallery

[mrvamsidhar]

Hello i am trying to develop android app to load images from images gallery. Here is code snipet. i am not able display image. Can some one point me where it went wrong?

*.html

ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Upload Image</h1>
      <div class="account-picture">
          <button ng-click="ShowPictures()">Select Picture</button>
          <img ng-src="ImageURI" id="smallimage">
          <input type="text" ng-model="ImageURI" size="30"/>
      </div>
  </ion-content>
</ion-view>

Controller.js

.controller('AccountCtrl', function($scope) {

        $scope.ImageURI = 'Select Image';
        function UploadPicture(imageURI) {

            $scope.ImageURI =  imageURI;
            alert($scope.ImageURI );
        }

        $scope.ShowPictures = function(){
            navigator.camera.getPicture(UploadPicture, function(message) {
                    alert('get picture failed');
                    },{
                    quality: 50,
                    destinationType: navigator.camera.DestinationType.FILE_URI,
                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                }
            );
        };


});

Here ia ImageURI i am receiving afetr selecting any file from image gallery:content://media/external/images/media/17. I blindly hard coded this value for my image src. But I am not seeing any. Any inputs here?

Also, the ImageURI is not binding for my text box too. Alert is display URI properly.

Its seeme pretty straight forward using normal phonegap app. But w/ ionic framework i am not abel to.

[mrvamsidhar]

@mrvamsidhar

cting any file from image gallery:

Hello, Any input on this please?

[mrvamsidhar]

Can some one help me with this?

[morenoh149]

you’re not showing where you store the uri upon success. Show the full code. Here’s my example from doing something similar http://plnkr.co/edit/H8FcGn?p=preview

[mrvamsidhar]

Thanks for your reply.

above is my full code. I haven’t added anything other than that. I am calling UploadPicture() and storing imageURI in $scope.ImageURI and then I am binding to tag.

Am I missing something here?

[mrvamsidhar]

Hello All, I finally able to resolve the issue. Seems there is some issue binding ng-src of tag. If I did below it works

.controller('AccountCtrl', function($scope,$stateParams) {

        $scope.ImageURI = 'content://media/external/images/media/17';

            function UploadPicture(imageURI) {
    
                    $scope.PicSourece  = document.getElementById('smallimage');
               
    
                    if (imageURI.substring(0,21)=="content://com.android") {
                        var photo_split=imageURI.split("%3A");
                        imageURI="content://media/external/images/media/"+photo_split[1];
                      
                    }
                    $scope.ImageURI =  imageURI;
                    $scope.PicSourece.src = $scope.ImageURI;
                    $scope.apply();
    
    
    
            }
    
            $scope.ShowPictures = function(){
                alert("hh2");
                navigator.camera.getPicture(UploadPicture, function(message) {
                        alert('get picture failed');
                        },{
                        quality: 50,
                        destinationType: navigator.camera.DestinationType.FILE_URI,
                        sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                    }
    
                );
                $scope.ImageURI = 'Vamsidhar';
            };
    
    
    });

<ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Upload Image</h1>
      <div class="account-picture">
          <button ng-click="ShowPictures()">Select Picture</button>
          <input type="text" ng-model="ImageURI" size="30"/>
          <img  id="smallimage"  size="30"/>

         </div>
  </ion-content>
</ion-view>

If I set image URI from controller using document.getelementbyId(“smallimage”). I am able to display the selected picture.

But, Where as if I bind it is not working. Any idea. (Atleast my problem was solved techincally. But, using native java script code)

I LIke to know what should be done. Any inputs highly appreciated.

Thanks,

[Calendee]

I THINK the problem is your lack of “dot notation”.

You are doing : $scope.ImageURI = 'Select Image'; That is binding ImageURI to a primitive - a simple string. With that, you will not get 2 way binding. Later when you change $scope.ImageURI to an actual path, the view does not update because it is a copy of “Select Image” not a reference to an object that can be updated.

angular/angular.js

Try this instead:

ion-view title="Account">
  <ion-content class="has-header padding">
    <h1>Upload Image</h1>
      <div class="account-picture">
          <button ng-click="ShowPictures()">Select Picture</button>
          <img ng-src="data.ImageURI" id="smallimage">
          <input type="text" ng-model="data.ImageURI" size="30"/>
      </div>
  </ion-content>
</ion-view>

.controller('AccountCtrl', function($scope) {

        $scope.data = { "ImageURI" :  "Select Image" };

        function UploadPicture(imageURI) {

            $scope.data.ImageURI =  imageURI;
            alert($scope.data.ImageURI );
        }

        $scope.ShowPictures = function(){
            navigator.camera.getPicture(UploadPicture, function(message) {
                    alert('get picture failed');
                    },{
                    quality: 50,
                    destinationType: navigator.camera.DestinationType.FILE_URI,
                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                }
            );
        };


});

[mrvamsidhar]

Calendee, Thanks for you time in replying for my post. I did the same way exacty you mentioned, but I am still not able to bind ng-src. Here is my code. Let me know if I still miss something here.

.controller('AccountCtrl', function($scope) {

        $scope.data = {
            "ImageURI" : "content://media/external/images/media/17"
        };
   function UploadPicture(imageURI) {
            if (imageURI.substring(0,21)=="content://com.android") {
                var photo_split=imageURI.split("%3A");
                imageURI="content://media/external/images/media/"+photo_split[1];
            }
            $scope.data.ImageURI =  imageURI;
            alert($scope.data.ImageURI );
        }
  $scope.ShowPictures = function(){
            navigator.camera.getPicture(UploadPicture, function(message) {
                    alert('get picture failed');
                    },{
                    quality: 50,
                    destinationType: navigator.camera.DestinationType.FILE_URI,
                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                }
            );
        };

HTML

Upload Image

Select Picture

I even tried binding ng-src={{data.ImageURI}} but still no luck. I am not sure what I am doing wrong here. I tried for 2 hours but nothing work. Appreciate your help on this.

[Calendee]

I’m just not sure. It’s really hard to troubleshoot without the code and my lack of experience with the camera API.

Can you look through these posts to see if they help:

Displaying image file from Android filesystem

Hi I had similar a problem with cordova and getting the image from the album… The image was represent with blob: prefix similar like your case with file: or cvfile, when I was puting the blob data with angular {{img}} notation I also get the broken link the reason is that angular is putting unsafe: prefix before link… If this is your case try to put in config of the main module … var app = angular.module( ‘myApp’, ) .config( [ ‘$compileProvider’, function( $compileProvider ) { $compilePr…

How to make uploading files or images using ionicframwork or angularJS

I am working on this problem as well. I have the following controller: .controller('CameraCtrl', function ($scope) { $scope.takePic = function() { var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Photo Album encodingType: 0 // 0=JPG 1=PNG } // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(o…

Navigator.camara.getpicture error

have you add the camera plugin via cordova cli?

[blox]

@mrvamsidhar

content://media/external/images/media/17 isn’t a path.

You need to use window.resolveLocalFileSystemURI

$cordovaCamera.getPicture(options).then(function(imageURI) {

  //A hack that you should include to catch bug on Android 4.4 (bug < Cordova 3.5):
  if (imageURI.substring(0,21)=="content://com.android") {
    var photo_split=imageURI.split("%3A");
    imageURI="content://media/external/images/media/"+photo_split[1];
  }

  window.resolveLocalFileSystemURI(imageURI, function(fileEntry) {

    //If this doesn't work
    $scope.image = fileEntry.nativeURL;

    //Try this
    //var image = document.getElementById('myImage');
    //image.src = fileEntry.nativeURL;
  });
});

And just to make sure AngularJS isn’t blacklisting lets whitelist:

.config(function($compileProvider){
  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile|content):|data:image\//);
})

[jay]

It works for me

$scope.fromAlbum=function(){
        
        $rootScope.showLoading();
        
        navigator.camera.getPicture($scope.loadImage, function(){ $rootScope.hideLoading(); }, {
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
        });
        
    };

$scope.loadImage=function(imageSrc){
        
        if (imageSrc.substring(0,21)==“content://com.android”) {
          photo_split=imageSrc.split("%3A");
          imageSrc=“content://media/external/images/media/”+photo_split[1];
        }
        
        UserImages.tmpImage=imageSrc;
        $scope.uimg=imageSrc;
    };

and at apps.js

.config(function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile|content):|data:image//);
})

[loicfavory]

@blox

And just to make sure AngularJS isn’t blacklisting lets whitelist:

Works for me, only by changing the whiteList.
No need to replace the imageURI.

Thanks, you saved my day

[deepakg]

Please help me. I am new to ionic, Around 20 days I am searching for correct solution. pls share your html code and js code and also pls explain whether I want to install any plugin for this???

[deepakg]

Please Share your html code. Whether any plugin is needed?

[loicfavory]

Yes, you need a plugin : http://ngcordova.com/docs/plugins/camera/ or here https://github.com/apache/cordova-plugin-camera.

Not sure sharing my html code will you, I only have a button… Maybe you should share your code and describe your problems.

[paddycull9]

White listing worked for me too. I can’t thank you enough, I was really pulling my hair out on this one!

[flomerboy]

Could you take a look at my project over here?

It looks like you might have the expertise I need

Taking a series of photos in one view, display them all in the next

bump please help! I would really appreciate it.

[GIOkafor]

Anyone figure out a solution to this yet? I’ve implemented the photo_split workaround and white listed but selecting images from gallery still fails regardless of if I try to copy to a different location or display image based on it’s url.
Someone PLEASE help me,thanks in advance.

[PterPmnta]

Great example, but i copy and compile, but don’t work for me

[sandeepdillerao]

I resolved this issue .
just by doing below change
add below line in config
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|content|file|assets-library):|data:image/);

IMP: camera plugin FILE_URI doesn’t work in live load