Firebase Storage upload error: Cannot read property 'child' of undefined

Question

I'm using a Firebase storage in a Vue.js aplication using Vuetify in my form I want to upload a photo and i using this example in the docs but doesn't work, I want to store my images in the folder itens

my v-file input:

 <v-col>
   <v-file-input v-model="imageItem" chips multiple label="Photo"></v-file-input>
 </v-col>

my method with upload example from the docs:

methods: {
    addNovoProduto: function () {
      var file = this.imageItem[0]
     
      let uploadTask = firebase.storageRef.child('itens/' + file.name).put(file);

      uploadTask.on('state_changed', function(snapshot){
      // Observe state change events such as progress, pause, and resume
      // 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) {
      // Handle unsuccessful uploads
      console.log(error);
    }, function() {
      // Handle successful uploads on complete
      // For instance, get the download URL: https://firebasestorage.googleapis.com/...
      uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
        console.log('File available at', downloadURL);
      });
    });
    },
  },

The error that is: TypeError: Cannot read property 'child' of undefined

Answer 1

If you look at the top of the documentation page you linked, you'll see that storageRef is initialized as:

var storageRef = firebase.storage().ref();

You don't seem to be doing that, which would explain the error you get.