Custom Form - handling attachments

Ask the community
, ,
9

ChatGPT again to the rescue with the following suggestion:

The error “TypeError: $w(…).onClick is not a function” is triggered because onClick is not a function in the Wix Code API. Instead, you can use the onChange event to detect when a file has been selected for upload.

With the code example provided I now have this Page Code:

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').onChange(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').onChange(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));
};

Console looks like this:

1388×1020 67.3 KB

Email comes through but still nothing attached

I also have the 2 errors in the address handlers which I am also going to ask CGPT about