I am currently developing a light dashboard in Vue that connects to Firestore and Storage. As someone who is not an expert, I have encountered a roadblock in what should be a simple task. The issue lies with a function that is meant to retrieve all URLs based on filenames from the storage system.
getImages: function(uid, images) {
images.forEach((filename) => {
var ref = firebaseApp.storage().ref('images/' + uid + "/" + filename);
ref.getDownloadURL().then(function(url) {
this.finalImages.push(url)
console.log(url);
}).catch(function(error) {
switch (error.code) {
case 'storage/object_not_found':
// File doesn't exist
console.log('Object not found');
break;
case 'storage/unauthorized':
// User doesn't have permission to access the object
console.log('You do not have the right permissions');
break;
case 'storage/canceled':
// User canceled the upload
console.log('Canceled');
break;
case 'storage/unknown':
// Unknown error occurred, inspect the server response
console.log('Who knows...');
break;
}
})
})
}
However, the URLs download after the code execution finishes, making them invisible to me. Is there a way to pause the process until the URLs populate the finalImages array before continuing?