Include images & documents in Form Submission Email

heathjones · January 22, 2018, 3:03pm

Site URL: 13threadsgr.com
Page code was implemented: Create

How can i obtain the value of item.artworkUpload? I added the line
console.log ${matches};
and it returns: ,
I’m not sure if i did it right or wrong.
Thanks

josh-flight-director · February 3, 2018, 9:02am

Hey Tal

I am working on a tour registration page that has 4 PDF documents that the user has to upload. Upon submission, the documents should be attached as URLs:

Medial Profile
Liability Waiver
Photo Release Waiver
Wireless Phone Use Waiver

I have gotten 1 document to send as a URL attachment in the notification email, but was wondering how to include more than 1 since we have 4?

Here is a screen shot of my code. Maybe something to do with the “const liabilityURL” etc.?

Here’s the a screen shot of the form:

And finally, the screen shot of the email:

As you can see the 4 URL attachments are the “Medical Profile” but we want the specific documents instead. When you have a moment could you please steer me in the right direction?

Thanks Tal!

FD

_tal · February 4, 2018, 8:26pm

Hi Josh,
How are you?
For each document you should declare a different " matches " variable.

The line described above is incorrect. Basically, you’ve set the " matches " variable only to the Medial Profile document. For each document, you should declare a different “matches” variable.
If it’s unclear, please post the code itself (and not as a picture) and I’ll help you with correcting it.

Have a good day,
Tal.

heathjones · February 5, 2018, 5:20am

So i’m still in need of assistance getting the url to attach to the email. Below is the code i am using a new test page, as well as a screenshot of what the test page looks like and the error that is being thrown when attempting to submit the form. Any assistance will be greatly appreciated.

// sendgrid script
import {sendEmail} 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();
//Instead of “fieldName”, add here the relevant field name to which
//the upload button is connected to.
const matches = item.files.match(convertRegex);
const documentUrl = docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]};
const subject = New Submission;
const body = \rFile: ${documentUrl} \rTHANKS;

sendEmail(subject, body)
.then(response => console.log(response));
}

josh-flight-director · February 5, 2018, 10:51am

Hi Tal,

Thanks for the response! I see what you mean with the match variables, but I am a bit unclear of how/where to declare them (where in the code).

Here’s my code:

// sendgrid script
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

$w.onReady(function () {
$w(“#tourRegistrationDataset”).onAfterSave(sendFormData);
});
// wix:document://v1 → docs.wixstatic.com/ugd

Thanks Tal!

Josh

_tal · February 5, 2018, 7:30pm

Hi Josh,
Here’s what I meant:

function sendFormData() {
 const convertRegex = new RegExp(/wix:document:\/\/v1\/([^\/]+)\/(.*)$/);
 const item =$w("#tourRegistrationDataset").getCurrentItem();
 //Instead of "fieldName", add here the relevant field name to which
 //the upload button is connected to.   
 const matchesMedicalProfile = item.medicalProfile.match(convertRegex); 
 const matchesLiabilityWaiver = item.liabilityWaiver.match(convertRegex);
 const matchesPhotoReleaseWaiver = item.photoReleaseWaiver.match(convertRegex); 
 const matchesWirelessPhoneUse = item.wirelessPhoneUse.match(convertRegex);
 const medicalUrl = `docs.wixstatic.com/ugd/${matchesMedicalProfile[1]}?dn=${matchesMedicalProfile[2]}`;
 const liabilityUrl = `docs.wixstatic.com/ugd/${matchesLiabilityWaiver[1]}?dn=${matchesLiabilityWaiver[2]}`;
 const photoUrl = `docs.wixstatic.com/ugd/${matchesPhotoReleaseWaiver[1]}?dn=${matchesPhotoReleaseWaiver[2]}`;
 const phoneUrl = `docs.wixstatic.com/ugd/${matchesWirelessPhoneUse[1]}?dn=${matchesWirelessPhoneUse[2]}`;
 const subjectAdmin = `New Tour Registration Submission from ${$w("#firstName").value}`;
 const subjectRecipient = `${$w("#firstName").value} Thanks For Registering For Your Next Tour`;
 const bodyRecipient = `Hi ${$w("#firstName").value}`;
}

As for the issue regarding the special signs- I saw this thread with a possible solution.

Good luck,
Tal.

heathjones · February 5, 2018, 7:34pm

Hi Tal, can you provide some insight on the error that I’m receiving, my code is posted above.

josh-flight-director · February 5, 2018, 7:49pm

Hi Tal!

Just wanted to say thanks and show you the result

Thanks as always

Josh

heathjones · February 6, 2018, 1:38am

interesting turn of events, I changed the input type for the upload field from Image to document, and my test upload of a PDF successfully attached the url to the email with no errors. When changing the field type back to image and uploaded a png or jpg i receive the same error: “save operation failed: TypeError: null is not an object (evaluating ‘matchesArtworkUpload[1]’)”. Some assistance would be greatly appreciated.

heathjones · February 6, 2018, 10:06pm

Hi Tal,

I’m still waiting for a response to my issue with attaching the uploaded image url to the SendGrid email. Again, i can successfully attach the url if the uploaded file is a “document” (.pdf, .docx etc) but i consistently receive an error when attempting to upload an image file (.png, .jpeg, etc). Please help!!!

melissa-1 · March 13, 2018, 4:19pm

Hi, I need help with this too. I am trying to get the image urls to be in the submission email. When I use the below code for my email submission everything works except the “Images:” is blank in the email.

import {sendEmail, sendEmailWithRecipient} from ‘backend/petemail’;

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

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

sendEmail(subject, body)
.then(response => console.log(response));
}

