Awat doesn't wait for async

I'm new to async and await, I have a simple web app with firebase which gets files through input fields and upload them to the firebase via a button click but when I click button it does,t wait for async function to uload the files at first click. But when I click second time the files uploaded and I got the expected output. How can I solve this? Here are my codes

Upload Function

async function uploadImages() {
        var storageRef = firebase.storage().ref();
        var uploadImages = document.getElementsByName("fupload").forEach((element) => {
            var imageRef = storageRef.child(
                "projects/" + projectName + "/" + (element as HTMLInputElement).files[0].name
            );
            let file = (element as HTMLInputElement).files[0];
            imageRef.put(file).then((snapshot) => {
                snapshot.ref.getDownloadURL().then(function (downloadURL) {
                    paragraphUrl.push(downloadURL);
                });
            });
        });

        if (document.getElementsByName("fupload").length == paragraphUrl.length) {
            return paragraphUrl;
        } else {
            return 1;
        }
    }

Button click function

async function upload(){
        await uploadImages().then((data) => {
            if (data != 1) {
                paragraphData = paragraphData.map(
                    function (x, i) {
                        return {
                            Title: x.Title,
                            Paragraph: x.Paragraph,
                            Image: data[i],
                        };
                    }.bind(this)
                );
                console.log(paragraphData);

                //dispatch("paragraphData",{data})
            } else {
                console.log("d");
            }
        });
}

1 answer

  • answered 2021-04-15 16:48 Geethmaka Dissanayake

    Thank you all I fixed the problem I'll add my code below.

    Upload function

        async function uploadImages() {
            var storageRef = firebase.storage().ref();
            for (const file of document.getElementsByName("fupload")) {
                // let test = (file as HTMLInputElement).files[0].name;
                // console.log(test);
                var imageRef = storageRef.child(
                    "projects/" + projectName + "/" + (file as HTMLInputElement).files[0].name
                );
                let test = (file as HTMLInputElement).files[0].name;
                let testFile = (file as HTMLInputElement).files[0];
                await imageRef.put(testFile).then((snapshot) => {
                    snapshot.ref.getDownloadURL().then(function (downloadURL) {
                        paragraphUrl.push(downloadURL);
                    });
                });
            }
            return paragraphUrl;
    }
    

    Button Click function

        async function submitParagraphData() {
            paragraphTitles = [];
            paragraphs = [];
            var e = document.getElementsByName("ParagrphTitle").forEach((element) => {
                paragraphTitles.push((element as HTMLInputElement).value);
            });
            var f = document.getElementsByName("Paragraph").forEach((element) => {
                paragraphs.push((element as HTMLInputElement).value);
            });
    
            let paragraphData = paragraphTitles.map(
                function (x, i) {
                    return { Title: x, Paragraph: paragraphs[i] };
                }.bind(this)
            );
    
            await uploadImages().then((data) => {
                console.log(data);
            });
        }
    

    The problem I had was when I click the button it displayed an empty array because file upload takes some time but when I click second time it displays the expected output because file was uploaded. So I added await to the line

    imageRef.put(testFile) ............
    

    So it fixed my problem.Thank you all for the support.