Edited to add question at the bottom: This currently functions appropriately, except that it's not running asynchronously (which I thought it was hence the async await attempts).

My question is how to make a submit flow asynchronous so that I can perform an action (in this case prompt the user for preferred next steps) only after upload of info.

 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 have changed the addDoc function with a .then function, and that seems to work. The current issue is that I can't make the uploadImage function complete before running the addDoc function.

Here is my attempt at promisifying the uploadImage function, and I know it's sloppy and wrong:

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