Question

0

135

Vistas

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

6 months ago · Santiago Gelvez

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-22T22:25:03.271Z

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);
     
...