UPLOADING MULTIPLE IMAGES TO A COLLECTION AS SEPARATE ITEMS

Discussion Ask a question
,
1

hi,
i’m looking for a way to upload multiple images to a collection as separate items.
i could use a few upload buttons but is there a way to submit all using one submit button?
thanks

2 Likes
2

You can loop maybe. If you have five upload elements called upload1, upload2, upload3, upload4 and upload5 you can kick start the uploading process for them all I guess from one button.

// Code that loops through five upload buttons
export function button1_click(event) {
 for (var x = 0; x < 6 ; x++){
 if($w("#uploadButton"+x).value.length > 0) {
 $w("#text1").text = `Uploading ${$w("#uploadButton"+x).value[0].name}`;
 $w("#uploadButton"+x).startUpload()
      .then( (uploadedFile) => {
 $w("#text1").text = "Upload successful";
 $w("#image1").src = uploadedFile.url;
      })
      .catch( (uploadError) => {
 $w("#text1").text = "File upload error";
 console.log(`Error: ${uploadError.errorCode}`);
 console.log(uploadError.errorDescription);
      });
  } 
 else {
 $w("#text1").text = "Please choose a file to upload.";
  }
}
}
1 Like
3

hi thanks for that.

i managed to do it.

import wixData from 'wix-data';

export function submitbutton_click(event, $w) {
	$w("#uploadButton").startUpload($w("#uploadButton").buttonLabel = "Uploading")
		.then((uploadedFile) => {
			//$w("#uploadButton").buttonLabel = "Finished";
			let toInsert = {
				"pic2": uploadedFile.url,
				"title": "TITLE"
			};

			wixData.insert("images", toInsert)
				.then((results) => {
					let item = results; //see item below
				})
				.catch((err) => {
					let errorMsg = err;
				});
		});
$w("#uploadButton1").startUpload($w("#uploadButton1").buttonLabel = "Uploading")
		.then((uploadedFile) => {
			//$w("#uploadButton").buttonLabel = "Finished";
			let toInsert = {
				"pic2": uploadedFile.url,
				"title": "TITLE"
			};

			wixData.insert("images", toInsert)
				.then((results) => {
					let item = results; //see item below
				})
				.catch((err) => {
					let errorMsg = err;
				});
		});
}
1 Like
4

Hello! I am new to coding… I can create a form that connects to a database and send notification emails through sendGrid. I have a client that needs to upload multiple images with one button click. If I copy the code above and paste it into the coding section, will that work within the form that I create? Do I put one button and connect it to the code above? If you could give some direction, it would be much appreciated! Thanks.

1 Like
5

Hi, I am new to coding so can you tell me how to get this work on Wix prebuilt forums feature?