How To Send Email Attachment From Your Wix Website Using Wix Velo & SendGrid NPM – Wix Code Tutorial

hey guys in this video i’m going to show you how you can send an email using sendgrid and wix fellow along with some custom javascript and also i’m going to show you how you can set the email subject the recipient for the email the body of the email and also how you can attach a file and name that file uh which will be sent along with your email so first of all in order to build a basic form like this all you need to do okay first of all if
you don’t have dave mode uh installed uh activated you won’t be able to see the code panel so just head over to dave mode over here and click on turn on dave mode once you do that click on add on the left hand side and under input you can make a selection of the input elements you want for example i want the user to be able to type in an email so i’ll select the text input element and under settings i’ll set the type to email i’m not going to go
over the verification of how you can verify if the email is valid or not using regex perhaps in a later video but on this video i’m just going to show you how you can send the email and yeah like this and going ahead if you want a rich text input element which will allow the user to format their text using bold italics underline and other sorts of formatting you can insert the rich text input element on the page and then lastly there is the
upload button which the user can use to upload or select a file which will be sent as an attachment with the email and under settings you can change the supported file format to document or image i’m not gonna go over how video and audio will be sent this video it’s just gonna be showing you how you can send an image or document once you have everything set up it’s gonna look like this so you have your email subject body the file name which will
be sent and the file which has to be selected from the user’s device and then a button which will upload and send the email okay so let’s get down to it first of all you need to create two files on your backend so click on the code icon over here select this plus icon and then click on new folder name your folder attachment like i’ve shown in the screen over here and then under this folder click the three dots and create a new js file new js file
and name it send grid and once you’ve done that create a jsw a new web module and call it process under process we will be using uh the get file url function to get the public url of the file that has been uploaded by the user on the front end and the send email button just acts as a bridge between the js file and the front end because you cannot call functions from a js file directly from the front end that’s the reason we need to use a bridge
and under the sendgrid.js file uh you have wix fetch which you will import and then you also need to import a sgmail function from the send grid mail npm so in order to do that under npm click on the plus sign install package from npm and then search for adsense grid slash mail and then once you find it click on install as you can see in this video that i’ve already installed it so i don’t need to install it again and uh on the top you set your
api key now this api key must come from your sendgrid account if you don’t know how to create a signed grid account or create a send grid api key there’s tons of tutorials out there and a simple google search like how to create a send grid api key or how to create a single account will do you just well do that and then we just code the function to actually generate the buffer from the public url encode it in a base64 format and then this will be
the function which actually sends the email along with the file attachment so it receives the email which is the receiver email the subject the body the file name and the file type from the front end and then it makes a call to sendgrid via the npm to send your email you can change the from value over here so this will be the sender name and between these two marks will be the sender email very important to put this and verify this on your same
grid account as well and then the subject body attachment since we’re only sending one attachment the content which is encoded in base64 the file name and a file type which comes from the front-end and that’s it and of course you can send multiple emails sorry multiple attachments as you can see that the attachments property is actually an array of objects so feel free to explore into that if you want but for now this is it if you copy the code
as it’s written on on the screen you’re gonna be just fine so let’s go ahead and actually send an email with the image attachment so i’m gonna send it to hello at dude lemon which is our domain dot com subject is test image attach meant let’s write the body i josh hope you are well wix willow regards sean i’m going to name my file so i have the ability to name the attachment which i’m going to name a meme image let’s select the file now so let’s
go ahead and select this batman oh sorry that’s a gif let’s select a jpg or png okay let’s select this dog head and then let’s click on upload and send now as you can see since the upload button has been disabled the file has been uploaded and it’s waiting for the call from the backend and as you can see the undefined uh has been printed in the console log which means the call has been made to send grids npm and let’s go ahead and refresh okay
there you are so as you can see so don’t worry about the be careful with this message it’s just because we have a g suite account and uh we have not verified the email address that is sending although the email says it’s dude lemon.com it’s not able to validate it’s actually been signed by simrid.net so that’s the only reason for the uh flag but anyways the content hi george hope you are well expelo regard sean everything is good and you can see
the dog image over here and it is in pnj as we uploaded and seems pretty high quality so the quality has been preserved as well good to know that so this is how you can send an email attachment using sendgrid and wix below along with a few line of custom javascript code now if you want the user to be able to send only documents you can just change the supported type to documents and you are good to go hope this helps and take care have a nice day
see you in the next video