My next question would be how to implement an html href tag so that my users only see "View Image" as a hyperlink in the email instead of that long link that shows now! But again, at least it's working, so I'm happy about that!

@nctreasure74 THANKS! your code revision works flawlessly for me. Would be nice if instead of a link the image was embedded as a thumbnail. BUT i'm not going to complain nor push it I'm just happy i can finally enable this feature on my site......MANY THANKS!

@heathjones, I'm glad it's working fro you! I actually ran into a snag with it. The image upload is not required on my site. When an image IS uploaded, that code is working great. However, when there is no image uploaded, my emails aren't being sent. Still trying to work through that bug on my end.

Yeah now that you mention it I’m in the same boat as you. Photo uploads aren’t required on my site either and non photo contact form submissions aren’t sending. Looks like I’ll have to comment that out for now until a resolution is discovered. I’ll try to figure it out and let you know but I doubt that I will ;).

I've commented it all out for now as well. Still trying to figure it out. Sure would be nice if someone more experienced would lend a hand here....

@nctreasure74....I think i figured it out. See my code below. I added a try/catch block around my code to add some error handling for running the code with no uploaded file. if an error was seen then the catch portion would allow me to add code to be executed in that scenario (which is to send the email without the uploaded file. It's not pretty and i should definitely work call out the error explicitly to avoid any rogue errors from passing but sometimes the quick and dirty is all you need. Hope this helps........

try{

const item = $w("#dataset1").getCurrentItem();

const wiximageurl = "https://static.wixstatic.com/media/";

let imagelocal = "";

imagelocal = item.artworkUpload.replace('image://v1/', '');

imagelocal = imagelocal.substr(imagelocal.lastIndexOf('/')+1);

const imageUrl = wiximageurl + imagelocal;

const subject = `New Submission from ${$w("#input1").value}`;

const body = `Name: ${$w("#input1").value}

\rPhone Number: ${$w("#input2").value}

\rEmail: ${$w("#input3").value}

\rDesired Completion Date: ${$w("#datePicker1").value}

\rMessage: ${$w("#textBox1").value}

\rArtwork: ${imageUrl}`;

sendEmail(subject, body)

.then(response => console.log(response));

}catch(e){

const subject = `New Submission from ${$w("#input1").value}`;

const body = `Name: ${$w("#input1").value}

\rPhone Number: ${$w("#input2").value}

\rEmail: ${$w("#input3").value}

\rDesired Completion Date: ${$w("#datePicker1").value}

\rMessage: ${$w("#textBox1").value}`;

sendEmail(subject, body)

.then(response => console.log(response));

}

}

Please take a look at my code here. I am no stranger to javascript but I am newer to the wix setup.

Ideally, I was hoping to add an uploaded file (picture) as an attachment in my submission confirmation email. But at the moment I am simply trying to see the file URL. When the code in picture1 runs, the emails do not send. Yet when line 21 is commented out and line 36 removed, the emails do send, shown in picture2.

Please help me trouble shoot this problem, feels like I've tried everything.

picture1

picture2

Thanks!

Hi @carrierteam,

I'm not sure if you seen my code that i posted in this thread but I was having a similar issue combining @nctreasure74's code with some of my own I was able to get the uploaded image's url to attach to my submission email as well as sending the email if the user uploaded a photo or not. Take a look at my code below and see if this will work for you. It's not pretty and could use more error handling but it works flawlessly so far. Good luck.

// sendgrid script

import {sendEmail} from 'backend/email';

$w.onReady(function () {

$w("#dataset1").onAfterSave(sendFormData);

});

function sendFormData() {

try{

const item = $w("#dataset1").getCurrentItem();

const wiximageurl = "https://static.wixstatic.com/media/";

let imagelocal = "";

imagelocal = item.artworkUpload.replace('image://v1/', '');

imagelocal = imagelocal.substr(imagelocal.lastIndexOf('/')+1);

const imageUrl = wiximageurl + imagelocal;

const subject = `New Submission from ${$w("#input1").value}`;

const body = `Name: ${$w("#input1").value}

\rPhone Number: ${$w("#input2").value}

\rEmail: ${$w("#input3").value}

\rDesired Completion Date: ${$w("#datePicker1").value}

\rMessage: ${$w("#textBox1").value}

\rArtwork: ${imageUrl}`;

sendEmail(subject, body)

.then(response => console.log(response));

}catch(e){

const subject = `New Submission from ${$w("#input1").value}`;

const body = `Name: ${$w("#input1").value}

\rPhone Number: ${$w("#input2").value}

\rEmail: ${$w("#input3").value}

\rDesired Completion Date: ${$w("#datePicker1").value}

\rMessage: ${$w("#textBox1").value}`;

sendEmail(subject, body)

.then(response => console.log(response));

}

}

