Cordova, the Camera plugin, AngularJS, and Ninja Cats.

Just a random tip for folks who may run into this in the future. I'm working on a mobile app for a client and I'm using both Cordova and AngularJS. The application allows people to select a photo from their gallery or take a new picture. It then renders a thumbnail to the web page. It supports any number of selections so my view simply loops over an array.

<img ng-repeat="pic in groupPics[group.part]" ng-src="{{pic}}" ng-click="removePicture(group.part,pic)" class="img-thumbnail" style="width:120px; height: 120px">

Pretty simple, right? In my testing I always used the simulator as it doesn't have a real camera, and I typically tested on iOS only since they were testing Android. Also, the camera is pretty simple to use so it just plain works most of the time.

But then the client reported something odd. Whenever he selected a picture from the gallery, the image thumbnail would show up broken. I quickly ran it (and since I said quickly you know I used Genymotion and not the Android emulator) and confirmed it failed. Like any other good hybrid developer I fired up my dev tools and checked the console. This is what I saw.

GET unsafe:content://

Some Googling turned up this Stackoverflow post. Long story short - it is an Angular security measure. I've run into Angular security stuff before (trying to inject HTML into the DOM) so this isn't the first time I've had an issue like this, but it threw me for a loop since it worked in iOS. If you look at the file URI returned by Camera/Gallery selections though it makes a bit more sense. Here is an example of a file URI returned from iOS (spaces added so it will wrap):

file:///Users/ray/Library/Developer/CoreSimulator/Devices/ C8202B3B-300B-4819-8CD3-4C4AA690CE7C/ data/Applications/D82BF64E-6DD1-4645-B637-BCF65001FD29/tmp/cdv_photo_003.jpg

The exact same code on Android returns a file URI like so:


Angular sees this as something weird and says, "No Way Man!". Luckily the fix is simple. In my application's configure block, I added this:


So, keep it in mind if you are using the camera in a Cordova/AngularJS application.

Ninja cat provided for no good reason.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.