5

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 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.

Regent
  • 5,142
  • 3
  • 21
  • 35
Vamsidhar Mamillapalli
  • 189
  • 1
  • 3
  • 13
  • Have you added permission for sd card access to application? – Flatlineato Apr 11 '14 at 06:56
  • I'm having this problem aswell (with phonegap), if I specify size it works though { quality:50,targetWidth: 960,targetHeight: 960, – joeriks Apr 15 '14 at 03:17
  • Withouth height / width I needed to convert to Base64 to display the image http://stackoverflow.com/questions/6690571/phonegap-choose-image-from-gallery – joeriks Apr 15 '14 at 04:33

1 Answers1

4

you need to call $scope.$apply(); to tell angular your async function is finished. Also 

$scope.ImageURI =  imageURI;
$scope.$apply();

also - you might get the same problem as I with the image - se my comments above.

joeriks
  • 3,382
  • 8
  • 32
  • 42
  • I tried above. But still didnt work. Currently I am getting element by calling document.GetelemetById('imageid') and updating img.src. – Vamsidhar Mamillapalli Apr 17 '14 at 07:35
  • 1
    are you using ng-src then you need to whitelist "content" https://docs.angularjs.org/api/ng/provider/$compileProvider – joeriks Apr 18 '14 at 02:39
  • at least that is what I had to do - http://joeriks.com/2014/04/16/select-images-from-photo-gallery-in-a-cordova-phonegap-app-on-android/ – joeriks Apr 18 '14 at 02:55