How to submit a form with or without files attached

Ask the community
,
1

Hi guys,

I have completed a form that when submitted will send an email with the information and a link to the document uploaded. The issue starts when the user chooses not to upload a file.

I get the error of “save operation failed: TypeError: Cannot read property ‘match’ of undefined”

What do I need to add to make it so if the user chooses not to add a file to proceed anyway?

Thanking you in advance.

Code as is:

import {
sendEmail
}
from ‘backend/email’;

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

function sendFormData() {
const convertRegex = new RegExp(/wix:document://v1/([^/]+)/(.*)$/);
const item =$w(“#files”).getCurrentItem();
const matches = item.file.match(convertRegex);
const documentUrl = docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]};
const subject = GG Translations: New Submission from: ${$w("#name").value};
const body = Name: ${$w("#name").value} \rEmail: ${$w("#email").value} \rPhonenumber: ${$w("#phonenumber").value} \rMessage: ${$w("#message").value} \rFile: ${documentUrl};

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

}

1 Like
2

Hi,
In order to have the option to save data in both scenarios, you need a bit code. Instead of connecting the use inputs and the upload button to the collection using the editor, you should create an onClick event with the following code:

export async function submit_click(event, $w) {
//creating an object with all the information you would like to save
	const toInsert = {hello: 'world'};
//checking if the user uploaded a file
	if ($w('#uploadButton1').value.length > 0) {
		const file = await $w('#uploadButton1').startUpload();
//adding the file uploaded to the object 
		toInsert.doc = file.url;
	}
//inserting the new object to the collection
	wixData.insert("collectionName", toInsert)
		.then((results) => {
			console.log("inserted");
			let item = results; //see item below
		})
		.catch((err) => {
			let errorMsg = err;
		});
}

I recommend reading the uploadButton and the insert documentations.

Good luck,
Tal.

3

Can I just add/modify a bit the code above to my existing code?

4

The code above is in order to submit the data to the collection. When you use the editor buttons (meaning connecting the upload button to the collection), it doesn’t let you save the record to your collection if you don’t have a file. Note that this function is not related to the other functions written. The other functions are related to sending the email notification and not to saving the information to the collection.

5

Hi Andrea, I met the same issue than you. When user decided to not attach a file, he does not receive a confirmation message whereas when he adds a file, it works… I just want to make the upload button optional in the request form.

Is that possible ?

6

The code above is an example for making the file attached optional (the if statement).

7

What should i add and modify to the code below to have the same result than the code below but with the option to add or not a file attached ?

$w.onReady( function () {
$w(“#dataset1”).onAfterSave(sendFormData);
});
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

function sendFormData() {
const convertRegex = new RegExp(/wix:document://v1/([^/]+)/(.*)$/);
const item = $w(“#dataset1”).getCurrentItem();
const matches = item.fichiers.match(convertRegex);
const fichiersUrl = docs.wixstatic.com/ugd/${matches[1]}?dn=${matches[2]};
const subject = Nouvel envoi de ${$w("#input1").value};
const subject2 = Confirmation;
const body2 = Thank you \Regards const body = Entreprise: ${$w(“#input3”).value}
\rEmail: ${$w(“#input5”).value}
\rEntreprise: ${$w(“#input3”).value}
\rJe suis int éressé(e) par: ${$w(“#dropdown1”).value}
\rPosition: ${$w(“#input6”).value}
\rFile: ${fichiersUrl}
\rMessage: ${$w(“#textBox1”).value}
`;

const recipient = $w(“#input5”).value;

sendEmailWithRecipient(subject2, body2, recipient)
.then(response => console.log(response));

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

8

Hi Tal,

Can i get an answer please ?

Thank you

9

???

10

Can i get an answer please ???

11

Solved thanks

12

@dupouepierre Hi, Buddy same issue I face. Please guide me what you did and your code is working?