Hey folks!
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.
Can you please help me @wix to include this?
Also the sender name to my company name instead of just the email address as this looks messy in peoples inbox "Contact@ayrshiredailynews.co.uk"
Thanks for your help in advance.
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));
}
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)); }
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?
@nctreasure74 I still can't figure out how to only have one of the uploads without the entire thing not sending. Please help!
Hi guys,
I'm following the examples exactly as Tal provided here; however, I'm getting the errors "TypeError: Cannot read property '1' of null" or "TypeError: Cannot read property 'match' of undefined" and don't have a clue how to fix this.
I believe the error is somewhere on these lines:
const convertRegex = new RegExp(/wix:document:\/\/v1\/([^\/]+)\/(.*)$/); const item = $w("#ImagePlaceholder").getCurrentItem(); const matches = item.imageField.match(convertRegex); const documentUrl = `docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]}`;
And probably on this line:
const documentUrl = `docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]}`;
Could anybody help me on this? I would really appreciate your help on this. I have been struggling for months.
Thanks in advance!
hjgr
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);
});
}
Hi, thanks a lot. Please let me know if you could figure it out; I could not :(
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
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));
}
}
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));
}
}
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!
@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));
}
}
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....
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 ;).
@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.
@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!
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!
Cool thanks I will give this a shot and let you know. Thanks for the input!
@heathjones, try this... it's working for me!
function sendEmails() { const item = $w("#dataset1").getCurrentItem(); const wiximageurl = "https://static.wixstatic.com/media/"; let image1local = ""; image1local = item.graphic_file1.replace('image://v1/', ''); image1local = image1local.substr(image1local.lastIndexOf('/')+1); const image1Url = wiximageurl + image1local; let image2local = ""; image2local = item.graphic_file2.replace('image://v1/', ''); image2local = image2local.substr(image2local.lastIndexOf('/')+1); const image2Url = wiximageurl + image2local;
You would then place ${image1Url} wherever you want the link displayed in the text for the body of the email. Note that I have this configured to retrieve the url for 2 separate images. Let me know if this works for you. It may not be the prettiest, or best way to get this, but at least it's working!
@heathjones, I'm still trying to figure this out as well. I've tried umpteen hundred different ways... many trials and errors. Here's what I can tell you:
1. Here is a 'url' as retrieved straight from my database:
image://v1/a0edce_5d557244b7e74f10b1e384740d3b77f9~mv2_d_1855_2292_s_2.png/1855_2292/a0edce_5d557244b7e74f10b1e384740d3b77f9~mv2_d_1855_2292_s_2.png
2. And here is the ACTUAL url that will display the image that was uploaded in a browser window:
https://static.wixstatic.com/media/a0edce_5d557244b7e74f10b1e384740d3b77f9~mv2_d_1855_2292_s_2.png
I've been trying to combine Tal's code with the code found in this thread: https://www.wix.com/code/home/forum/questions-answers/string-url-for-images
(I've bolded a couple of things in the url's listed above that are worth noting when comparing to Tal's code.)
However, I have a severe migraine this evening and I have to get away from this computer screen for the night. Maybe this info can help somebody figure out a solution.