{"id":2964,"date":"2019-08-30T21:26:05","date_gmt":"2019-08-30T21:26:05","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=2964"},"modified":"2020-01-23T16:12:35","modified_gmt":"2020-01-23T16:12:35","slug":"storing-photos-with-the-cordova-camera-and-file-plugins","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/storing-photos-with-the-cordova-camera-and-file-plugins","title":{"rendered":"Storing Photos with the Cordova Camera and File Plugins"},"content":{"rendered":"

Storing photos in a Cordova-based Ionic app can be challenging. Several concepts and layers of the app development stack are involved, including selecting the best Camera plugin configuration, saving files to permanent storage, and understanding how to render an image in a WebView.<\/p>\n

In this post, we\u2019ll use the Ionic Native Camera plugin<\/a> to take photos, then save them to the app\u2019s filesystem using the Ionic Native File plugin<\/a>.<\/p>\n

\n Note: For a guide covering similar concepts using Capacitor’s Camera and File plugins, see Josh Morony\u2019s great guide here<\/a>. For more advanced Cordova examples covering images, video, and audio, see Simon Grimm’s Ionic Media Files guide<\/a>.\n<\/p><\/blockquote>\n

<\/p>\n

Plugin Installation<\/h2>\n

First, install the two native plugins into your Ionic project:<\/p>\n

# Camera plugin\nionic cordova plugin add cordova-plugin-camera\nnpm install @ionic-native\/camera\n\n# File plugin\nionic cordova plugin add cordova-plugin-file\nnpm install @ionic-native\/file\n<\/code><\/pre>\n
Camera Plugin: Configuration and Capturing Photos<\/h2>\n
With both plugins installed, we can now configure the camera options. We use FILE_URI<\/code> as the destination type to save the captured image to temporary file storage. Avoid DATA_URL<\/code>, which returns the image as a base64 encoded string, because loading image data into a string is very memory intensive, often leading to app crashes.<\/p>\n
const options: CameraOptions = {\n  quality: 100,\n  destinationType: this.camera.DestinationType.FILE_URI,\n  encodingType: this.camera.EncodingType.JPEG\n}\n<\/code><\/pre>\n
Next, call the getPicture<\/code> method to open the camera on the device. Once the app user takes a photo and confirms it should be used, the path to the newly created image is stored in the tempImage<\/code> variable.<\/p>\n
const tempImage = await this.camera.getPicture(options);\n<\/code><\/pre>\n
Saving Photos to the Filesystem<\/h2>\n
As we see, using the Camera plugin to take a photo is straightforward. Saving them permanently to the filesystem, however, gets tricky fast. Why do we need to use the filesystem plugin to store photos anyway? It turns out that images captured by the Camera plugin are only stored in the app\u2019s temporary storage. This keeps memory usage low, which is important of course on mobile devices, as well as useful when implementing features like letting the user preview the photo before storing it. However, this means that when the app is closed, the images will be deleted by the mobile OS.<\/p>\n
As part of the following code, I\u2019ll show examples of the filesystem values (all for iOS, though Android will look very similar) that each variable represents for each step of the photo saving implementation. It\u2019s helpful to see these values when debugging code that uses the File plugin. Here\u2019s an example value of tempImage<\/code>:<\/p>\n
file:\/\/\/var\/mobile\/Containers\/Data\/Application\/E4A79B4A-E5CB-4E0C-A7D9-0603ECD48690\/tmp\/cdv_photo_003.jpg\n<\/code><\/pre>\n
Let\u2019s review each portion of the filepath:<\/p>\n