Ok!
- The form I am trying to use is this one (none dynamic):
Right! —> NON-DYNAMIC-FORM.
I have a Custom Form on my site which is designed to collect data and also a couple of attached files. The form works and when someone completes the form I can see the attachments in Content Manager
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
So that means you have a CUSTOM-FORM connected by an NON-DYNAMIC-DATASET (because your form is on a non-dynamic page).
Your Dataset-ID ---> $w("#dataset1")
Your problem/issue:
I am trying to also include the Files uploaded via the form.
Your Backend-Code for eMail:
import {sendWithService} from 'backend/sendGrid';
export function sendEmail(subject, body) {
const key = "#############";
const sender = "sender email ";
const recipient = "my email";
return sendWithService(key, sender, recipient, subject, body);
}
export function sendEmailWithRecipient(subject, body, recipient) {
const key = "xxxxxxjDfE5ixxxxxxxxxxx";
const sender = "sender email";
return sendWithService(key, sender, recipient, subject, body);
}
Your Backend-Code for SendGrid…
import {fetch} from 'wix-fetch';
export function sendWithService(key, sender, recipient, subject, body) {
const url = "https://api.sendgrid.com/api/mail.send.json";
const headers = {
"Authorization": "Bearer " + key,
"Content-Type": "application/x-www-form-urlencoded"
};
const data = `from=${sender}&to=${recipient}&subject=${subject}&text=${body}`;
const request = {
"method": "post",
"headers": headers,
"body": data
};
return fetch(url, request)
.then(response => response.json());
}
Your Page-Code…
import {sendEmail, sendEmailWithRecipient} from 'backend/email';
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
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)});
}
You click onto your SUBMIT-BUTTON, which is surely also connected to your dataset inside the property-panel.
The saving-process starts…and calls the → sendFormData ← function.
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
});
Before the next call of a backend-function you generate your subject + body data…
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)});
}
Questions:
- Till here your code works?
- The issue is that you can not include the following information into your BODY-Object???
\rFile Upload: ${$w("#fileUpload1").attachmentUrls.join(", ")}
\rImage Upload: ${$w("#imageUpload1").attachmentUrls.join(", ")}`;
- This is your UPLOAD-SECTION, you want to upload?
- You know, that you have first to upload the file or image, before you can get any real data you can use for your further process?
Your way to success…
-
Click the SUBMIT-BUTTON after all fields are filled out.
-
First thing what should happen is the UPLOAD-PROCESS.
You should await for the end of the UPLOAD-PROCESS, before you can process all your next steps, because you will need the resulting data to include in your mail, right?
-
Why you do not work with CONSOLE-LOGS ???
I can’t see any LOGs on your site.
Try to work more with console-logs, this will helpt you to understand your own code better. This way you will see more whats happening in all your site’s functions.
So back to your problem:
You are using an onAfter-Save()-HOOK, but why you do not use also an onBeforeSave()-HOOK ???
$w.onReady(function () {
$w("#dataset1").onBeforeSave(async()=>{
let awaitingData = await myUploadFunction();
});
$w("#dataset1").onAfterSave(sendFormData);
});
function myUploadFunction(){
console.log("This function will give back results from UPLOAD-PROCESS, first, before the next function starts!");
here your upload-button function --> with returning resul!!!!!
...
...
return data
}
I hope i understood your issue the right way. And i hope i gave you the right direction.
Edit: uploadFiles - Velo API Reference - Wix.com
