Problems using PolymerFire and Firebase Storage

Question

I'm building an app using PolymerFire, since PolymerFire doesn't features functionality to connect to Firebase Storage yet I'm facing some problems.

In my index.html file, I initialize the Firebase app using <firebase-app>:

<firebase-app
name="myApp"
api-key= "eriqujhiurehuioöwqoerghowöe4rqgeäfwh"
auth-domain= "myapp-123.firebaseapp.com"
database-url= "https://myapp-123.firebaseio.com"
>
</firebase-app>

The problem is, that I can't use firebase.storage() with this.

It looks like I have to add a second app initalization with the common configs:

<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script>
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
  };
  firebase.initializeApp(config);
</script>

But this initializes the same app twice right? So this looks just wrong in my eyes.

I have somewhere deeper in my files tree a custom component which is supposed to upload images. I'm able to do so with the two app init method when it stands alone, but not when it's nested in the application.

It would take way too long to explain all the different variations I tried. So my question is, what's the best practice for connecting to Firebase Storage when using PolymerFire?

Any help would be greatly appreciated. :-)

EDIT:

I maged to get it work inside the application now with the two app init method, but this still feels wrong.

Also had this, managed to fix it though. How are you importing polymerfire? — Olivier Langelaar, Sep 26 '16 at 20:39
@OlivierLangelaar I import polymerfire.html inside my app controller, import for firebase-app.html is in index.html (installed with bower). — Getter Jetter, Sep 26 '16 at 20:46
Maybe try to include polymerfire.html, not sure if thats it but it includes all elements and behaviors — Olivier Langelaar, Sep 26 '16 at 21:09

score 3 · Accepted Answer · answered Sep 27 '16 at 14:04

3

I think you can just use:

<firebase-app
name="myApp"
api-key= "eriqujhiurehuioöwqoerghowöe4rqgeäfwh"
auth-domain= "myapp-123.firebaseapp.com"
database-url= "https://myapp-123.firebaseio.com"
storageBucket: "your_storageBucket"
>
</firebase-app>

because it's in the source code here:

https://github.com/firebase/polymerfire/blob/8568e28296d71bc508f57e32a2dfff5c2abe156d/firebase-app.html#L100

it's also in the docs:

https://elements.polymer-project.org/elements/polymerfire?active=firebase-app

answered Sep 27 '16 at 14:04

Ryan Tyler

117
1
4

hello @OlivierKrull could you explain me what exactly the app="{{app}}" is bound to or what it is referring to ?! I am facing the same problem and I am unable to access the var storageRef = firebase.storage().ref(); in Polymer – Niklas Dec 04 '16 at 00:19
How do I use this to upload a file to the firebase cloud storage? – Mikebarson Sep 02 '17 at 03:52

Problems using PolymerFire and Firebase Storage

1 Answers1