Questions about email from Wix form with Sendgrid

jennifer76649 · August 17, 2021, 5:01pm

I know there are a few threads about this, but some of them are pretty old, so I want to make sure I have current information. I have a Wix form that I need to send two emails, one that will always go to a specific address, and a second one that will have a variable recipient. The latter one I’m sending via Sendgrid. I’ve gotten the email sending part to work, but there are a couple of things I need to do that I’m not quite clear on.

My form has two file upload fields, and I need to either send the uploaded files as attachments, or include links to the files in the body of the email. I’m not clear on how to get the url of the uploaded file. If I log the value of the upload field to the console, I just get an array with the file name and file size. How do I get the url of the uploaded file(s)?
Is there a way to format the email? I would really like it to be HTML and not plain text. This isn’t quite as important if I can figure out #1

Here is the code that I have with comments on what is currently working and what I want to happen:

Backend/Sendmail.jsw

import sgMail from “@sendgrid/mail” ;

const apiKey = “MyAPIKey” ;

// What I assume I need to do to pass the attachments through to this function
//export function sendEmail(recipient, subject, sender, body, attachment1, attachment2) {

// What is actually working right now
export function sendEmail ( recipient , subject , sender , body ) {
sgMail . setApiKey ( apiKey );

//from Sendgrid documentation but not sure how to use it in a Wix form context 
/*const fs = require("fs"); 
let pathToAttachment1 = `${__dirname}/attachment.pdf`; 
let attachment1 = fs.readFileSync(pathToAttachment).toString("base64");*/ 

**const**  msg  = { 
    to :  recipient , 
    **from** :  sender , 
    subject :  subject , 
    text :  body , 
    /*attachments: [ 
        { 
            content: attachment1,  //file path? 
            filename: attachment1[0].name, 
            type: "image", 
            disposition: "attachment" 
        }, 
        { 
            content: attachment2,  //file path? 
            filename: attachment2[0].name, 
            type: "image", 
            disposition: "attachment" 
        } 
    ]*/ 
}; 
sgMail . send ( msg );

}

The Page Code:

import { sendEmail } from ‘backend/Sendmail’ ;
import { session } from ‘wix-storage’ ;

