Polymer Upload Image to firebase

Question

Im trying to follow the firebase docs and upload an image to firebase using polymer.

This is what I have

  _pushToFirebase: function() {

       // SLUGGING THE NAME B4 WE EVEN SAVE IT!!
      var sluggedname = this._slugify(this.$.crewName.value);
      //FOR THE IMAGE
      var file = this.$.crewProfilePic.value;

      // Upload file
      var uploadTask = this.$.query.storageRef.child('/crewprofileimages/' + file.name).put(file);
      // Listen for state changes, errors, and completion of the upload.
      uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
        function(snapshot) {
          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
          var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
          console.log('Upload is ' + progress + '% done');
          switch (snapshot.state) {
            case firebase.storage.TaskState.PAUSED: // or 'paused'
              console.log('Upload is paused');
              break;
            case firebase.storage.TaskState.RUNNING: // or 'running'
              console.log('Upload is running');
              break;
          }
        }, function(error) {
        switch (error.code) {
          case 'storage/unauthorized':
            // User doesn't have permission to access the object
            console.log('You dont have permission to access object');
            break;

          case 'storage/canceled':
            // User canceled the upload
            console.log('User cancelled upload');
            break;

          case 'storage/unknown':
            // Unknown error occurred, inspect error.serverResponse
            console.log(error.code);
            break;
        }
      }, function() {
        // Upload completed successfully, now we can get the download URL
        var downloadURL = uploadTask.snapshot.downloadURL;
      });




      // PUSHING TO FIREBASE
      this.$.query.ref.push({
        name: this.$.crewName.value,
        description: this.$.crewDescription.value,
        createddate: new Date().toString(),
        creator: this.$.createcrewlogin.user.uid,
        slug: sluggedname,
        profileimage: downloadURL,
        members: {
          memberuserid: this.$.createcrewlogin.user.uid,
        }
      });
  },

and the firebase query looks like this

    <!--STORE THE DATA IN CREWS DEFAULT SECTION-->
    <firebase-query
      id="query"
      data="{{mycrews}}"
      path="/crews">
    </firebase-query>

Whenever I hit submit. I get this error in my console

cannot read property of 'child' of undefined How do I solve this ?

please provide a full stacktrace of the error, and the line number it throws — ZuzEL, Jan 27 '17 at 17:53

TheBen · Answer 1 · 2017-04-09T10:29:27.140

Might be late but from the brief error it seems that the element you're trying to access is not defined, i.e, you need to access it before requesting a property (child here)

Firebase-query has a path property which is the location you can save data. If you're using polymerfire elements as firebase-query then you need to access the path and change that, and then push().

So instead of

this.$.query.storageRef.child('/crewprofileimages/' + file.name).put(file);

you should have something like :

this.$.query.path = yourPath ; 
this.$.query.put(file) ... etc

The error you presented is from this but for a better solution a better error needs to be provided. Cheers

Polymer Upload Image to firebase

1 Answers1