title: Firebase image upload in async await manner
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>async UPLOAD_IMAGES() {
        try {
          let self = this;
          var storageRef = firebase.storage().ref();
          var files = document.getElementById("photoupload").files;
          var file = files[0];
          // Create the file metadata
          var metadata = {
            contentType: "image/jpeg"
          };
  
          // Upload file and metadata to the object 'images/mountains.jpg'
          var uploadTask = storageRef
            .child(`${this.name}/` + file.name)
            .put(file, metadata);
  
          // Listen for state changes, errors, and completion of the upload.
          uploadTask.on(
            firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
            function(snapshot) {
              // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
              var progress =
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
              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) {
              // A full list of error codes is available at
              // https://firebase.google.com/docs/storage/web/handle-errors
              switch (error.code) {
                case "storage/unauthorized":
                  // User doesn't have permission to access the object
                  break;
  
                case "storage/canceled":
                  // User canceled the upload
                  break;
                case "storage/unknown":
                  // Unknown error occurred, inspect error.serverResponse
                  break;
              }
            },
            function() {
              // Upload completed successfully, now we can get the download URL
              uploadTask.snapshot.ref
                .getDownloadURL()
                .then(function(downloadURL) {
                  console.log("File available at", downloadURL);
                  self = downloadURL;
                });
            }
          );
        } catch (error) {
          console.log("ERR ===", error);
          alert("Image uploading failed!");
        }
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is my <strong>full function for the image upload</strong>. Only issue I have is it has callback functions inside this function.</p>
  
  <pre><code> function() {
              // Upload completed successfully, now we can get the download URL
              uploadTask.snapshot.ref
                .getDownloadURL()
                .then(function(downloadURL) {
                  console.log("File available at", downloadURL);
                  self = downloadURL;
                });
            } 
  </code></pre>
  
  <p>Only for this part can I get async await function?</p>