How To Access Files on Android Device Using Ionic Framework

Question

I was working through the Ionic tutorial for using the Cordova Camera API. http://learn.ionicframework.com/formulas/cordova-camera/

Far as I can tell everything is working correctly with the Camera API functions, but I cannot get my image to display back into the view.

I am able to return a file URI, but when I attempt to put it to the ng-src I get nothing in the view. I am assuming that the application/code cannot access the file location?

For demonstration I output the data bind twice - once in ng-src and once in plain text.

My config:

.config(function($stateProvider, $urlRouterProvider, $compileProvider) {

  $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
  ...

The function in my controller:

$scope.getPhoto = function() {
    Camera.getPicture().then(function(imageURI) {
      console.log(imageURI);
      $scope.cameraPic = imageURI;
    }, function(err) {
      $scope.cameraPic = "error";
      console.err(err);
    });
  };

My view:

<ion-view>
  <ion-content>
    <div class="form-group padding-top">
      <button class='button button-positive' data-ng-click="getPhoto()">
        Take Photo
      </button>
    </div>

    <div class="item item-image">
      <img ng-src="{{cameraPic}}"/>
    </div>
    {{cameraPic}}
  </ion-content>
</ion-view>

This appears to be the recommended method by the tutorial, and is also repeated on this thread. It sounds like it should work without using a Cordova file service implementation. I have found one such implementation which I guess I could use, but am I missing something here?

EDIT

Using chrome://inspect/#devices, I was able to look into the Webview/Console. I also rebuilt the project, just to see if that would help.

Definitely looking like a local file access issue.

enter image description here

getglad · Accepted Answer · 2015-02-27 17:58:45Z

2

As it turns out, this is an issue unique to using the emulator. I finally found the following on the ngCordova project:

NOTE: The camera API only works on a real device, and not in the emulator.

Source: http://ngcordova.com/docs/plugins/camera/

This led me to test the code on an actual device using the USB debugger, where the file is accessed by the application and shared with the view as expected. This should be noted as a quirk of the library.

answered Feb 27, 2015 at 17:58

getglad

2,5633 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sam Over a year ago

Thanks for pointing this out. Had I seen this post earlier, you would've saved me a day looking for the solution.

Collectives™ on Stack Overflow

How To Access Files on Android Device Using Ionic Framework

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related