top of page
  • Writer's pictureClearly Innovative

Ionic Framework - Camera Image Uploads and Base64 Strings


Getting the camera to take photos on iPhone 6 Plus, in my Ionic Framework Application was causing memory issues since I was using the DestinationType.DATA_URL  parameter to upload the images to Parse. The Parse Javascript File APIonly supports uploading images that way. The solution I found to use in an Ionic Framework mobile solution was to save the images to disk using destinationType.FILE_URI  and then convert them to base 64 for uploading along with resizing them since these new phones take extremely hi resolution photos.

Getting Started

If you see this error

Then you will need to update the version of Cordova using the following command

cordova platform update android@5.0.0

Whitelist Issues With Parse

To address the issues, I have downloaded the version of the parse library and included it in the libfolder of the application. You will also need to update the Content-Security Policy  in the index.html  file. Please see code below

If you are new to Ionic Framework or need a refresher, the Getting Started Section of the website is a great resource

Install Image Resizer Plugin

Install the Actionsheet Plugin

cordova plugin add

Install the Camera Plugin

The Code

We are using the camera plugin here, but I did not use Ionic Framework with ngCordova – Camera here for the sake of simplicity, I suspect you will get the same behavior if you are using the ngCordova – Camera module to access the camera.

When we get the picture back, we want to reduce the image for a thumbnail to display in maybe an Ionic Framework List Component. We need the reduced sized image to get an acceptable user experienced when the user is scrolling through a list. If you attempt to use the larger original image, it will work, but performance will be effected.

We are resizing the image with a width of 200px and the returned contents will be a base64 string that we can use to upload to Parse as the thumbnail

Using the same function as before but setting the resize to 99% we will get the full-sized image returned as a base64 string to upload.

Supporting File Uploads To Parse

What we are doing here is creating a parse object called ImageInfo to store the file reference and any additional information on the file we want to save.

First step is to create the parse file object using the base64 version of the file, then add the file object to the ImageInfo object and save that… All done!!

Full Source Code Available here on GitHub

Plugin Used with Ionic Framework Mobile Solution – when installing the Image Resizer plugin, be sure to use the forked version referenced in the link below. The README installation instructions in the repo references the original plugin, not the currently maintained forked

Full Source Code For Starter Ionic Framework + Parse Available here on GitHub

761 views0 comments


bottom of page