Estoy cargando productos en la base de datos. Tengo una función de envío:
const onSubmit = async (e) => { e.preventDefault() try { await uploadImage() //this executes at the same time as the above function window.location.reload() } catch (error) { alert(error) } }Todo lo que se encuentra debajo de uploadImage no espera a que termine
esta función uploadImage toma la imagen y la sube a cloudinary así:
const uploadImage = async () => { const data = new FormData() if (formImage) { data.append("file", formImage) data.append("upload_preset", "***-") data.append("cloud_name", "***") try { const resp = await fetch("***", { method: "post", body: data }) const dataJson = await resp.json() setUrl(dataJson.secure_url); //I had insertProduct Function under the other one on submit but they executed at the same time so it didn't work insertProduct(producto, dataJson.secure_url) } catch(error) { console.log(error) } } }Tengo estas dos funciones dentro del mismo archivo.
↓↓↓↓ Esta es mi función insertProduct ↓↓↓↓
Ahora esta función insertProduct la tengo en un archivo .js fuera de /pages
import { collection, query, where, addDoc, getDoc, getDocs } from "firebase/firestore"; import { db } from "../config/firebase"; export const insertProduct = async (prodData, image) => { const { nombre, precioOferta, precioRegular, cantStock, sku, breveDescripcion, visible, envioGratis, coincideMedidas, descripcion, picture, etiquetas, vendor, available_colors, available_sizes } = prodData const tags = etiquetas.split(" ") if (image) { try { const uploadedProduct = await addDoc(collection(db, "products"), { name: nombre, price: precioOferta, regular_price: precioRegular, vendor: { vendor_id: vendor.vendor_id }, sku, freeShipping: envioGratis, stock_quantity: cantStock, is_published: visible, short_description: breveDescripcion, description: descripcion, picture: image, tags, available_sizes, available_colors }) return uploadedProduct } catch (error) { console.log(error) } }else{ console.log('no hay imagen') } }Y esto es lo que hace esta función.
Mi problema es con la función onSubmit que el código debajo de la función se ejecuta inmediatamente cuando se llama a la función anterior.
¡Espero que puedas ayudarme! Gracias por adelantado.