How to upload images to firebase storage and wait for URLs to return before continuing

I’m trying to create a "Create Post" form where the user can input text, as well as input images.

uploadImages() {
    const files = document.querySelector('#imagesInput').files;
    files.forEach(image => {
        console.log("uploading", image.name)
        const name = (+new Date()) + '-' + image.name;
        const task = fb.storage.child(name).put(image, {contentType: image.type});
        task.then(snapshot => {
            snapshot.ref.getDownloadURL().then(url => {
                console.log(url);
            })
        })
    });
}

The image upload process needs to happen first, and I need to return all the URLs (as an array) before the post is created in the database.

imageURLs = this.uploadImages(); // <-- Wait for this to complete and return the image URIs
this.createPost("Hello, world!", imageURLs) // <-- then do this

17 thoughts on “How to upload images to firebase storage and wait for URLs to return before continuing”

Leave a Comment