Submit form w image

Ask the community
, ,
1

I have a form which connects to a database; there are six input fields for text and three image upload fields. Each image upload field is connected to a unique field in the database/dataset. If I don’t upload any images the form is working perfectly. If I try to upload one or more images, no records are stored in the database. It seems as the submit button stops working. However, I can see the images in the upload gallery. I haven’t use any customized code for this, only built-in connections. Any help is highly appreciated. Thanks, /Erik

2

Hi,
You can use the upload button as explained here . Afterwards, in order to save the data to your collection, you should create an onClick event for the submitting button, get the image src attribute and use the insert function to insert it to the collection. Lets say that you wish to insert an image and a description to the collection:

export function submitBtn_onClick(event){
	//each attribute is the name of the columns
	let toInsert = {
		image: $w('#imageUploadedId').src,
		description: $w('#description').value		
	};

	wixData.insert('collectionName', toInsert)
		.then(() => {
			console.log('insert successfuly'); 
		})
		.catch((err) => {
			console.log('insert error');
		});

}

Click here to learn more about the insert function.

I hope it’s clear.

Best,
Tal.

3

Thanks a lot. I will try to make it work. One quick question, since I’m new to coding: how do I get the image src attributes? I have three image upload buttons, and a single submit button which should be used to put all three images in the same database. In other words, how do I use #imageUploadedID in your example? Thanks, /Erik

4

Hi Erik,
You should check the images IDs and replace the IDs of my code with the IDs of the elements you’ve added. Click here to learn more about working with the properties panel:

Good luck,
Tal.

5

incomplete instruction and missing code line for wixdata