title: Async/Await uploadTask
body: <p>How can I await uploadTask so I can upload the image/file and track its progress first before inserting download url dan document to firestore,</p>
  
  <p>Following code is my sample Vue project. It works properly, but see the <code>if (portraitFile)</code>, it has to be within the condition that I have to upload an image, what if I don't want to upload an image?</p>
  
  <p>It has to move outside that conditional <code>if</code>, but it will executed asynchronously before the file finish and download URL retrieved.</p>
  
  <p><em>GOAL: Move firestore add() outside uploadTask's finish callback/argument.</em></p>
  
  <pre><code>    async commitCharacter() {
        try {
          let character = this.character;
          let portraitFile = this.portraitFile;
  
          if (portraitFile) {
            const uploadTask = storageRef
              .child(`characters/${character.id}/portrait.png`)
              .put(portraitFile, { contentType: "image/png" });
  
            await uploadTask.on(
              "state_changed",
              snapshot =&gt; {
                this.portraitUploadProgress =
                  (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              },
              null,
              async () =&gt; {
                character.portraitUrl = await storageRef
                  .child(`characters/${character.id}/portrait.png`)
                  .getDownloadURL();
  
                if (character.id) {
                await db
                  .collection("characters")
                  .doc(character.id)
                  .update(character);
                } else {
                  character.id = (await 
                  db.collection("characters").add(character)).id;
                }
  
                $("#manageCharacter").modal("hide");
              }
            );
          }
        }
  </code></pre>