Hello @heathjones,

Thanks so much for the code. I adapted it to my form which includes 5 photo uploads. It works!

But the issue I am having is that when a user uploads less than all 5 photos, the email sends without any of the links. In otherwords, for the links to appear on the email, all 5 photos need to be uploaded. Is there any way to modify the code, so that the email comes with the links of however many photos are uploaded by the user. Any ideas? Thanks in advance.

Here is my code:

import {sendEmail} from 'backend/email';

$w.onReady(function () {

$w("#dataset1").onAfterSave(sendFormData);

});

function sendFormData() {

try{

const item = $w("#dataset1").getCurrentItem();

const wiximageurl = "https://static.wixstatic.com/media/";

let image1local = "";

image1local = item.fotoA.replace('image://v1/', '');

image1local = image1local.substr(image1local.lastIndexOf('/')+1);

const image1Url = wiximageurl + image1local;

let image2local = "";

image2local = item.fotoB.replace('image://v1/', '');

image2local = image2local.substr(image2local.lastIndexOf('/')+1);

const image2Url = wiximageurl + image2local;

let image3local = "";

image3local = item.fotoC.replace('image://v1/', '');

image3local = image3local.substr(image3local.lastIndexOf('/')+1);

const image3Url = wiximageurl + image3local;

let image4local = "";

image4local = item.fotoD.replace('image://v1/', '');

image4local = image4local.substr(image4local.lastIndexOf('/')+1);

const image4Url = wiximageurl + image4local;

let image5local = "";

image5local = item.fotoE.replace('image://v1/', '');

image5local = image5local.substr(image5local.lastIndexOf('/')+1);

const image5Url = wiximageurl + image5local;

const subject = `New Submission from ${$w("#input1").value}`;

const body = `Type Here: ${$w("#input1").value}

\rName: ${$w("#input1").value}

\rLastName: ${$w("#input2").value}

\rAge: ${$w("#input3").value}

\rCity: ${$w("#input11").value}

\rTel: ${$w("#input5").value}

\rEmail: ${$w("#input6").value}

\rIllnesses: ${$w("#input7").value}

\rAllergies: ${$w("#input8").value}

\rMedications: ${$w("#input9").value}

\rHairTreatments: ${$w("#input10").value}

\rMessage: ${$w("#textBox1").value}

\rFotoA: ${image1Url}

\rFotoB: ${image2Url}

\rFotoC: ${image3Url}

\rFotoD: ${image4Url}

\rFotoE: ${image5Url}`;

sendEmail(subject, body)

.then(response => console.log(response));

}catch(e){

const subject = `New Submission from ${$w("#input1").value}`;

const body = `Type Here: ${$w("#input1").value}

\rName: ${$w("#input1").value}

\rLastName: ${$w("#input2").value}

\rAge: ${$w("#input3").value}

\rCity: ${$w("#input11").value}

\rTel: ${$w("#input5").value}

\rEmail: ${$w("#input6").value}

\rIllnesses: ${$w("#input7").value}

\rAllergies: ${$w("#input8").value}

\rMedications: ${$w("#input9").value}

\rHairTreatments: ${$w("#input10").value}

\rMessage: ${$w("#textBox1").value}`;

sendEmail(subject, body)

.then(response => console.log(response));

}

}

Hmmm, you will need to add conditional logic to the code (if then else) I’m totally guessing here but I would try adding lines setting the imageURLs to some value ex. “none” if no upload url is present. Not 100% sure how to execute it but that’s where I would start. I will play around with the code to see if I can figure it out and post my findings. Hope his helps

