I need to allow customers to upload recipe pictures on a payment form. I have used 4 upload buttons, a text field, and a normal button. Using an event function, and the below code - but still isn't working. The upload button works, the text field doesn't update, and the normal button doesn't upload the image. My coding is pretty limited - so help welcome! Code at present as follows:
export function button_click(event) {
for (var x = 0; x < 6 ; x++){
if($w("#uploadButton"+x).value.length > 0) {
$w("#text67").text = `Uploading ${$w("#uploadButton"+x).value[0].name}`;
$w("#uploadButton"+x).startUpload()
.then( (uploadedFile) => {
$w("#text67").text = "Upload successful";
})
.catch( (uploadError) => {
$w("#text67").text = "File upload error";
console.log(`Error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
});
}
else {
$w("#text67").text = "Please choose a pic to upload.";
}
}
}
Yes, you need to replace button1 with your own button id. Also, the upload buttons must have the ids uploadButton0, uploadButton1, uploadButton2 and so on. wix-data is a library function that helps you to work with the insert method. Should you need further assistance I suggest that you send us your site editor URL and the page name so that we can take a look on our end.
Hi Sam, Thanks so much for helping. I dropped your code in, but it still doesn't work. Can I check if I need to create any extra buttons i.e. when you say I need to import the 'Wix data' field - I can't figure what you mean.
To add multiple images to a collection, you can use the insert method to specify the field and the collection name where the images are to be added. Please see your code with a few modifications below:
import wixData from 'wix-data';//to work with the collection you need to import this field export function button1_click(event) { for (var x = 0; x <= 3; x++) {//for 4 upload buttons the maximum index is 3 if ($w("#uploadButton" + x).value.length > 0) { $w("#text67").text = Uploading ${$w("#uploadButton"+x).value[0].name}; $w("#uploadButton" + x).startUpload() .then((uploadedFile) => { let toInsert = {//myImage is the field key for your images column in the collection "myImage": uploadedFile.url }; wixData.insert("myCollection", toInsert)//myCollection is name of the collection to where the images are added .then((results) => { $w("#text67").text = "Upload successful"; //see item below }) .catch((err) => { let errorMsg = err; }); }) .catch((uploadError) => { $w("#text67").text = "File upload error"; console.log(Error: ${uploadError.errorCode}); console.log(uploadError.errorDescription); }); } else { $w("#text67").text = "Please choose a pic to upload."; } } }