Storing Images In Firebase

I spent the last day adding an image capture feature to a project - Watchlier.

We picked Firebase in order to offload work from our own server. We also just wanted to check out Firebase after hearing so many good things about its ease of use!

I’m happy to report that getting up and running with Firebase is very fast and straight-forward! Head over to Firebase and start a new account. They will provide you with a database for storing your information.

Our Stack

Firebase Basics

All Firebase database data is stored as JSON objects. When you add data to the JSON tree, it becomes a key in the existing JSON structure.

However, Firebase databases have no native support for arrays. If we try to store an array, it really gets stored as an “object” with integers as the key names.

You access the database with a URL and command it to do what you need. For example, if you want to save images from event #3, you could use the following URL path:
https://yourAppName.firebaseio.com/events/3/images

Interacting With Firebase

There are several options for interacting with Firebase:

  1. Firebase website
  2. RESTful API
  3. Firebase and AngularFire modules for Angular

We chose Option 3 - Firebase and AngularFire modules - because it is the most Javascript-friendly.

PRO TIP: Image files for Firebase need to be in a string format (and must be under 10mb)! You’ll want to get the base64-encoded contents so you can store it as a string. The general approach is to convert the file locally (using FileReader).

Now let’s see how it works in practice…

Javascript and Firebase

First step: install bower dependency manager and the bower components for Firebase and AngularFire

terminal
1
2
3
bower init
bower install firebase --save
bower install angularfire --save

Now instantiate a Firebase object with the URL path for your app and inject the firebase module into your app.

app.js
1
2
3
4
5
var fb = new Firebase('https://yourAppName.firebaseio.com/');
angular.module('app', ['firebase'])
//...other code here...//

Next, inject Firebase into the Angular module where your controller is located. The $firebaseArray variable below comes from the AngularFire module.

controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
angular.module('app.controllers', ['firebase'])
.controller('AppCtrl', function($scope,$firebaseArray) {
$scope.uploadImage = function(imageData, incidentID) {
var FR = new FileReader();
FR.onload = function(e) {
var imageString = e.target.result;
//create URL that refers to a specific event and add images as an array-like object to hold images
var eventReference = fb.child("events/" + incidentID);
var syncArray = $firebaseArray(eventReference.child("images"));
$scope.user = Auth.getUser();
var username = $scope.user.username || '';
var submitDate = new Date().toISOString().slice(0, 10);
syncArray.$add({
imageString: imageString,
username: username,
submitDate: submitDate
})
.then(function() {
console.log('Image has been uploaded');
});
};
FR.readAsDataURL(imageData);
});
//...other code here...//
});