Awat 不等待异步

Question

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");
            }
        });
}

Answer 1

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.