title: async/await in Firebase Storage (wait to get URL after uploading a file)
body: <p>I'm useing Firestore in my Vue project and I'm working on a feature that allows users to upload images, however I'm facing the following issue:</p>
  <p>I have a 'newMarker' placeholder object that the user fills in with information and once the user confirms the input, the object is saved to the database. When the user confirms the input I want to:</p>
  <ol>
  <li>Save the image in Firebase Storage</li>
  <li>Get the generated URL for that file</li>
  <li>Add the URL to the newMarker object</li>
  <li>and then push the newMarker object with the included imgURL to the database</li>
  </ol>
  <p>However I can't figure out how to make the code wait for the callback function that runs as soon as the upload status is completed (in the uploadIMG function, 'uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED', last callback function) and returns a promise with the url. No matter what I do, this callback function is executed last.</p>
  <p>When the user confirms the input, saveNewMarker() is executed and the following code will run:</p>
  <p>My code:</p>
  <pre><code>    async saveNewMarker() {
          await this.uploadImg();
          console.log('Image upload finished! Pushing new marker to db')
  
          await db.collection(this.user.email).add({
              position: this.newMarker.position,
              type: this.newMarker.type,
              location: this.newMarker.location,
              imgURL: this.newMarker.imgURL
          })
          .then((marker) =&gt; {
              console.log('marker added to database')
              this.newMarker.id = marker.id
          })
      },
      async uploadImg(){
          console.log('Uploading image ...')
          const storageRef = firebase.storage().ref();
          const uploadTask = storageRef.child('user-uploads/images/' + this.file.name).put(this.name)
  
          uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
              (snapshot) =&gt; {
                  const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                  console.log('Upload is ' + progress + '% done');
              }, 
              (error) =&gt; {
                  console.log(error)
              }, 
              async () =&gt; {
                  const imgURL = await uploadTask.snapshot.ref.getDownloadURL()
                  console.log('uploaded image: ' + imgURL)
                  this.newMarker.imgURL = imgURL
              }
          );
      },
  </code></pre>
  <p>Output:</p>
  <pre><code>Uploading image ...
  Upload is NaN% done
  Image upload finished! Pushing new marker to db
  marker added to database
  uploaded image: https://firebasestorage.googleapis.com/v0/b/....
  </code></pre>
  <p>Expected output:</p>
  <pre><code>Uploading image ...
  Upload is NaN% done
  uploaded image: https://firebasestorage.googleapis.com/v0/b/....
  Image upload finished! Pushing new marker to db
  marker added to database
  </code></pre>