When I use the code suggested by Tal my form data is sent to my database but doesn’t send the email. Here is that code.

import {sendEmail, sendEmailWithRecipient} from ‘backend/petemail’;

$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();
//Instead of “fieldName”, add here the relevant field name to which
//the upload button is connected to.
const matches = item.image.match(convertRegex);
const documentUrl = docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]};
const subject = Custom Pet Order for ${$w("#input1").value};
const body = Order Summary for ${$w("#input1").value} \rName: ${$w("#input1").value} \rAddress: ${$w("#input2").value} \rCity: ${$w("#input3").value} \rState: ${$w("#input4").value} \rZip Code: ${$w("#input5").value} \rPhone Number: ${$w("#input6").value} \rEmail: ${$w("#input7").value} \rName of Pets: ${$w("#input8").value} \rEmail: ${$w("#input7").value} \rPortrait Size: ${$w("#dropdown1").value} \rNumber of Subjects to Paint: ${$w("#radioGroup1").value} \rFun Facts: ${$w("#textBox1").value} \rImages: ${documentUrl};
const recipient = $w(“#input7”).value;

sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));

sendEmail(subject, body)
.then(response => console.log(response));
}

What am I missing? Thanks!
Melissa

heathjones · March 13, 2018, 5:20pm

Glad it’s not just me…Hopefully you get an answer.

nctreasure74 · March 23, 2018, 3:15am

I am having the same issue with image files and I’m about 99.999% sure that it is caused by a difference between how a document is seen versus an image. As others have reported, the code that Tal has shared works fine for documents, but it does not work for images.
I would think that lines 2 and 7 from the following code would need edits:


 // wix:document://v1 -> docs.wixstatic.com/ugd 
function sendFormData() { const convertRegex = new RegExp(/wix:document:\/\/v1\/([^\/]+)\/(.*)$/); 
 const item = $w("#dataset1").getCurrentItem(); 
//Instead of "fieldName", add here the relevant field name to which 
 //the upload button is connected to.    
const matches = item.fieldName.match(convertRegex); 
 const documentUrl = `docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]}`; 
const subject = `New Submission by ${$w("#firstName").value}`;

Where the code references “/wix:document:” on line 2, and “docs.wixstatic.com” on line 7, doesn’t this need to be edited to reference an image? Does the RegExp need to be edited? Can anyone provide the necessary edits?

heathjones · March 23, 2018, 3:17am

My thoughts EXACTLY

nctreasure74 · March 27, 2018, 10:25pm

Bump… any edits on how to get this code to work for image files?

heathjones · March 30, 2018, 3:08pm

@Tal any idea on how to get this code working with photos? Still unable to get images to attach.

nctreasure74 · April 1, 2018, 11:52pm

Bump… still haven’t figured out how to edit the code provided to work for images. Any assistance would be greatly appreciated.

heathjones · April 5, 2018, 12:22pm

Has anyone gotten this to work with attaching photo uploads? I can get PDFs to work but not photos and it doesn’t seem like there is much help or information on this use case.

nctreasure74 · April 6, 2018, 12:40am

@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:

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
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.

nctreasure74 · April 6, 2018, 4:06pm

@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!

Topic		Replies	Views
Include images & documents in Form Submission Email Ask the community code , question	15	441	November 13, 2019
¡HELP! SENDGRID (include image link in email when submitting forms) Ask the community code , wix-forms , question	3	303	June 3, 2020
Using sendGrid send multiple files Ask the community code , question	6	226	August 31, 2020
Custom Form - handling attachments Ask the community code , cms , question	8	322	May 8, 2023
Questions about email from Wix form with Sendgrid Ask the community code , wix-stores , wix-forms , question	3	125	June 30, 2024

Include images & documents in Form Submission Email

Related topics