Hi, thanks a lot. Please let me know if you could figure it out; I could not :(

For uploading images using an upload button, I modified @Tal's answer:

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

$w.onReady(function () {

$w("#dataset2").onAfterSave(sendFormData);

});

function sendFormData() {

console.log("sending email with image attached");

const convertRegex = new RegExp(/image:\/\/v1\/([^\/]+)\/(.*)$/);

const item = $w("#dataset2").getCurrentItem();

//Instead of "fieldName", add here the relevant field name to which

//the upload button is connected to.

const matches = item.govtId.match(convertRegex);

const documentUrl = `https://static.wixstatic.com/media/${matches[1]}?dn=${matches[2]}`;

const subject = `Government ID Upload`;

const body = `Government ID Image has been uploaded.

\r\rDownload the image here: ${documentUrl}`;

const recipient = "name@email.com";

sendEmailWithRecipient(subject, body, recipient)

.then(response => {

$w('#text1').text = "Your content has been submitted";

console.log(response);

});

}

@nctreasure74 I still can't figure out how to only have one of the uploads without the entire thing not sending. Please help!

Hello All, I follow the code from @tal and got the following error. I want to attached the pdf file to the notification email. By the way,

docs.wixstatic.com is just an example right? How can I get the right url for my files which are stored in database?

I have the issue of getting an error message of "Cannot read property 'match' of undefined" but I follow the code from Tal, is there anyone can help let me know where should I amend for getting the uploaded document URL in the email notification?

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

$w.onReady(function () {
  $w("#dataset1").onAfterSave(sendFormData);
});

// wix:document://v1 -> docs.wixstatic.com/ugd
function sendFormData() {
const convertRegex = new RegExp(/wix:document:\/\/v1\/([^\/]+)\/(.*)$/);
const item = $w("#dataset1").getCurrentItem();
const matches = item.CV.match(convertRegex);
const documentUrl = `docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]}`;
const subject = `Job Application: Successful Submission for ${$w("#input1").value} ${$w("#input2").value}`;
 const body = `Job Applicant: ${$w("#input1").value}
    \rFirst: ${$w("#input1").value}
    \rLast: ${$w("#input2").value}
    \rEmail: ${$w("#input4").value}
    \rPhone: ${$w("#input5").value}
    \rJob ID: ${$w("#input6").value}
    \rCV: ${documentUrl}`;
 const recipient = "kathywong98@gmail.com";
  
 sendEmailWithRecipient(subject, body, recipient)
    .then(response => console.log(response)); 
 
 sendEmail(subject, body)
  .then(response => console.log(response));
}

Adapt the following code to my form that includes 11 photo uploads and is sent to my email. It works!

But the problem I have is that when a user uploads less than 11 photos, the email is not sent. In other words, for the email to be sent, all 11 photos must be uploaded. Is there any way to modify the code so that the email is sent with the links of all the photos that the user wants?

Any ideas? I would be very grateful if you could help me.

//sendgrid script

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

//send form data

$w.onReady(function () {

$w("#dataset2").onAfterSave(sendFormData);

});

function sendFormData() {

}

export function text68_viewportEnter(event) {

const item = $w("#dataset2").getCurrentItem();

const wiximageurl = "https://static.wixstatic.com/media/";

// RECOVER UPLOADED IMAGE URL 1

let image1local = "";

image1local = item.payStub1.replace('image://v1/', '');

image1local = image1local.substr(image1local.lastIndexOf('/')+1);

const image1Url = wiximageurl + image1local;

// RECOVER UPLOADED IMAGE URL 2

let image2local = "";

image2local = item.payStub2.replace('image://v1/', '');

image2local = image2local.substr(image2local.lastIndexOf('/')+1);

const image2Url = wiximageurl + image2local;

// RECOVER UPLOADED IMAGE URL 3

let image3local = "";

image3local = item.payStub3.replace('image://v1/', '');

image3local = image3local.substr(image3local.lastIndexOf('/')+1);

const image3Url = wiximageurl + image3local;

// RECOVER UPLOADED IMAGE URL 4

let image4local = "";

image4local = item.payStub4.replace('image://v1/', '');

image4local = image4local.substr(image4local.lastIndexOf('/')+1);

const image4Url = wiximageurl + image4local;

// RECOVER UPLOADED IMAGE URL 5

let image5local = "";

image5local = item.payStub5.replace('image://v1/', '');

image5local = image5local.substr(image5local.lastIndexOf('/')+1);

const image5Url = wiximageurl + image5local;

// RECOVER UPLOADED IMAGE URL 6

let image6local = "";

image6local = item.payStub6.replace('image://v1/', '');

image6local = image6local.substr(image6local.lastIndexOf('/')+1);

const image6Url = wiximageurl + image6local;

// RECOVER UPLOADED IMAGE URL 7

let image7local = "";

image7local = item.payStub7.replace('image://v1/', '');

image7local = image7local.substr(image7local.lastIndexOf('/')+1);

const image7Url = wiximageurl + image7local;

// RECOVER UPLOADED IMAGE URL 8

let image8local = "";

image8local = item.payStub8.replace('image://v1/', '');

image8local = image8local.substr(image8local.lastIndexOf('/')+1);

const image8Url = wiximageurl + image8local;

// RECOVER UPLOADED IMAGE URL 9

let image9local = "";

image9local = item.payStub9.replace('image://v1/', '');

image9local = image9local.substr(image9local.lastIndexOf('/')+1);

const image9Url = wiximageurl + image9local;

// RECOVER UPLOADED IMAGE URL 10

let image10local = "";

image10local = item.payStub10.replace('image://v1/', '');

image10local = image10local.substr(image10local.lastIndexOf('/')+1);

const image10Url = wiximageurl + image10local;

//// RECOVER UPLOADED IMAGE URL ID

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}

//UPLOAD DOCUMENTATION

\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}

// UPLOAD ID

\rID : ${imageIDUrl}

`;

sendEmail(subject, body)

.then(response => console.log(response));

}