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 ;).
@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........
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.
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.
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.
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
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.
This line of coding works great, however go into your debug menu and open the tabs resulting from your form. You should see a variable with 'image://' in it. That is what you want your FieldName to be. In this example its fotoA.
ย
As you can see below I identified that my variable was 'upload' and replaces it so that image1local
ย
As you can see above I identified that my variable was 'upload' and replaces it so that image1local looked like
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?
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';
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);
});
}
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
Hi hjgr,
ย
I was having the same issue as everybody else but I ended up going into my debugging menu and attempting to find the issue.
ย
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
ย
This line of coding works great, however go into your debug menu and open the tabs resulting from your form. You should see a variable with 'image://' in it. That is what you want your FieldName to be. In this example its fotoA.
ย
As you can see below I identified that my variable was 'upload' and replaces it so that image1local
ย
As you can see above I identified that my variable was 'upload' and replaces it so that image1local looked like
ย
image1local = item.upload.replace('image://v1/', '');
ย
I had originally thought it was imageUpload as that was the database column name but I later found out it was not true and it was simply upload.
ย
Hope this helps!
@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?
ย
ย
ย
ย
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));
}