export function dropdownBrand_change ( event ) {
let brand = $w ( “#dropdownBrand” ). value ;
if ( brand == ‘Bread Zeppelin’ ) {
$w ( “#dropdownBZStore” ). show ();
$w ( “#dropdownBZStore” ). expand ();
$w ( “#dropdownTPStore” ). hide ();
$w ( “#dropdownTPStore” ). collapse ();
}
else if ( brand == ‘Twin Peaks’ ) {
$w ( “#dropdownBZStore” ). hide ();
$w ( “#dropdownBZStore” ). collapse ();
$w ( “#dropdownTPStore” ). show ();
$w ( “#dropdownTPStore” ). expand ();
}
else {
$w ( “#dropdownBZStore” ). hide ();
$w ( “#dropdownBZStore” ). collapse ();
$w ( “#dropdownTPStore” ). hide ();
$w ( “#dropdownTPStore” ). collapse ();
}
}

export function dropdownTPStore_change ( event ) {
let sel = $w ( “#dropdownTPStore” ). selectedIndex ;
if ( sel === 0 ) {
session . setItem ( ‘email’ , “recipient1@domain.com” );
}
else if ( sel === 1 ) {
session . setItem ( ‘email’ , “recipient2@domain.com” );
}
else if ( sel === 2 ) {
session . setItem ( ‘email’ , “recipient3@domain.com” );
}
else {
session . setItem ( ‘email’ , “recipient1@domain.com” );
}
}

export function dropdownBZStore_change ( event ) {
let sel = $w ( “#dropdownBZStore” ). selectedIndex ;
if ( sel === 0 ) {
session . setItem ( ‘email’ , “recipient1@domain.com” );
}
else if ( sel === 1 ) {
session . setItem ( ‘email’ , “recipient2@domain.com” );
}
else if ( sel === 2 ) {
session . setItem ( ‘email’ , “recipient3@domain.com” );
}
else {
session . setItem ( ‘email’ , “recipient1@domain.com” );
}
}

export function button1_click ( event ) {
let toEmail = session . getItem ( ‘email’ );
let fromEmail = ‘fromEmail@somedomain.com’ ;
let subject ;

    **let**  attachmentTABC  =  $w ( "#uploadTABC" ). value ; 
    **let**  attachmentFoodHandler  =  $w ( "#uploadFoodHandlerCert" ). value ; 

    **if**  ( $w ( "#dropdownBrand" ). value  ===  'Twin Peaks' ) { 
        subject  =  `Hourly Employee New Hire/Change Request -  ${ $w ( "#dropdownBrand" ). value }  	${ $w ( "#dropdownTPStore" ). value }`; 
    } 
    **else if**  ( $w ( "#dropdownBrand" ). value  ===  'Bread Zeppelin' ) { 
        subject  =  `Hourly Employee New Hire/Change Request -  ${ $w ( "#dropdownBrand" ). value } ${ $w ( "#dropdownBZStore" ). value }`; 
    } 
    **else**  { 
        subject  =  `Hourly Employee New Hire/Change Request -  ${ $w ( "#dropdownBrand" ). value }`; 
    } 
    // This is how I want to format the email 
    /*let emailContent = `<h3>Hourly Employee New Hire/Change Request</h3> 
    <p><strong>Brand:</strong> ${$w("#dropdownBrand").value}</p>`; 
    if ($w("#dropdownBrand").value == 'Twin Peaks') { 
        emailContent +=`<p><strong>Twin Peaks Store:</strong> ${$w("#dropdownTPStore").value}</p>`; 
    } 
    if ($w("#dropdownBrand").value == 'Bread Zeppelin') { 
        emailContent +=`<p><strong>Bread Zeppelin Store:</strong> ${$w("#dropdownBZStore").value}</p>`; 
    } 
    emailContent += `<p><strong>Manager Name:</strong> ${$w("#managerName").value}</p> 
    <p><strong>Current Date:</strong> ${$w("#currentDate").value}</p> 
    <p><strong>Phone:</strong> ${$w("#phone").value}</p> 
    <p><strong>Employee Name:</strong> ${$w("#employeeName").value}</p> 
    <p><strong>Type of Request:</strong> ${$w("#requestType").value}</p> 
    <p><strong>Date of Orientation or Change:</strong> ${$w("#dateOrientationChange").value}</p> 
    <p><strong>Job Position:</strong> ${$w("#jobPosition").value}</p> 
    `; 
    if (attachmentTABC.length !== 0) { 
        emailContent += `<p><strong>TABC/ABC Certification:</strong> ${$w("#uploadTABC").value}</p>`; 
    } 
    if (attachmentFoodHandler.length !== 0) { 
        emailContent += `<p><strong>Food Handler Certification:</strong> ${$w("#uploadFoodHandlerCert").value}</p>`; 
    } 
    emailContent += `<p><strong>Pay Rate:</strong> ${$w("#payRate").value}</p> 
    <p><strong>Ethnicity:</strong> ${$w("#ethnicity").value}</p> 
    <p><strong>Comments:</strong> ${$w("#comments").value}</p>`*/ 

    // This is what actually works 
    **let**  emailContent  =  `Hourly Employee New Hire/Change Request 
    \r\nBrand:  ${ $w ( "#dropdownBrand" ). value }`; 
    **if**  ( $w ( "#dropdownBrand" ). value  ==  'Twin Peaks' ) { 
        emailContent  += `\r\nTwin Peaks Store:  ${ $w ( "#dropdownTPStore" ). value }`; 
    } 
    **if**  ( $w ( "#dropdownBrand" ). value  ==  'Bread Zeppelin' ) { 
        emailContent  += `\r\nBread Zeppelin Store:  ${ $w ( "#dropdownBZStore" ). value }`; 
    } 
    emailContent  += `\r\nManager Name:  ${ $w ( "#managerName" ). value } 
    \r\nCurrent Date:  ${ $w ( "#currentDate" ). value } 
    \r\nPhone:  ${ $w ( "#phone" ). value } 
    \r\nEmployee Name:  ${ $w ( "#employeeName" ). value } 
    \r\nType of Request:  ${ $w ( "#requestType" ). value } 
    \r\nDate of Orientation or Change:  ${ $w ( "#dateOrientationChange" ). value } 
    \r\nJob Position:  ${ $w ( "#jobPosition" ). value }`; 
    **if**  ( attachmentTABC . length  !==  0 ) { 
        emailContent  +=  `\r\nTABC/ABC Certification:  ${ attachmentTABC [ 0 ]. name }`;  // would like a file path here to insert a link 
    } 
    **if**  ( attachmentFoodHandler . length  !==  0 ) { 
        emailContent  +=  `\r\nFood Handler Certification:  ${ attachmentFoodHandler [ 0 ]. name }`;  // would like a file path here to insert a link 
    } 
    emailContent  +=  `\r\nPay Rate:  ${ $w ( "#payRate" ). value } 
    \r\nEthnicity:  ${ $w ( "#ethnicity" ). value } 
    \r\nComments:  ${ $w ( "#comments" ). value }`; 

    **if**  ( $w ( "#dropdownBrand" ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( "#managerName" ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( "#currentDate" ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( '#phone' ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( '#employeeName' ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( '#requestType' ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( '#dateOrientationChange' ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( '#jobPosition' ). validity . valid  ===  **false** ) 
        **return** ; 
    **if**  ( $w ( '#payRate' ). validity . valid  ===  **false** ) 
        **return** ; 
    
    // How I think I would need to pass the attachments 
    /*sendEmail( 
        toEmail, 
        subject, 
        fromEmail, 
        emailContent, 
        attachmentTABC,  // or however I would need to get the file path 
        attachmentFoodHandler)*/ 

    // What is currently working 
    sendEmail ( 
        toEmail , 
        subject , 
        fromEmail , 
        emailContent ) 
    . then (() => { 
        **let**  dataObj  = { 
            status :  "success" , 
            email :  toEmail 
        }; 
        toEmail  =  "" ; 
        subject  =  "" ; 
        fromEmail  =  "" ; 
        emailContent  =  "" ; 

        
        $w ( "#dropdownBrand" ). resetValidityIndication (); 
        $w ( "#managerName" ). resetValidityIndication (); 
        $w ( "#currentDate" ). resetValidityIndication (); 
        $w ( '#phone' ). resetValidityIndication (); 
        $w ( '#employeeName' ). resetValidityIndication (); 
        $w ( '#requestType' ). resetValidityIndication (); 
        $w ( '#dateOrientationChange' ). resetValidityIndication (); 
        $w ( '#jobPosition' ). resetValidityIndication (); 
        $w ( '#payRate' ). resetValidityIndication (); 
    }) 
    . **catch** (( error ) => { 
        **let**  dataObj  = { 
            status :  "fail" , 
            email :  toEmail 
        }; 
    })

}

CODE-NINJA · August 17, 2021, 10:42pm

1) My form has two file upload fields, and I need to either send the uploaded files as attachments, or include links to the files in the body of the email. I’m not clear on how to get the url of the uploaded file. If I log the value of the upload field to the console, I just get an array with the file name and file size. How do I get the url of the uploaded file(s)?
You will get the URL just after the FILE has been uploaded!

2) Is there a way to format the email? I would really like it to be HTML and not plain text. This isn’t quite as important if I can figure out #1
Yes there are methods how to use HTML-TEXT, depends on which element is used to show the e-Mail.

jennifer76649 · August 18, 2021, 4:26pm

I figured out how to do what I needed to do. I attached these functions to the File Upload buttons and was able to get the file urls that way, and I could then insert the file url(s) into the email body.

export function uploadTABC_change ( event ) {
$w ( “#uploadTABC” ). startUpload ()
. then (( uploadedFile ) => {
uploadFile = uploadedFile . url ;
lastSlash = uploadFile . lastIndexOf ( ‘/’ );
certFile = uploadFile . substring ( lastSlash + 1 );
tabcCert = “https://static.wixstatic.com/media/” + certFile ;
session . setItem ( ‘TABCCert’ , tabcCert );
})
. catch ( err => {
console . log ( err , “Something went wrong” )
})
}

export function uploadFoodHandlerCert_change ( event ) {
$w ( “#uploadFoodHandlerCert” ). startUpload ()
. then (( uploadedFile ) => {
uploadFile = uploadedFile . url ;
lastSlash = uploadFile . lastIndexOf ( ‘/’ );
certFile = uploadFile . substring ( lastSlash + 1 );
foodCert = “https://static.wixstatic.com/media/” + certFile ;
session . setItem ( ‘FoodHandlerCert’ , foodCert );
})
. catch ( err => {
console . log ( err , “Something went wrong” )
})
}

kreativthold · June 30, 2024, 1:52pm

Hi @jennifer76649

Does this mean that your e-mails include a LINK in the e-mail to whatever’s uploaded, instead of an actual attachment?

I think I’ve got control of my backend (maybe), but I’m not super sure about my frontend.

Here’s my own problem, in case you’d feel like sharing some ideas:

/ How to let users add an attachment to a SendGrid form?

Topic		Replies	Views
How to let users add an attachment to a SendGrid form? Ask the community wix-studio , code	2	109	June 29, 2024
email attachment using sendgrid Ask the community code , question	13	943	January 9, 2019
Are there any modern sendGrid examples with PDF files? Ask the community code , wix	3	109	February 29, 2024
Contact form with SendGrid Ask the community code , wix-forms , wix-members-area , question	3	1266	June 9, 2018
¡HELP! SENDGRID (include image link in email when submitting forms) Ask the community code , wix-forms , question	3	284	June 3, 2020

Questions about email from Wix form with Sendgrid

Related topics