EmberFire & Firebase Storage Reference - ember.js

Question

I'm relatively new to Ember and EmberFire. I'm working on a Client/Logo management application. I've currently got Firebase Authentication and Firebase data working as expected. When I go to upload the logo to Firebase storage, I am presented with this error:
Uncaught Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp(). firebase.js:30
Here is the action that is being called:
Controller
firebase: Ember.inject.service( 'firebase' ),
actions: {
createClient(){
let name = this.get( 'clientName' );
let image = document.getElementById( 'client-image' );
let storeName = name.replace( / /g, '' );
let storageRef = firebase.storage().ref();
let file = image.files[0];
let metadata = {
'contentType' : file.type
};
let uploadTask = storageRef.child( `uploads/${storeName}/${file.name}` ).put( file, metadata );
uploadTask.on( 'state_changed', null, function( error ){
console.error( 'Upload Failed:', error );
}, function(){
console.log( 'Uploaded', uploadTask.snapshot.totalBytes, 'bytes.' );
console.log( uploadTask.snapshot.metadata );
let uploadUrl = uploadTask.snapshot.metadata.downloadURLs[0];
console.log( 'File available at ', url );
let client = this.store.createRecord( 'client', {
name: name,
image: uploadUrl,
isActive: false,
timestamp: new Date().getTime()
} );
client.save();
} );
// Tell the route to hide the client form.
this.send( 'hideAddClientForm' );
}
}
Template
<div id="new-overlay" class="overlay" {{action "hideAddClientForm"}}></div>
<div id="newClient">
{{input type="text" id="client-name" placeholder="Client Name" value=clientName}}<br />
{{input type="file" id="client-image" value=clientImage}}
<div class="submitBtn" {{action "createClient"}}>Add Client</div>
</div>
So, in short, how do I access the Firebase reference provided by EmberFire so that I can invoke the "storage()" method to it that is shown here in the Quickstart. If access to that reference isn't possible, do I have to create another, "non-EmberFire" reference to Firebase in order to use Storage? I'm simply trying to uploading a .jpg.

Answer 1

Make sure you are using EmberFire 2.0. You can access the Firebase Storage API through the firebaseApp service:
firebaseApp: Ember.inject.service(),
actions: {
doSomething() {
const storageRef = this.get('firebaseApp').storage();
}
}
The firebaseApp service is an already initialized app, not to be confused with the firebase service, which is the database reference only (kept for backwards compatibility).