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 pletion 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
            // 
            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 pleted 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!");
      }
    }

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 pletion 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./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 pleted 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!");
      }
    }

this is my full function for the image upload. Only issue I have is it has callback functions inside this function.

 function() {
            // Upload pleted successfully, now we can get the download URL
            uploadTask.snapshot.ref
              .getDownloadURL()
              .then(function(downloadURL) {
                console.log("File available at", downloadURL);
                self = downloadURL;
              });
          } 

Only for this part can I get async await function?

• javascript
• firebase
• google-cloud-platform
• google-cloud-storage
• firebase-storage

• what's your question here? do you want to use async/await? – Jack Commented Apr 23, 2019 at 7:19
• @jackz314 Yes! I have mark the correct answer also. – margherita pizza Commented Apr 23, 2019 at 8:03

2 Answers 2

You can very well call then() on an UploadTask, as explained here: https://firebase.google./docs/reference/js/firebase.storage.UploadTask#then

This object behaves like a Promise, and resolves with its snapshot data when the upload pletes.

So you could do something like:

async UPLOAD_IMAGES() {
      try {
        let self = this;
        const storageRef = firebase.storage().ref();
        const files = document.getElementById("photoupload").files;
        const file = files[0];
        // Create the file metadata
        const metadata = {
          contentType: "image/jpeg"
        };

        const fileRef = storageRef
          .child(`${this.name}/` + file.name);

        const uploadTaskSnapshot = await fileRef.put(file, metadata);

        const downloadURL = await uploadTaskSnapshot.ref.getDownloadURL();

        self = downloadURL;

      } catch (error) {
        console.log("ERR ===", error);
        alert("Image uploading failed!");
      }
    }

In case anyone needs to both observe upload progress while using await/async instead of callbacks, this code works:

try {
   await saveToFirebase();
   alert("Happy days!");
} catch (error) {
   alert("Sad days!");
}


async function saveToFirebase() {
   // Create promise.
   let promise = $.Deferred();

   // Set storage reference.
   let storageRef = firebase.storage().ref();

   // Se file path.
   let filepath = "your-path.txt";

   // Set content type.
   let metadata = {
      contentType: "text/plain",
      cacheControl: "no-cache, max-age=0"
   };

   // Start upload.
   let uploadTask = storageRef.child(filepath).putString(data, "raw", metadata);

   // Monitor state of upload operation.
   uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, function(snapshot) {
      // Get task progress, including number of bytes uploaded and total number of bytes to be uploaded.
      let progress = (snapshot.bytesTransferred / snapshot.totalBytes);
      
      // Display progress to user.

   // Error during upload?
   }, function(error) {
      promise.reject(error);

   // Nope, upload succeeded.
   }, function() {
      promise.resolve();
   });

   // Return promise.
   return promise;
}