Try making the function async to only perform the action after uploading the data

Question

Edit to add question at bottom: Currently, it runs fine, it's just that it's not running asynchronously (I think that's why the async await is trying).

My question is how to make the submission process asynchronous so that I can only perform an action (prompt the user for preferred next steps in this case) after uploading the information.

const handleSubmit = async () => {
  
  try {
    if (image.value) {
      await uploadImage(image.value); <--I thought this was 
        asynchronous, but I tested and I don't think it is. 
    }

    const colRef = collection(db, "collection");

    //I thought the below was asynchronous, but it's not
    await addDoc(colRef, 
       {
      data: data.value <--placeholder
     
    });
    
      });
  } catch {

  }

  //code to run after addDoc is done, but it runs immediately
  $q.dialog({
      [content]
    })
};

Update: I've changed the addDoc function with the .then function and this seems to work. The current problem is that I cannot complete the uploadImage function before running the addDoc function.

This is my attempt to commit the uploadImage function, which I know is sloppy and wrong:

if (image.value) {
          return new Promise((resolve, reject) => {
            const newImage = uploadImage(image.value);
            resolve(newImage);
          });
        } else {
          console.log("error");
        }

Answer 1

Only if your uploadImage() and addDoc() functions return JavaScript promises.

See this article from nodejs.dev for more information about async/await.