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");
}
});
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.