Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

252
Views
I am having problems getting an async function to finish running before submitting form

I am trying to get an image URL from firebase storage before submitting a form to firestore using formik I am new to programming and I have been trying for days. This is the code to grab the URL

let uploadImage = async (uri, imageName) => {
const response = await fetch(uri);
const blob = await response.blob();
const storageRef = firebase.storage().ref("images/" + imageName);

storageRef.put(blob).then((snapshot) => {
  snapshot.ref.getDownloadURL().then((downLoadURL) => {
    console.log("file available at: ", downLoadURL);
    //setImageStorage(null);
    setImageStorage({ photo: downLoadURL });
    
  
  })
});

};

bellow is the code to set the URL in state

const storageImage =  () => {
if (selectedImage !== null) {
   uploadImage(selectedImage.localUri, randomName)

} else {
  setImageStorage({ photo: defaultImage });
}

};

function submitForm(values) {
db.collection("item")
 .add({
    values,
    category: category,
    image: imageStorage.photo,
    latitude: newLatitude,
    longitude: newLongitude,
 }

code in formik looks like this

<Formik
    initialValues={{ description: "", price: "", roomName: "" }}
    validationSchema={itemSchema}
    onSubmit={ async (values, actions) => {
     
     await storageImage().then((()=>{
        submitForm(values);
     }))
      
      

      actions.resetForm();
      setCategory("");
      setSelectedImage(null);

      setImageStorage(null);

      navigation.navigate("YardSale");

I am getting the following error: Warning: An unhandled error was caught from submitForm(), [TypeError: null is not an object (evaluating 'imageStorage.photo')]

Please help

about 4 years ago · Santiago Gelvez
1 answers
Answer question

0

await storageImage().then((()=>{
        submitForm(values);
}))  // here values get added to the database before uploading image

uploadImage

let uploadImage = async (uri, imageName) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    const storageRef = firebase.storage().ref("images/" + 
    imageName);
    
    const snapshot = await storageRef.put(blob){
    const downloadUrl = await snapshot.ref.getDownloadURL()
    console.log("file available at: ", downLoadURL);
    setImageStorage({ photo: downLoadURL });
}

storageImage

const storageImage = async () => { // added async
    if (selectedImage !== null) {
       await uploadImage(selectedImage.localUri, randomName) // added await
    } else {
      setImageStorage({ photo: defaultImage });
    }
}

In Formik

<Formik
    initialValues={{ description: "", price: "", roomName: "" 
    }}
    validationSchema={itemSchema}
    onSubmit={ async (values, actions) => {

     // you shouldn't use await and then togather
     await storageImage();
     submitForm(values);
     
...
about 4 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!