title: VueJS and Firebase Storage: How to wait until image done uploading before submitting URI to database?
body: <p>I have a comment system I built that allows a user to add an image along with their comment.
  I am trying to wait until an image upload is finished before adding a comment to firestore, but my attempt is not working. I have a method named <code>photoUpload()</code> that uploads the image to firebase storage. That method contains an <code>uploadTask</code> listener for progress details. However, my comment is being added to the database before the image is done uploading.</p>
  <p>How to delay and wait until it's finished before submitting the comment?</p>
  <p>Here's my code:</p>
  <blockquote>
  <p>data function:</p>
  </blockquote>
  <pre><code>  data() {
      return {
        text: '',
        image: null,
        overlayShow: false,
        progress: 0,
        downloadUrl: null
      }
    },
  </code></pre>
  <blockquote>
  <p>Here is my image upload task:</p>
  </blockquote>
  <pre><code>photoUpload() {
    this.filename = uuidv4()
    const storageRef = this.$fireStorage.ref()
    this.photoRef = storageRef.child(
      `photos/${this.userProfile.uid}/commentPhotos/${this.filename}`
    )
    // uploads string data to this reference's location
    const uploadTask = this.photoRef.putString(this.image, 'data_url')
  
    // set the callbacks for each event
    const next = (uploadTaskSnapshot) =&gt; {
      this.progress =
        (uploadTaskSnapshot.bytesTransferred /
          uploadTaskSnapshot.totalBytes) *
        100
      console.log('Upload is ' + this.progress + '% done')
    }
    const error = (error) =&gt; {
      ...snijp...
    }
  const complete = async () =&gt; {
      // Upload completed successfully, now we can get the download URL
      this.downloadUrl = await uploadTask.snapshot.ref.getDownloadURL()
    }
    // listens for events on this task
    uploadTask.on(
      // 3 callbacks available for each event
      this.$fireStorageObj.TaskEvent.STATE_CHANGED,
      {
        next,
        error,
        complete
      }
    )
  }
  </code></pre>
  <blockquote>
  <p>To add a comment to firestore, I run this method:</p>
  </blockquote>
  <pre><code>async addComment() {
    this.overlayShow = true
    if (this.hasImage) {
      this.photoUpload() // &lt;---------I need to wait on this to finish!
    }
    try {
      console.log(this.downloadUrl) //&lt;-----this is returning null even after image is uploaded
      // create comment
      const docRef = this.$fireStore.collection('comments').doc()
      await docRef.set({
        createdAt: this.$fireStoreObj.FieldValue.serverTimestamp(),
        id: docRef.id,
        content: this.text,
        attachment: this.downloadUrl, //&lt;---- because photo upload is not finished, this gets null
      })
      console.log('comment added!')
      // update comment count on photo doc
      await this.$fireStore
        .collection('photos')
        .doc(this.photo.id)
        .set(
          {
            comments: this.$fireStoreObj.FieldValue.increment(1)
          },
          { merge: true }
        )
      this.text = ''
      this.downloadUrl = null
      this.clearImage()
      this.overlayShow = false
    } catch (error) {
      console.error('Error adding new comment', error)
    }
  }
  </code></pre>