React Native: Retrieve image URL from firestore

This is a function that uploads an image to the firebase storage and then retrieves the URL using the 'getDownloadURL' function.

The uploading of images works fine but it fails to retrieve the URL as it is trying to access the URL while the image is still uploading.

Please solve this problem !!

const getGSTURI = async () => {
if (GSTLoading) {
return;
}
setGSTLoading(true);
const result = await DocumentPicker.getDocumentAsync({
copyToCacheDirectory: true,
});
console.warn(result);
setGSTName(result.name);
setGSTURI(result.uri);
setGSTLoading(false);
async function uploadGST(uri, name) {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.warn(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
const storageRef = ref(storage, `sellers/${sellerID}/${name}`);
uploadBytes(storageRef, blob).then(() => {
console.warn("GST Upload Successfull");
});
getDownloadURL(ref(storage, `sellers/${sellerID}/${name}`))
.then((url) => {
// `url` is the download URL for 'images ' stored in firestorage
console.log(url);
setGSTURL(url);
console.log(GSTURL);
})
.catch((error) => {
"Errors while downloading";
});
// We're done with the blob, close and release it
blob.close();
}
uploadGST(GSTURI, GSTName);
};

you have to wait for the uploadBytes function to complete before trying to retrieve the url

instead of

uploadBytes(storageRef, blob).then(() => {
console.warn("GST Upload Successfull");
});

you can use the await operator as below to wait for the task to complete

try {
await uploadBytes(storageRef, blob);
console.warn('GST Upload Successfull');
} catch (e) {
console.warn('GST Upload Failed', e);
}