Include images & documents in Form Submission Email

Ask the community
,
1

I recently coded the Form Submission through SendGrid. However, i have connected up all of my input boxes so that it shows the inputed information on the email, but the Images/Documents inputs aren’t showing any attachments in the email, i am assuming this requires extra attention as it possibly works differently from the normal input text boxes.

My code is:

import {sendEmail} from ‘backend/email’;
import wixWindow from ‘wix-window’;

export function text68_viewportEnter(event) {

const subject = (𝗩𝗮𝗹𝗽𝗮𝗿 𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀) - 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝗙𝗼𝗿 𝗘𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗩𝗲𝗿𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 - ${$w("#input34").value};
const body = `𝗥𝗘𝗤𝗨𝗘𝗦𝗧 𝗙𝗢𝗥 𝗘𝗠𝗣𝗟𝗢𝗬𝗠𝗘𝗡𝗧 𝗩𝗘𝗥𝗜𝗙𝗜𝗖𝗔𝗧𝗜𝗢𝗡 ${$w(“#input35”).value}
\rEmployer Date: ${$w(“#datePicker3”).value}
\rTo: ${$w(“#input1”).value}
\rFax Number: ${$w(“#input9”).value}
\rPhone Nuber: ${$w(“#input8”).value}
\rFrom: ${$w(“#input10”).value}
\rRe: Lease Applicant: ${$w(“#input11”).value}

\r𝗧𝗵𝗲 𝗮𝗯𝗼𝘃𝗲-𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝗱 𝗟𝗲𝗮𝘀𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗵𝗮𝘀 𝗺𝗮𝗱𝗲 𝗮𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝗹𝗲𝗮𝘀𝗲 𝗮 𝗽𝗿𝗼𝗽𝗲𝗿𝘁𝘆 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝘂𝗻𝗱𝗲𝗿𝘀𝗶𝗴𝗻𝗲𝗱 𝗽𝗿𝗼𝘀𝗽𝗲𝗰𝘁𝗶𝘃𝗲 𝗟𝗮𝗻𝗹𝗼𝗿𝗱. 𝗧𝗵𝗲 𝗟𝗲𝗮𝘀𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗿𝗲𝗽𝗼𝗿𝘁𝗲𝗱 𝘁𝗵𝗮𝘁 𝗵𝗲 𝗶𝘀 𝗲𝗺𝗹𝗼𝘆𝗲𝗱 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝘁 𝗰𝗼𝗺𝗽𝗮𝗻𝘆. 𝗘𝗻𝗰𝗹𝗼𝘀𝗲𝗱 𝗶𝘀 𝗮𝗻 𝗮𝘂𝘁𝗵𝗼𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝗿𝗲𝗹𝗲𝗮𝘀𝗲 𝗲𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻. 𝗣𝗹𝗲𝗮𝘀𝗲 𝗽𝗿𝗼𝘃𝗶𝗱𝗲 𝘁𝗵𝗲 𝗳𝗼𝗹𝗹𝗼𝘄𝗶𝗻𝗴: ${$w(“#input35”).value}
\r(1) Beginning date of employment: ${$w(“#datePicker4”).value}
\r(2) Monthly gross income: ${$w(“#input4”).value}
\r(3) Position currently held: ${$w(“#input5”).value}
\r(4) Other relevant Information: ${$w(“#input6”).value}
\rTitle of person completing Form: ${$w(“#input12”).value}
\rName: ${$w(“#input13”).value}
\rPrinted name: ${$w(“#input15”).value}
\rDate: ${$w(“#input14”).value}

\𝗣𝗹𝗲𝗮𝘀𝗲 𝗿𝗲𝘁𝘂𝗿𝗻 𝘁𝗵𝗶𝘀 𝗳𝗼𝗿𝗺 𝗮𝘀 𝘀𝗼𝗼𝗻 𝗮𝘀 𝗽𝗼𝘀𝘀𝗶𝗯𝗹𝗲 𝘁𝗼: ${$w("#input35").value} 
\rName: ${$w("#input16").value} 
\rPropert Manager: ${$w("#checkboxGroup1").value} 
\rFax number: ${$w("#input18").value} 
\rPhone number: ${$w("#input17").value} 
\rE-mail: ${$w("#input19").value}

\𝗔𝗨𝗧𝗛𝗢𝗥𝗜𝗭𝗔𝗧𝗜𝗢𝗡 𝗧𝗢 𝗥𝗘𝗟𝗘𝗔𝗦𝗘 𝗜𝗡𝗙𝗢𝗥𝗠𝗔𝗧𝗜𝗢𝗡 𝗥𝗘𝗟𝗔𝗧𝗘𝗗 𝗧𝗢 𝗔 𝗥𝗘𝗦𝗜𝗗𝗘𝗡𝗧𝗜𝗔𝗟 𝗟𝗘𝗔𝗦𝗘 𝗔𝗣𝗣𝗟𝗜𝗖𝗔𝗡𝗧 ${$w(“#input35”).value}

\I, ${$w("#input20").value} \r(Applicant, have submitted an application)  
\rTo lease a property located at: ${$w("#input21").value} 
\rAddress: ${$w("#input25").value} 
\rCity: ${$w("#input23").value} 
\rState: ${$w("#input24").value} 
\rZip: ${$w("#input22").value} 

\𝗧𝗵𝗲 𝗹𝗮𝗻𝗱𝗹𝗼𝗿𝗱, 𝗯𝗿𝗼𝗸𝗲𝗿, 𝗼𝗿 𝗹𝗮𝗻𝗱𝗹𝗼𝗿𝗱’𝘀 𝗿𝗲𝗽𝗿𝗲𝘀𝗲𝗻𝘁𝗮𝘁𝗶𝘃𝗲 𝗶𝘀: ${$w("#input35").value} 

\Name: ${$w("#input26").value}  
\rAddress: ${$w("#input28").value} 
\rCity: ${$w("#input27").value} 
\rState: ${$w("#input29").value} 
\rZip: ${$w("#input30").value} 
\rFax: ${$w("#input32").value} 
\rPhone: ${$w("#input31").value} 
\rE-mail: ${$w("#input33").value} 

\𝗨𝗣𝗟𝗢𝗔𝗗 𝗗𝗢𝗖𝗨𝗠𝗘𝗡𝗧𝗔𝗧𝗜𝗢𝗡 ${$w("#input35").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗽𝗮𝘆 𝘀𝘁𝘂𝗯𝘀: ${$w("#input35").value} 

\rpay stub 1: ${$w("#uploadButton1").value} 
\rpay stub 2: ${$w("#uploadButton2").value} 
\rpay stub 3: ${$w("#uploadButton3").value} 
\rpay stub 4: ${$w("#uploadButton4").value} 
\rpay stub 5: ${$w("#uploadButton5").value} 
\rpay stub 6: ${$w("#uploadButton10").value} 
\rpay stub 7: ${$w("#uploadButton9").value} 
\rpay stub 8: ${$w("#uploadButton8").value} 
\rpay stub 9: ${$w("#uploadButton7").value} 
\rpay stub 10: ${$w("#uploadButton6").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗜𝗗: ${$w("#input35").value} 
\rID : ${$w("#uploadButton11").value}

\r✅I give my permission, ${$w(“#input34”).value}
\r✅(1) to my current and former employers to release any information about my employment history and income history to the above-named person. ${$w(“#checkbox5”).value}
\r✅(2) to my current and former landlords to release any information about my rental history to the above-named person. ${$w(“#checkbox5”).value}
\r✅(3) to my current and former mortgage lenders on propety that i own or have owned to release any information about my mortgage payment history to the above-named person. ${$w(“#checkbox5”).value}
\r✅(4) to my bank, savings and loan, or credit union to provide a verification of funds that i have on deposit to the above-named person and. ${$w(“#checkbox5”).value}
\r✅(5) to the avobe-named person to obtain a copy of my consumer report (credit report) from any consumer reporting agency and to obtain background information about me. ${$w(“#checkbox5”).value}

\r𝗡𝗼𝘁𝗲: 𝗔𝗻𝘆 𝗯𝗿𝗼𝗸𝗲𝗿 𝗴𝗮𝘁𝗵𝗲𝗿𝗶𝗻𝗴 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗮𝗯𝗼𝘂𝘁 𝗮𝗻 𝗮𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗮𝗰𝘁𝘀 𝘂𝗻𝗱𝗲𝗿 𝘀𝗽𝗲𝗰𝗶𝗳𝗶𝗰 𝗶𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀 𝘁𝗼 𝘃𝗲𝗿𝗶𝗳𝘆 𝘀𝗼𝗺𝗲 𝗼𝗿 𝗮𝗹𝗹 𝗼𝗳 𝘁𝗵𝗲 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗱𝗲𝘀𝗰𝗿𝗶𝗯𝗲𝗱 𝗶𝗻 𝘁𝗵𝗶𝘀 𝗮𝘂𝘁𝗵𝗼𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻. 𝗧𝗵𝗲 𝗯𝗿𝗼𝗸𝗲𝗿 𝗺𝗮𝗶𝗻𝘁𝗮𝗶𝗻𝘀 𝗮 𝗽𝗿𝗶𝘃𝗮𝗰𝘆 𝗽𝗼𝗹𝗶𝗰𝘆 𝘄𝗵𝗶𝗰𝗵 𝗶𝘀 𝗮𝘃𝗮𝗶𝗹𝗮𝗯𝗹𝗲 𝘂𝗽𝗼𝗻 𝗿𝗲𝗾𝘂𝗲𝘀𝘁. ${$w(“#checkbox5”).value}`;

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

2

This one is wrong:
\rpay stub 1: ${$w(“#uploadButton1”). value}
so all the others.
The file hasn’t even uploaded (the value of an uploadButton is the name of the file the user selected but hasn’t uploaded yet).

3

That’s right, that’s why I would like you to help me do it, I would really appreciate it.

How do I have to have it so I can send images and documents

4

@mizaeltovarreyes Two things:

  1. I’d create a template in SendGrid and wouldn’t send such a long string as you did.
    Only send the values and let the template embed them in the pre-defined spots. It’s not a must but it’ll be easier to handle, and you’ll be able to embed the images in the email body itself.

  2. You have to wait for the files to upload, then push each uploaded file sources to an array, when only when all the mandatory files are uploaded, enable the submit button, and on click, pass the image sources to the SendGrid template.
    Useful links:
    https://www.wix.com/corvid/reference/$w.UploadButton.html

https://sendgrid.com/docs/ui/sending-email/how-to-send-an-email-with-dynamic-transactional-templates/

https://sendgrid.com/blog/how-to-customize-an-email-marketing-template/

5 
I would not like to make a template, I would like to do it as I did, I saw the following example, and I would like to use it with my code, but I could not, could you help me do it as follows?


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

$w.onReady(function () {
	$w("#dataset1").onAfterSave(sendFormData);
});
	
// wix:document://v1 -> docs.wixstatic.com/ugd
import {sendEmail, sendEmailWithRecipient} from 'backend/email';
function sendFormData() {
  const convertRegex = new RegExp(/wix:document:\/\/v1\/([^\/]+)\/(.*)$/);
  const item = $w("#dataset1").getCurrentItem();
  //Instead of "fieldName", add here the relevant field name to which
  //the upload button is connected to.   
  const matches = item.fieldName.match(convertRegex);
  const documentUrl = `docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]}`;
$w.onReady(function () {
  const subject = `New Submission by ${$w("#firstName").value}`;
  const body = `Name: ${$w("#firstName").value}
    \rEmail: ${$w("#emailInput").value}
    \rfname: ${$w("#firstName").value}
    \rlname: ${$w("#lastName").value}
    \rFile: ${documentUrl}`;

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

Are you using SendGrid NPM?

7

@jonatandor35 Yes, im using SendGrid NPM

8

@mizaeltovarreyes I don’t have to time to write full instructions but basically -
on you backend:

import sgMail from '@sendgrid/mail';//top of the page
export function mySendgridFunction(sender, address, data) {
   sgMail.setApiKey(d-XXXXXXXXXXXXXXX);
let msg = {
       to: adress,
      from: sender,
       templateId: 'd-YYYYYYYYYYYYYYYY',
       dynamic_template_data: data;
       }; 
       sgMail.send(msg);
}

and on the front end:

let images = [];
let data = {
name: $w("#input26").value,
city: $w("#input27").value,
image: "https://static.wixstatic.com/media/42467c_63de28965d094c9b87f143b55d91d72b~mv2_d_2000_2266_s_2.png/v1/crop/x_0,y_244,w_2000,h_1778/fill/w_720,h_640,al_c,q_85,usm_0.66_1.00_0.01/fly-side_edited.jpg",
//etc…
}
$w("#submit").onClick(event => {
mySendgridFunction($w("#email).value, "test1@test.com", data);
})

And go to SendGrid, open a template and set there the functionality of the data.

9

@jonatandor35 I would like that when uploading the image you generate your own link and send it to the mail

10

@mizaeltovarreyes


$w('#uploadButton1').onChange(event => {
  if ($w("#uploadButton1").value.length > 0) {
    $w("#uploadButton1").startUpload()
      .then( (uploadedFile) => {
        let imgUrl = `https://static.wixstatic.com/media/${uploadedFile.url.split("/")[3]}`;
        //now you have the url and you can do whatever you want.
      } )
      .catch( (uploadError) => {
        console.log(`File upload error: ${uploadError.errorCode}`);
        console.log(uploadError.errorDescription);
      } );
  }
} );
11

Sorry, but I still can’t, the email is sent with all the fields except with the links of the loaded images, it doesn’t generate the links, my code is the following:

export function text68_viewportEnter(event) {

if ($w(“#uploadButton1”).value.length > 0) {
$w(“#uploadButton1”).startUpload()
.then( (uploadedFile) => {
let imgUrl = **static** .wixstatic.com/media/${uploadedFile.url.split("/")[3]};
//now you have the url and you can do whatever you want.
} )
. catch ( (uploadError) => {
console.log(File upload error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
} );
}

const subject = (𝗩𝗮𝗹𝗽𝗮𝗿 𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀) - 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝗙𝗼𝗿 𝗘𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗩𝗲𝗿𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 - ${$w("#input34").value};
const body = `𝗥𝗘𝗤𝗨𝗘𝗦𝗧 𝗙𝗢𝗥 𝗘𝗠𝗣𝗟𝗢𝗬𝗠𝗘𝗡𝗧 𝗩𝗘𝗥𝗜𝗙𝗜𝗖𝗔𝗧𝗜𝗢𝗡 ${$w(“#input35”).value}
\rEmployer Date: ${$w(“#datePicker3”).value}
\rTo: ${$w(“#input1”).value}
\rFax Number: ${$w(“#input9”).value}
\rPhone Nuber: ${$w(“#input8”).value}
\rFrom: ${$w(“#input10”).value}
\rRe: Lease Applicant: ${$w(“#input11”).value}

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗽𝗮𝘆 𝘀𝘁𝘂𝗯𝘀: ${$w("#input35").value} 

\rpay stub 1: ${$w("#uploadButton1").value} 
\rpay stub 2: ${$w("#uploadButton2").value} 
\rpay stub 3: ${$w("#uploadButton3").value} 
\rpay stub 4: ${$w("#uploadButton4").value} 
\rpay stub 5: ${$w("#uploadButton5").value} 
\rpay stub 6: ${$w("#uploadButton10").value} 
\rpay stub 7: ${$w("#uploadButton9").value} 
\rpay stub 8: ${$w("#uploadButton8").value} 
\rpay stub 9: ${$w("#uploadButton7").value} 
\rpay stub 10: ${$w("#uploadButton6").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗜𝗗: ${$w("#input35").value} 
\rID : ${$w("#uploadButton11").value `;

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

If you could help me I would really appreciate it!

12

I suggest you’ll hire someone at Wix Arena for this specific task, because you need some help in three different places (front-end, backend and SendGrid templates) and it’ll be too much to try to explain all the details over the forum posts.

13

@jonatandor35 The back-end and the API key via Send Grid are already configured, my form already sends the email, I just need to generate an image link to send it by mail, it is the only thing I need.

//email.jsw
export function sendEmail(subject, body) {
const key = “//API KEY”;
const sender = “benavjr@valparbusiness.com”;
const recipient = “benavjr@valparbusiness.com”;
return sendWithService(key, sender, recipient, subject, body);
}

//sendGrid.js
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());
}

//Font end

export function text68_viewportEnter(event) {

const subject = (𝗩𝗮𝗹𝗽𝗮𝗿 𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀) - 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝗙𝗼𝗿 𝗘𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗩𝗲𝗿𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 - ${$w("#input34").value};
const body = `𝗥𝗘𝗤𝗨𝗘𝗦𝗧 𝗙𝗢𝗥 𝗘𝗠𝗣𝗟𝗢𝗬𝗠𝗘𝗡𝗧 𝗩𝗘𝗥𝗜𝗙𝗜𝗖𝗔𝗧𝗜𝗢𝗡 ${$w(“#input35”).value}
\rEmployer Date: ${$w(“#datePicker3”).value}
\rTo: ${$w(“#input1”).value}
\rFax Number: ${$w(“#input9”).value}
\rPhone Nuber: ${$w(“#input8”).value}
\rFrom: ${$w(“#input10”).value}
\rRe: Lease Applicant: ${$w(“#input11”).value}

\r𝗧𝗵𝗲 𝗮𝗯𝗼𝘃𝗲-𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝗱 𝗟𝗲𝗮𝘀𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗵𝗮𝘀 𝗺𝗮𝗱𝗲 𝗮𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝗹𝗲𝗮𝘀𝗲 𝗮 𝗽𝗿𝗼𝗽𝗲𝗿𝘁𝘆 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝘂𝗻𝗱𝗲𝗿𝘀𝗶𝗴𝗻𝗲𝗱 𝗽𝗿𝗼𝘀𝗽𝗲𝗰𝘁𝗶𝘃𝗲 𝗟𝗮𝗻𝗹𝗼𝗿𝗱. 𝗧𝗵𝗲 𝗟𝗲𝗮𝘀𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗿𝗲𝗽𝗼𝗿𝘁𝗲𝗱 𝘁𝗵𝗮𝘁 𝗵𝗲 𝗶𝘀 𝗲𝗺𝗹𝗼𝘆𝗲𝗱 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝘁 𝗰𝗼𝗺𝗽𝗮𝗻𝘆. 𝗘𝗻𝗰𝗹𝗼𝘀𝗲𝗱 𝗶𝘀 𝗮𝗻 𝗮𝘂𝘁𝗵𝗼𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝗿𝗲𝗹𝗲𝗮𝘀𝗲 𝗲𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻. 𝗣𝗹𝗲𝗮𝘀𝗲 𝗽𝗿𝗼𝘃𝗶𝗱𝗲 𝘁𝗵𝗲 𝗳𝗼𝗹𝗹𝗼𝘄𝗶𝗻𝗴: ${$w("#input35").value} 
\r(1) Beginning date of employment: ${$w("#datePicker4").value} 
\r(2) Monthly gross income: ${$w("#input4").value} 
\r(3) Position currently held: ${$w("#input5").value} 
\r(4) Other relevant Information: ${$w("#input6").value} 
\rTitle of person completing Form: ${$w("#input12").value} 
\rName: ${$w("#input13").value} 
\rPrinted name: ${$w("#input15").value} 
\rDate: ${$w("#input14").value} 

\𝗨𝗣𝗟𝗢𝗔𝗗 𝗗𝗢𝗖𝗨𝗠𝗘𝗡𝗧𝗔𝗧𝗜𝗢𝗡 ${$w("#input35").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗽𝗮𝘆 𝘀𝘁𝘂𝗯𝘀: ${$w("#input35").value} 

\rpay stub 1: ${$w("#uploadButton1").value} 
\rpay stub 2: ${$w("#uploadButton2").value} 
\rpay stub 3: ${$w("#uploadButton3").value} 
\rpay stub 4: ${$w("#uploadButton4").value} 
\rpay stub 5: ${$w("#uploadButton5").value} 
\rpay stub 6: ${$w("#uploadButton10").value} 
\rpay stub 7: ${$w("#uploadButton9").value} 
\rpay stub 8: ${$w("#uploadButton8").value} 
\rpay stub 9: ${$w("#uploadButton7").value} 
\rpay stub 10: ${$w("#uploadButton6").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗜𝗗: ${$w("#input35").value} 
\rID : ${$w("#uploadButton11").value}`;

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

14

@mizaeltovarreyes You just think it’s configured. If you want to embed images in your message, you’ll need to make changes in both places.
Even the front-end code you posted here is too far from being ready, and the needed changes partly depend on how you’ll configure the backend and the SendGrid template.
Maybe someone else will be able to assist, but as it’s not trivial and it takes time to explain, you should consider hiring an expert.

15

Finally I could, after playing with the code, I could get it to work, the code working is as follows:

// sendgrid script
import {sendEmail} from ‘backend/email’;

//URL
$w.onReady( function () {
$w(“#dataset2”).onAfterSave(sendFormData);
});
function sendFormData() {
}

export function text68_viewportEnter(event) {

//RECUPERA URL DE LA IMAGEN CARGADA 1
const item = $w(“#dataset2”).getCurrentItem();
const wiximageurl = “https://static.wixstatic.com/media/”;
let image1local = “”;
image1local = item.payStub1.replace(‘image://v1/’, ‘’);
image1local = image1local.substr(image1local.lastIndexOf(‘/’)+1);
const image1Url = wiximageurl + image1local;

//RECUPERA URL DE LA IMAGEN CARGADA 2
let image2local = “”;
image2local = item.payStub2.replace(‘image://v1/’, ‘’);
image2local = image2local.substr(image2local.lastIndexOf(‘/’)+1);
const image2Url = wiximageurl + image2local;

//RECUPERA URL DE LA IMAGEN CARGADA 3
let image3local = “”;
image3local = item.payStub3.replace(‘image://v1/’, ‘’);
image3local = image3local.substr(image3local.lastIndexOf(‘/’)+1);
const image3Url = wiximageurl + image3local;

//RECUPERA URL DE LA IMAGEN CARGADA 4
let image4local = “”;
image4local = item.payStub4.replace(‘image://v1/’, ‘’);
image4local = image4local.substr(image4local.lastIndexOf(‘/’)+1);
const image4Url = wiximageurl + image4local;

//RECUPERA URL DE LA IMAGEN CARGADA 5
let image5local = “”;
image5local = item.payStub5.replace(‘image://v1/’, ‘’);
image5local = image5local.substr(image5local.lastIndexOf(‘/’)+1);
const image5Url = wiximageurl + image5local;

//RECUPERA URL DE LA IMAGEN CARGADA 6
let image6local = “”;
image6local = item.payStub6.replace(‘image://v1/’, ‘’);
image6local = image6local.substr(image6local.lastIndexOf(‘/’)+1);
const image6Url = wiximageurl + image6local;

//RECUPERA URL DE LA IMAGEN CARGADA 7
let image7local = “”;
image7local = item.payStub7.replace(‘image://v1/’, ‘’);
image7local = image7local.substr(image7local.lastIndexOf(‘/’)+1);
const image7Url = wiximageurl + image7local;

//RECUPERA URL DE LA IMAGEN CARGADA 8
let image8local = “”;
image8local = item.payStub8.replace(‘image://v1/’, ‘’);
image8local = image8local.substr(image8local.lastIndexOf(‘/’)+1);
const image8Url = wiximageurl + image8local;

//RECUPERA URL DE LA IMAGEN CARGADA 9
let image9local = “”;
image9local = item.payStub9.replace(‘image://v1/’, ‘’);
image9local = image9local.substr(image9local.lastIndexOf(‘/’)+1);
const image9Url = wiximageurl + image9local;

//RECUPERA URL DE LA IMAGEN CARGADA 10
let image10local = “”;
image10local = item.payStub10.replace(‘image://v1/’, ‘’);
image10local = image10local.substr(image10local.lastIndexOf(‘/’)+1);
const image10Url = wiximageurl + image10local;

//RECUPERA URL DE LA IMAGEN CARGADA INE
let imageIDlocal = “”;
imageIDlocal = item.identification.replace(‘image://v1/’, ‘’);
imageIDlocal = imageIDlocal.substr(imageIDlocal.lastIndexOf(‘/’)+1);
const imageIDUrl = wiximageurl + imageIDlocal;

const subject = (𝗩𝗮𝗹𝗽𝗮𝗿 𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀) - 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝗙𝗼𝗿 𝗘𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗩𝗲𝗿𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻 - ${$w("#input34").value};
const body = `𝗥𝗘𝗤𝗨𝗘𝗦𝗧 𝗙𝗢𝗥 𝗘𝗠𝗣𝗟𝗢𝗬𝗠𝗘𝗡𝗧 𝗩𝗘𝗥𝗜𝗙𝗜𝗖𝗔𝗧𝗜𝗢𝗡 ${$w(“#input35”).value}
\rEmployer Date: ${$w(“#datePicker3”).value}
\rTo: ${$w(“#input1”).value}
\rFax Number: ${$w(“#input9”).value}
\rPhone Nuber: ${$w(“#input8”).value}
\rFrom: ${$w(“#input10”).value}
\rRe: Lease Applicant: ${$w(“#input11”).value}

\r𝗧𝗵𝗲 𝗮𝗯𝗼𝘃𝗲-𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝗱 𝗟𝗲𝗮𝘀𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗵𝗮𝘀 𝗺𝗮𝗱𝗲 𝗮𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝗹𝗲𝗮𝘀𝗲 𝗮 𝗽𝗿𝗼𝗽𝗲𝗿𝘁𝘆 𝗳𝗿𝗼𝗺 𝘁𝗵𝗲 𝘂𝗻𝗱𝗲𝗿𝘀𝗶𝗴𝗻𝗲𝗱 𝗽𝗿𝗼𝘀𝗽𝗲𝗰𝘁𝗶𝘃𝗲 𝗟𝗮𝗻𝗹𝗼𝗿𝗱. 𝗧𝗵𝗲 𝗟𝗲𝗮𝘀𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗿𝗲𝗽𝗼𝗿𝘁𝗲𝗱 𝘁𝗵𝗮𝘁 𝗵𝗲 𝗶𝘀 𝗲𝗺𝗹𝗼𝘆𝗲𝗱 𝘄𝗶𝘁𝗵 𝘆𝗼𝘂𝘁 𝗰𝗼𝗺𝗽𝗮𝗻𝘆. 𝗘𝗻𝗰𝗹𝗼𝘀𝗲𝗱 𝗶𝘀 𝗮𝗻 𝗮𝘂𝘁𝗵𝗼𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝘁𝗼 𝗿𝗲𝗹𝗲𝗮𝘀𝗲 𝗲𝗺𝗽𝗹𝗼𝘆𝗺𝗲𝗻𝘁 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻. 𝗣𝗹𝗲𝗮𝘀𝗲 𝗽𝗿𝗼𝘃𝗶𝗱𝗲 𝘁𝗵𝗲 𝗳𝗼𝗹𝗹𝗼𝘄𝗶𝗻𝗴: ${$w("#input35").value} 
\r(1) Beginning date of employment: ${$w("#datePicker4").value} 
\r(2) Monthly gross income: ${$w("#input4").value} 
\r(3) Position currently held: ${$w("#input5").value} 
\r(4) Other relevant Information: ${$w("#input6").value} 
\rTitle of person completing Form: ${$w("#input12").value} 
\rName: ${$w("#input13").value} 
\rPrinted name: ${$w("#input15").value} 
\rDate: ${$w("#input14").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝗿𝗲𝘁𝘂𝗿𝗻 𝘁𝗵𝗶𝘀 𝗳𝗼𝗿𝗺 𝗮𝘀 𝘀𝗼𝗼𝗻 𝗮𝘀 𝗽𝗼𝘀𝘀𝗶𝗯𝗹𝗲 𝘁𝗼: ${$w("#input35").value} 
\rName: ${$w("#input16").value} 
\rPropert Manager: ${$w("#checkboxGroup1").value} 
\rFax number: ${$w("#input18").value} 
\rPhone number: ${$w("#input17").value} 
\rE-mail: ${$w("#input19").value} 

\𝗔𝗨𝗧𝗛𝗢𝗥𝗜𝗭𝗔𝗧𝗜𝗢𝗡 𝗧𝗢 𝗥𝗘𝗟𝗘𝗔𝗦𝗘 𝗜𝗡𝗙𝗢𝗥𝗠𝗔𝗧𝗜𝗢𝗡 𝗥𝗘𝗟𝗔𝗧𝗘𝗗 𝗧𝗢 𝗔 𝗥𝗘𝗦𝗜𝗗𝗘𝗡𝗧𝗜𝗔𝗟 𝗟𝗘𝗔𝗦𝗘 𝗔𝗣𝗣𝗟𝗜𝗖𝗔𝗡𝗧 ${$w("#input35").value} 

\I, ${$w("#input20").value} \r(Applicant, have submitted an application)  
\rTo lease a property located at: ${$w("#input21").value} 
\rAddress: ${$w("#input25").value} 
\rCity: ${$w("#input23").value} 
\rState: ${$w("#input24").value} 
\rZip: ${$w("#input22").value} 

\𝗧𝗵𝗲 𝗹𝗮𝗻𝗱𝗹𝗼𝗿𝗱, 𝗯𝗿𝗼𝗸𝗲𝗿, 𝗼𝗿 𝗹𝗮𝗻𝗱𝗹𝗼𝗿𝗱’𝘀 𝗿𝗲𝗽𝗿𝗲𝘀𝗲𝗻𝘁𝗮𝘁𝗶𝘃𝗲 𝗶𝘀: ${$w("#input35").value} 

\Name: ${$w("#input26").value}  
\rAddress: ${$w("#input28").value} 
\rCity: ${$w("#input27").value} 
\rState: ${$w("#input29").value} 
\rZip: ${$w("#input30").value} 
\rFax: ${$w("#input32").value} 
\rPhone: ${$w("#input31").value} 
\rE-mail: ${$w("#input33").value} 

\𝗨𝗣𝗟𝗢𝗔𝗗 𝗗𝗢𝗖𝗨𝗠𝗘𝗡𝗧𝗔𝗧𝗜𝗢𝗡 ${$w("#input35").value} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗽𝗮𝘆 𝘀𝘁𝘂𝗯𝘀: ${$w("#input35").value} 

\rpay stub 1: ${image1Url} 
\rpay stub 2: ${image2Url} 
\rpay stub 3: ${image3Url} 
\rpay stub 4: ${image4Url} 
\rpay stub 5: ${image5Url} 
\rpay stub 6: ${image6Url} 
\rpay stub 7: ${image7Url} 
\rpay stub 8: ${image8Url} 
\rpay stub 9: ${image9Url} 
\rpay stub 10: ${image10Url} 

\𝗣𝗹𝗲𝗮𝘀𝗲 𝘂𝗽𝗹𝗼𝗮𝗱 𝘆𝗼𝘂𝗿 𝗜𝗗: ${$w("#input35").value} 
\rID : ${imageIDUrl} 

\r✅I give my permission, ${$w("#input34").value} 
\r✅(1) to my current and former employers to release any information about my employment history and income history to the above-named person. ${$w("#checkbox5").value} 
\r✅(2) to my current and former landlords to release any information about my rental history to the above-named person. ${$w("#checkbox5").value} 
\r✅(3) to my current and former mortgage lenders on propety that i own or have owned to release any information about my mortgage payment history to the above-named person. ${$w("#checkbox5").value} 
\r✅(4) to my bank, savings and loan, or credit union to provide a verification of funds that i have on deposit to the above-named person and. ${$w("#checkbox5").value} 
\r✅(5) to the avobe-named person to obtain a copy of my consumer report (credit report)  from  any consumer reporting agency and to obtain background information about me. ${$w("#checkbox5").value} 
\r𝗡𝗼𝘁𝗲: 𝗔𝗻𝘆 𝗯𝗿𝗼𝗸𝗲𝗿 𝗴𝗮𝘁𝗵𝗲𝗿𝗶𝗻𝗴 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗮𝗯𝗼𝘂𝘁 𝗮𝗻 𝗮𝗽𝗽𝗹𝗶𝗰𝗮𝗻𝘁 𝗮𝗰𝘁𝘀 𝘂𝗻𝗱𝗲𝗿 𝘀𝗽𝗲𝗰𝗶𝗳𝗶𝗰 𝗶𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀 𝘁𝗼 𝘃𝗲𝗿𝗶𝗳𝘆 𝘀𝗼𝗺𝗲 𝗼𝗿 𝗮𝗹𝗹 𝗼𝗳 𝘁𝗵𝗲 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗱𝗲𝘀𝗰𝗿𝗶𝗯𝗲𝗱 𝗶𝗻 𝘁𝗵𝗶𝘀 𝗮𝘂𝘁𝗵𝗼𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻. 𝗧𝗵𝗲 𝗯𝗿𝗼𝗸𝗲𝗿 𝗺𝗮𝗶𝗻𝘁𝗮𝗶𝗻𝘀 𝗮 𝗽𝗿𝗶𝘃𝗮𝗰𝘆 𝗽𝗼𝗹𝗶𝗰𝘆 𝘄𝗵𝗶𝗰𝗵 𝗶𝘀 𝗮𝘃𝗮𝗶𝗹𝗮𝗯𝗹𝗲 𝘂𝗽𝗼𝗻 𝗿𝗲𝗾𝘂𝗲𝘀𝘁. ${$w("#checkbox5").value}

`;

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

1481×1017 264 KB

16

:+1: Nice.
But I don’t think the images will be embedded in the mail body (but maybe you didn’t want them to be embedded).