Why does the startupload() not work in await?

Ask the community
,
1

Why does the code advance here without waiting for the file to upload?

function uploadFiles(i) {
 if ($w("#uploadButton" + i).value.length > 0) { // visitor chose a file
        console.log("Uploading" + i + ": " + $w("#uploadButton" + i).value[0].name + "- Please wait.")
        $w("#uploadButton" + i).startUpload()
            .then((res) => {
 //files.push(res.url);
                console.log("Uploaded: " + res);
                $w('#uploadButton' + i).buttonLabel = "Uploaded"
 return res
            })
            .catch((uploadError) => {
                console.log("File upload error: " + uploadError.errorCode);
                console.log(uploadError.errorDescription);
            });

    } else { // site visitor clicked button but didn't choose a file
        console.log("Please choose a file to upload.")
    }
}

async function datacollect() {
 let toInsert = {
 "name": $w('#firstNameTxt').value,
 "lastName": $w('#lastNameTxt').value,
 "email": $w('#emailTxt').value,
 "address": $w('#addressentry').value,
 "phone": $w('#phoneNumber').value,
 "street": $w('#street').value,
 "unit": $w('#unit').value,
 "city": $w('#city').value,
 "province": $w('#subdivision').value,
 "postcode": $w('#postcode').value,
 "country": $w('#country').value,
 "membershipType": $w('#membershipOption').value,
 "language": language,
 "gender": $w('#gender').value,
 "waiver1": await uploadFiles(1),
 "waiver2": await uploadFiles(2),
 "waiver3": await uploadFiles(3),
 "waiver4": await uploadFiles(4),
 "dateOfBirth": $w('#dob').value,
 "ltsDescription": $w('#ltsText').value,
 "discount": $w('#discount').value,
 "bursary": $w('#bursary').value,
 "volunteer": $w('#helpTags').value,
 "photos": $w('#photoCheckbox').value
    }
 //return wixData.insert("Registration", toInsert)
 return toInsert
}

export function btnSubmit_click(event) {

 if ($w('#firstNameTxt').valid && $w('#lastNameTxt').valid && $w('#emailTxt').valid && $w('#phoneNumber').valid && $w('#membershipOption').valid && $w('#city').valid) {

        datacollect().then((toInsert) => {
            console.log("Inserting: " + toInsert);
            wixData.insert("Registration", toInsert).then((res) => {
 let item = res;
                    console.log("uploaded to database", res._id);
                })
                .catch((err) => {
 let errorMsg = err;
                    console.log("your upload failed");
                });
        });
    }
}

This is the result:

1260×481 84.2 KB

The uploads only complete after the toInsert is called

2

P lease observe the community guidelines and refrain from multiple posts on the same topic or question.

You have the following in a loop…

      $w("#uploadButton" + i).startUpload()
            .then((res) => {

…and you are handling the returned Promise in a then. That means that you’ve called startUpload four times without waiting for the completion of each upload. You should use an await, or use Promise.all() to resolve all four.

3

Hi

Thanks for the response. In the code above I’ve taken the startupload out of the loop. The function is called separately four times with an await. Therefore it should wait each time now until each one is uploaded. I posted this separately as I am not using the loop. Is this an issue with the way startupload works?

I have the return at the end of the datacollect function but the await should still be stopping the code at each point?

Thanks