Ionic Framework - Camera Image Uploads and Base64 Strings
If you see this error
Then you will need to update the version of Cordova using the following command
cordova platform update email@example.com
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
Install Image Resizer Plugin
Install the Actionsheet Plugin
cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet
Install the Camera Plugin
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.
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!!
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