Why is async/await not having any effect here? - reactjs

Question

So I have these two functions - One is an upload function (uploads file to DB). And the other function needs the url's of the uploaded files and for some reason I'm not able to wait for the upload function to finish so I can get the url's of the images uploaded so I can store them in my database.
the problem is at
uploadedImages.map(async file => {
urls.push(await uploadedFiles(file, uid, key))
// console.log(urls)
})
In the following code. Line 12.
export const handleUploads = (uploadedImages, uid, key, directory) => {
return (dispatch, getState, {
getFirebase,
getFirestore
}) => {
const firestore = getFirestore();
//const uid = getState().firebase.auth.uid;
let urls = []
uploadedImages.map(async file => {
urls.push(await uploadedFiles(file, uid, key))
// console.log(urls)
})
return firestore.collection('Uploads').doc(key).set({
uid: uid,
urls: urls,
timestamp: new Date(),
directory: directory
}).then(() => {
dispatch({
type: 'UPLOAD_SUCCESS'
});
toastr.success('הודעה', 'עודכן בהצלחה')
console.log(key)
}).catch(err => {
dispatch({
type: 'UPLOAD_ERROR'
}, err);
toastr.error('אופס! אירעה שגיאה')
});
}
};
Heres the upload function itself:
export const uploadedFiles = (file, uid, key) => {
// const firestore = getFirestore();
// const key = firestore.ref().child(property.uid).push().key
// const img = storage.ref().child(property.uid).child(key)
// const uploadedImages = property.uploadedImages
//let uploaded_arr = []
const uploadTask = storage.ref(`Properties/${uid}/${key}/${file.name}`).put(file);
uploadTask.on('state_changed',
(snapshot) => {
// progrss function ....
// const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
//
// console.log(progress);
},
(error) => {
// //error function ....
// dispatch({ type: 'UPLOAD_ERROR'}, error);
toastr.error('הודעת מערכת', error)
return ''
},
() => {
// //complete function ....
storage.ref('Properties').child(String(uid)).child(String(key)).child(file.name).getDownloadURL().then(url => {
// console.log(url)
return url
})
});
}
A solution would be highly appreciated.
P.S there is no error, its just that the await doesn't await the function to execute.
It simply has no effect.

Answer 1

uploadedFiles should return a promise for your await to work. Await makes javascript to wait until the promise returns with a result. Now your uploadedFiles below resolves url if it successfully gets updated in the database else, it gives out empty string.
Hence, update your uploadedFiles like so...
export const uploadedFiles = (file, uid, key) => {
return new Promise(function(resolve, reject) {
// const firestore = getFirestore();
// const key = firestore.ref().child(property.uid).push().key
// const img = storage.ref().child(property.uid).child(key)
// const uploadedImages = property.uploadedImages
//let uploaded_arr = []
const uploadTask = storage.ref(`Properties/${uid}/${key}/${file.name}`).put(file);
uploadTask.on('state_changed',
(snapshot) => {
// progrss function ....
// const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
//
// console.log(progress);
},
(error) => {
// //error function ....
// dispatch({ type: 'UPLOAD_ERROR'}, error);
toastr.error('הודעת מערכת', error)
reject()
},
() => {
// //complete function ....
storage.ref('Properties').child(String(uid)).child(String(key)).child(file.name).getDownloadURL().then(url => {
// console.log(url)
resolve(url);
})
});
});
}

Answer 2

This is because map will execute all the async lambdas immediately after each other. If you have n element in that array, then map executes n async functions without waiting for the promises being finished.
You can do that using Promise.all. Here the example.
export const handleUploads = (uploadedImages, uid, key, directory) => {
return async (dispatch, getState, { getFirebase, getFirestone }) => {
// ...
const urls = await Promise.all(
uploadedImages.map(async file => uploadedFiles(file, uid, key))
);
// ...
return ...
}
}
Where uploadedFiles needs to be async, too.