Ionic, Firebase and Image Upload Revisited: Sorry Android Users... - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

Updated 1/26/2017 to support latest version of Ionic2, See GitHub Repo

Always test on both platforms – FAILED

A week or two ago I posted a video of how to upload photos to firebase using the firebase storage, and i did not properly test on android. The code in the video uses the fetch polyfill to get the image from the file system and convert it to a blob to be uploaded. This is the correct approach, but the wrong implementation on Android devices.



First off, some have asked why I am not using the Camera.DestinationType.DATA_URL option on the camera plugin… because it will fail horribly in production when you get a large image. In my example I allow the camera to write the image to a file and then read the file object into a blob; I used the camera option Camera.DestinationType.FILE_URI


The original code, which still works on IOS, here I used the whatwg-fetch fetch polyfill, more information here whatwg-fetch


The newer code which works on Android and IOS


I have found that this approach is much more efficient than using javascript code to convert the Camera.DestinationType.DATA_URL into a blob when you can have the fileSystem do it for you. It is also a much better approach than the old way of loading the base64 string into the realtime database and not use the storage provided in Firebase3


Code breakdown

I like the use of promises to clearly define what I am doing when uploading the code.

you can see there is a clear separation of functionality here

  1. Get Picture
  2. Make the file into a blob
  3. Upload the file to firebase storage
  4. Save a reference in the firebase database


Please look at the source code for additional information