Custom Form - handling attachments

Ask the community
, ,
8

I took what you suggested / read the link / borrowed code from it and (with some syntax checking from ChatGPT) I now have code that seems to have no Syntax errors:

import {sendEmail, sendEmailWithRecipient} from 'backend/email';

$w.onReady(function () {
    $w("#dataset1").onBeforeSave(async () => {
        let awaitingData = await myUploadFunction();
    });
    $w("#dataset1").onAfterSave(sendFormData);
});

async function myUploadFunction() {
    console.log("This function will give back results from UPLOAD-PROCESS, first, before the next function starts!");
    $w("#uploadButton1").fileType = "Image"; // Site visitor can choose an image
    $w('#uploadButton1').onClick(async () => {
        if ($w("#uploadButton1").value.length > 0) {  // Site visitor chose a file
            console.log("Uploading the following files:")
            try {
                const uploadedFiles = await $w("#uploadButton1").uploadFiles();
                uploadedFiles.forEach(uploadedFile => {
                    console.log("File url:" + uploadedFile.url);
                })
                console.log("Upload successful.");
            } catch (uploadError) {
                console.log("File upload error: " + uploadError.errorCode);
                console.log(uploadError.errorDescription);
            }
        } else {  // Site visitor clicked button but didn't choose an Image file
            console.log("Please choose an Image file to upload.")
        }
    });
    $w("#uploadButton2").fileType = "Document"; // Site visitor can choose a Document
    $w('#uploadButton2').onClick(async () => {
        if ($w("#uploadButton2").value.length > 0) {  // Site visitor chose a file
            console.log("Uploading the following files:")
            try {
                const uploadedFiles = await $w("#uploadButton2").uploadFiles();
                uploadedFiles.forEach(uploadedFile => {
                    console.log("File url:" + uploadedFile.url);
                })
                console.log("Upload successful.");
            } catch (uploadError) {
                console.log("File upload error: " + uploadError.errorCode);
                console.log(uploadError.errorDescription);
            }
        } else {  // Site visitor clicked button but didn't choose a Document file
            console.log("Please choose a Document file to upload.")
        }
    });
}

function sendFormData() {
  const subject = `New Vet Referral Form from ${$w("#input1").value}`;
  const body = `New Vet Referral from ${$w("#input1").value}
    \rOwners Name: ${$w("#input1").value}
    \rOwners Email: ${$w("#input2").value}
    \rOwners Contact Number: ${$w("#input3").value}
    \rOwners Address and Post Code: ${$w("#addressInput3").streetAddress}
    \rAnimals Name: ${$w("#input4").value}
    \rAnimal Species: ${$w("#dropdown1").value}
    \rAnimal Breed: ${$w("#input5").value}
    \rReferring Vet: ${$w("#input6").value}
    \rReferring Vet Practice: ${$w("#input7").value}
    \rPractice Address and Postcode: ${$w("#addressInput2").value}
    \rVet Email: ${$w("#input8").value}
    \rVet Phone: ${$w("#input9").value}
    \rBrief Description of the Problem: ${$w("#input10").value}
    \rPreference for making this appointment: ${$w("#dropdown3").value}`;
  const recipient = $w("#input8").value;

  sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response));

  sendEmail(subject, body)
    .then(response => console.log(response));
};

I also managed to get an email sent:

New Vet Referral from v
Owners Name: v
Owners Email: my_email
Owners Contact Number: my_mobile
Owners Address and Post Code: undefined
Animals Name: n
Animal Species: Canine
Animal Breed: lion
Referring Vet: c
Referring Vet Practice: g
Practice Address and Postcode: [object Object]
Vet Email:
Vet Phone:
Brief Description of the Problem: hhh
Preference for making this appointment: Contact you first (referring Vet)

I did not managed to ATTACH any images or DOCUMENTS and in Console I see this:

1402×934 154 KB

I think the key here is: “onClick is not a function” ?