Q: Uploading Images to Firebase from VueJs app I want to allow the user to sign up and upload an image at the same event, so data such as name and email and so on will go to firestore and the image will go to storage bucket, currently, I am able to implement these two functionalities, but separately, so what I am a little stuck on is how to link both the data and the image together so I can retrieve them later on. I also want to have this done using Vuex. the code below explains how i send the data and the image to firestore and storage respectively from my .vue component


import { storage } from '../firebase/init.js'
import firebase from 'firebase'

export default {
  data(){
    return {
        email: '',
        password: '',
        image: null
      }
    }, 
    methods: {
      signUp(){
        firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
           .then(response => {
             let user = {
             id: response.user.id,
             email: response.user.email
           }
          //here i want to do something to link this user to the upload image event below
        })
      },
      uploadFile(e){
        const file = e.target.files[0];
        
        storage.ref('images/'+ file.name).put(file)
          .then(response => {
            console.log(response)
          })
          .catch(err => console.log(err))
      }
    }
    


Please leave a comment below for further clarification, thanks in advance

A: You need to get firebase to return the url of the image and then insert that as a field in your database. Try something like this:
uploadFile(e){
    const file = e.target.files[0];
    storage.ref('images/'+ file.name).put(file)
      .then(response => {
        response.ref.getDownloadURL().then((downloadURL) => {
           firebase.database().ref(YOUR_DATABASE).child(THE_USER_ID).update({imageUrl:downloadURL})
      }                 
     .catch(err => console.log(err))
}

That should insert the image url in the database and you can then call it as you call all the user data.

A: createNewProperty({commit, getters, state}, payload) {
  commit('setLoading', true)
  const newService = {
    name : payload.name,
    PropertyMap: payload.PropertyMap,
    location : payload.Location,
    AboutProperty: payload.AboutProperty
  }
  var dropName = ''
  //Check If Service Exists
  firebase.firestore().collection('CompanyMenu')
  .where('name','==',payload.name)
  .where('location','==',payload.Location)
  .get()
  .then(service=>{
    if(service.size == 0) {
      let key
      let imageUrl

      firebase.firestore().collection('properties')
        .add(newService)
        .then( (data)=>{
          key = data.id
          return key
        }).then(key=>{
          const filename = payload.Image.name
          const ext = filename.slice(filename.lastIndexOf('.'))
          dropName = key +'.'+ext

          var uploadTask = firebase.storage().ref('properties/'+ key +'.'+ext).put(payload.Image)
          uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
            function(snapshot) {

              var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              commit('setUploading', progress)
              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':
                  console.log('User doesn\'t have permission to access the object')
                  break;

                case 'storage/canceled':
                  console.log('User canceled the upload')
                  break;
                case 'storage/unknown':
                  console.log('Unknown error occurred, inspect error.serverResponse')
                  break;
              }
            },
            function() {
              uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
                console.log('File available at', downloadURL);
                firebase.firestore().collection('properties').doc(key).update({Image: downloadURL,filename: dropName})
                .then( (company)=>{
                  state.properties.push({
                    id: key,
                    Image: downloadURL,
                    filename: dropName,
                    ...newService
                  })
                  commit('setLoading', false)
                  this.$router.push('/Properties')

                } )

              })
          })
        })
    } else {//If Service Exists


    }

  })
}

This code works best for me. I also added a link incase you want to delete the file from from firebase storage
