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.
You wish to add an external image, meaning that you already have the image URL. In this case, you can simply use a regular HTML tag and add the URL to the src attribute. Click here for for further explanation about using HTML tags when sending an Email on form submission.
You wish to use a document uploaded to the media manager by the upload button .
Lets say that you have a site and you wish to both save all the data submitted to the form in a DB collection and send an Email notification with the information.
Firstly, you should connect all the user inputs to the DB collection including the uploading button to the relevant field.
Afterwards, you should convert the Wix media manager URL to a regular URL before sending the Email:
// sendgrid script
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();
//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}`;
const body = `Name: ${$w("#firstName").value}
\rEmail: ${$w("#emailInput").value}
\rfname: ${$w("#firstName").value}
\rlname: ${$w("#lastName").value}
\rFile: ${documentUrl}`;
const recipient = "wix-user@gmail.com";
sendEmailWithRecipient(subject, body, recipient)
.then(response => console.log(response));
}
I’ve change my code as you said, but it got error after I submit the form.
It shows: save operation failed: TypeError: Cannot read property ‘Files’ of undefined
Could you please check for me?
Here is my code
// wix:document://v1 → docs.wixstatic.com/ugd
function sendFormData(item) {
const convertRegex = new RegExp(/wix:document://v1/([^/]+)/(.*)$/);
//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 = Quote Request From ${$w("#input1").value};
const body = Full Name: ${$w("#input1").value} \rPhone Number: ${$w("#input2").value} \rEmail: ${$w("#input3").value} \rPrefer Currency: ${$w("#dropdown1").value} \rFile Category: ${$w("#dropdown2").value} \rFile: ${documentUrl} \rTranslate from: ${$w("#dropdown3").value} \rTranslate to: ${$w("#dropdown4").value} \rDeadline: ${$w("#datePicker1").value} \rComments: ${$w("#textBox1").value};
Hi,
I’m truly sorry, there was a bug with my code. I’ve corrected it (the previous post with my explanation was edited ) . I’ve tested it on my end and it works. You should add the line in bold to the code
const item =$w("#dataset1").getCurrentItem();
Note that the prototype of the function was changed to function sendFormData( ) ( a function that doesn’t receive any variables). Moreover, the field name should be the same as the field key you’ve set in the database. Be aware that it sends the document URL and not the document as an attachment.
I’m resourceful but not too computer savy. Can anyone please help direct me to figure out a simple code for users to upload their own images for a price quote?
I am receiving a message in my email that the uploaded file is: undefined. below is the code for my page containing the form. Any assistance would be greatly appreciated.
// sendgrid script
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;
//import {sendEmail} from ‘backend/email’;
$w.onReady(function () {
$w(“#dataset1”).onAfterSave(sendFormData);
});
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.artworkUpload.match(convertRegex);
const documentUrl = docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]};
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: ${documentUrl};
Hi Tal, yes I have created the required .js and .jsw files in the backend as instructed including the sendGrid API key I generated when establishing my sendGrid account. My issue isn’t that I can’t send an email on form submission, that part works as expected, my issue is that the email doesn’t contain the uploaded photo from the form submission. The email contains the label I specified but instead of the uploaded file being attached the email contains the words “undefined” in its place (See below). Any thoughts or help that can be provided would be greatly appreciated. Thanks
Okay I will do that shortly, just for further clarification on this, I attempted to upload different photos (.png, .jpg) none of my tests were successful in attaching the photo to the email.
In the developer console I am seeing this error when submitting the form with code referenced above: “save operation failed: TypeError: null is not an object (evaluating ‘matched[1]’)”
Hi heathjones ,
Please send us the site URL and the page to which the code was added. Moreover, please send us the
value of item.artworkUpload just before you call the .match( ) on it.
