javascript - firebase storage execute code after multiple file upload

Question

I'm trying to redirect to another page after all the file are done uploading to firebase storage. It keep executing the redirect code before finishing the uploads. Can't figure out how to execute one after the other. This is a js scripts running on client side of the website.

if (file[0].files[0]) {
  uploadFile(file[0]);
}
if (file[1].files[0]) {
  uploadFile(file[1]);
}
if (file[2].files[0]) {
  uploadFile(file[2]);
}

console.log("All files finished");
window.location.href = "success.html";

function uploadFile(file) {
  var task = storage.ref("arts/" + emailValue + Date.now()).put(file.files[0]);

  task.on('state_changed',

    function progess(snapshot) {
      var progressValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      console.log(progressValue);
    },
    function error(err) {
      console.log(err);
    },
    function completed() {
      console.log('file upload success');
      task.snapshot.ref.getDownloadURL().then(function(downloadURL) {
        imgUrl = downloadURL;
        storeDetails();
      });

    }

  );
}

function storeDetails() {

  db.collection("participants").doc(emailValue + Date.now()).set({
      email: emailValue,
      url: imgUrl.toString(),
    })
    .then(function() {
      console.log("Document successfully written!");

    })
    .catch(function(error) {
      console.error("Error writing document: ", error);
    })
}

question from:https://stackoverflow.com/questions/65860496/firebase-storage-execute-code-after-multiple-file-upload

Answer 1

The put method returns a promise, so you can wait for that to resolve instead of passing in the callbacks. When doing that, the code to upload the file and then store its download URL in the database becomes:

function uploadFile(file) {
  const filename = emailValue + Date.now();
  storage.ref("arts/" + filename).put(file.files[0]).then(() => {
      task.snapshot.ref.getDownloadURL().then((downloadURL) => {
        db.collection("participants").doc(emailfilename).set({
          email: emailValue,
          url: downloadURL.toString()
        })
      });
    }
  );
}

Note there are quite some subtle changes in the above code, so:

1. There may be syntax errors as I didn't run this, so treat it as pseudo-code. If you get an error, first try to solve it yourself please - and if you do, post a comment or edit to the answer with the fix.
2. If you also need progress reporting, you can listen for state_changed. Just ignore the completed event as that is handled by then() in the code above.