One of the most commonly used [PhoneGap] API’s is the [Camera API]. In the age of the selfie, a phones camera is one of the most commonly used functions of the device – naturally, a lot of apps integrate with this.
It’s simple enough to trigger the devices camera and grab the resulting photo, but there’s one big problem. The photo will eventually disappear. I’m not sure on the exact timeframe, but you can probably kiss your photos goodbye after a few days.
Any photos that are taken using the Camera API are stored in a temporary folder, and after a little while the file will be deleted. This is fine if your app is uploading the picture to a server or otherwise only needs to display the photo temporarily, but if you want to permanently store the photo within your application by referencing its File URI (the location of the photo on the device) you’re going to run into some trouble.
The way to solve this problem is to move the file into permanent storage with [PhoneGap’s File API] after you take the photo, and then reference that URI within your application instead. This makes the process a bit more tricky though so I’ll show you how to do it step by step.
I’ll be using Ionic’s [ngCordova] to implement the Camera functionality, which adds a few bells and whistles to make things easier, but you could easily adapt this to use any other framework by referencing the PhoneGap Camera and File API’s in [the documentation]. If you want some help, you can download an example file further down in this post of a plain PhoneGap implementation (there’s quite a bit more code involved than the ngCordova implementation).
1. Include the plugins in your project
First make sure that you include the Camera and File plugins in your project. If you are using a local version of PhoneGap or ngCordova you will need to run: