Uploading Multiple images

Ask the community
,
1

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.”;
}
}
}

2

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.”;
}
}
}

3

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.

4

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.

5

just wondering if this set of code would work for multiple video file uploads?