How uploaded file on Firebase storage then store the url inside firestore with vue 3 (composition API) – Javascript

First of all – i’ve made a simple form …

<template>
  <form action="#" @submit.prevent>
    <div>
      <label for="title">Product title</label>
      <input v-model="title" type="text" id="title" placeholder="Title" />
    </div>
    <div>
      <label for="price">Product price</label>
      <input v-model="price" type="number" id="price" min="0" placeholder="0.00" />
    </div>
    <div>
      <label for="file">Product photo</label>
      <input @change="handleFileChange" type="file" id="file" />
    </div>

    <button @click="submitForm">Send</button>
  </form>
</template>

… and connected it with script

<script>
// this variables setup-ed in config.js
import { storage, productsCollectionRef } from '../firebase/config'
// this function from firebase. need to upload file
import { ref, uploadBytesResumable, getDownloadURL } from 'firebase/storage'
// this one for creating document in database (firestore) 
import { addDoc } from 'firebase/firestore'

export default {
  // child component, imported in main App.vue
  name: 'vue-upload',
  data() {
    return {
      title: null,
      price: 0,
      file: null
    }
  },
  methods: {
    handleFileChange(e) {
      // when file selected - update property in data()
      this.file = e.target.files[0]
    },

    createProduct(data) {
      // pass a reference to collection and data
      addDoc(productsCollectionRef, data)
    },

    uploadFile(file) {
      // getting name & type properties from File object
      const { name, type } = file
      // create a reference to file in firebase
      const storageRef = ref(storage, 'images/' + name)
      // upload file (this.file) to firebase and append metadata
      const uploadTask = uploadBytesResumable(storageRef, this.file, {
        contentType: type
      })

      uploadTask.on(
        'state_changed',
        (snapshot) => {
          const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          console.log('Upload is ' + progress + '% done')
        },
        (error) => {
          console.log(error)
        },
        () => {
          // successful upload. get url ...
          getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
            // ... make a data to write ...
            const data = {
              title: this.title,
              price: this.price,
              url: downloadURL
            }
            // ... and call a fn that writes a document to a firestore
            this.createProduct(data)
          })
        }
      )
    },

    submitForm() {
      // just quick & simple validation
      if (this.title && this.price && this.file) {
        this.uploadFile(this.file)
        return
      }

      alert('Form invalid')
    }
  }
}
</script>

You may notice a import { storage, productsCollectionRef } from '../firebase/config' line.
It’s just another one js-file, where i pass configuration for firebase:

./firebase/config.js

import { initializeApp } from 'firebase/app'

import { getStorage } from 'firebase/storage'
import { getFirestore, collection } from 'firebase/firestore'

const firebaseConfig = {
  apiKey: 'XXXXX',
  authDomain: 'XXXXX',
  projectId: 'XXXXX',
  storageBucket: 'XXXXX',
  messagingSenderId: 'XXXXX',
  appId: 'XXXXX'
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const storage = getStorage(app)
const db = getFirestore(app)

// i've made a 'products' collection in my firestore database [screenshot][1]
const productsCollectionRef = collection(db, 'products')
// we need export this setuped variables for use in another file
export { storage, productsCollectionRef }