I am using Wix code. I want to upload multiple images using single upload button. Is there any way that can help me? I will appreciate your answers.
Thanks.
12 Likes
Hi there, here is the solution that we built for one of our clients:
let workImages = [];
export async function uploadWork_change(event) {
let greenFlag = false;
let file = $w('#uploadWork').value;
if(file.length > 0){
let response = await $w('#uploadWork').startUpload($w('#uploadWork').buttonLabel = 'Uploading ...');
greenFlag = response;
if(greenFlag){
workImages.push(response.url);
greenFlag = false;
console.log(workImages, file[0].name);
$w('#uploadWork').buttonLabel = 'Add another picture'
$w('#uploadedTxt').expand();
$w('#uploadedTxt').text = `Done, Uploaded ${file[0].name}`;
}
}
}
Thank you so much Dev. Highly appreciated your answer. Thanks once again.
Hi, glad to hear that best wishes!
@rashidsengg In case that you are wondering the final result, this is what we did:
Then all the images are posted to the database in a gallery field, for that you have to also prepare the right format which is an array and inside the array each picture is a JavaScript object or as we call it in Python a dictionary.
Amazing!!! was looking for a solution been months… could you xplain the code please? im very beginner with code.
I have this buttom #uploadbuttom1 that i want to upload many images to a gallery field
Is this the only set of code that is needed on the page that I am creating for multiple file uploads?
I currently have a page with 1 upload button and one normal button to start upload with this set of code.
export function button2_click(event) {
if ($w(“#uploadButton1”).value.length > 0) {
$w(“#text24”).text = Uploading ${$w("#uploadButton1").value[0].name};
$w(“#uploadButton1”).startUpload()
.then((uploadedFile) => {
$w(“#text24”).text = “Upload successful”;
})
.catch((uploadError) => {
$w(“#text24”).text = “File upload error”;
console.log(Error: ${uploadError.errorCode});
console.log(uploadError.errorDescription);
});
}
else {
$w(“#text24”).text = “Please choose a file to upload.”;
}
}
where in the current set of code should i make the insertion to enable the multi-file upload?
Can you explain alittle more about what you did? did you do this on a wix contact form? or a custom input form?
once the data has been uploaded into the array how do you save it to the database? my formatting is off?
Also how did you get the pictures to work like that?
I am using a custom input form.
let workImages = [];
export async function uploadButton1_change(event) {
let greenFlag = false;
let file = $w('#uploadWork').value;
if (file.length > 0) {
let response = await $w('#uploadWork').startUpload($w('#uploadWork').buttonLabel = 'Uploading ...');
greenFlag = response;
if (greenFlag) {
workImages.push(response.url);
greenFlag = false;
console.log(workImages, file[0].name);
$w('#uploadWork').buttonLabel = 'Add another picture'
$w('#text1').expand();
$w('#text1').text = `Done, Uploaded ${file[0].name}`;
}
}
}
export function button1_click(event) {
let toSave = {
"title": $w('#input1').value,
"newField": workImages
};
wixData.save("garagedoors", toSave)
.then((results) => {
let item = results; //see item below
console.log(results)
})
.catch((err) => {
let errorMsg = err;
console.log(err)
});
}
@tristinwhite Hi there, the format to save the set of pictures is an array and inside the array you push javascript objects composed of 2 key - value pairs:
{
src: this is the wix url where 1 single picture has be uploaded,
type: ‘image’
}
so is src and type, src is the url sent through the promise after you upload the picture to the Wix server
and type is a constant string ‘image’ that is required by any Wix gallery in order to read and display the picture whether is in your database displayer or a frontend (user interface) displayer
So you must create this data structure: [{picture 1}, {picture 2}, {picture… n }]
This datastructure can be posted to the database, in the database your field should be gallery just so you can see in there the pictures
REMEMBER to insert is simple it creates a new place in the database BUT
TO UPDATE A DATABASE you must query the database take the result with the item that you want to update MODIFY THE item and then UPDATE the database with the modified item.
If you try anything different your database item will be deleted and substituted with only the data that you are updating if you are not updating your entire item then the rest of the data doesn’t exist and thus in the database is not going to exist either.
An easy way to figure out formats for example gallery format is to create a field in the database of type gallery add some pictures then query the DB get the response and console.log your response this will show you the format of a gallery, the gallery contains always a src and a type key value pair.
How to get the pictures to work like that? simple once you query back the database and pull the gallery field you can assign it to a gallery
that is something like $w(’ #mygallery ').items = DATABASE QUERY with the gallery field
ONE TIP USE chrome dev tools to console.log your response live
and if you work with backend use site monitoring tool inside the wix dashboard to console.log directly from the backend.
Thanks @asanchez92195 I am good with everything you’ve said example how i get the array into an object to post to the database. at the moment i will have an array with entries inside. So i will have;
Array(1)
0:"image://v1/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg/183_275/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg"
1:"image://v1/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg/183_275/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg"
How do i formate it so its like this:
[
{ "image":"image://v1/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg/183_275/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg",
"type":"image"
},
{ "image":"image://v1/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg/183_275/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg",
"type": "image"
}
]
is there some form of formatter or something i need to use or something on the end of workImages? or even something like Object.assign etc. please help., really struggling
@tristinwhite Hi, you are using “image” as part of the key for the uploaded picture, this is wrong, you must use src so is:
[
{ "src":"image://v1/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg/183_275/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg",
"type":"image"
},
{ "src":"image://v1/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg/183_275/fbcf00_a3e34c5337e24087b104d698ecc1135b~mv2.jpeg",
"type": "image"
}
]
Your code must create a data structure where the keys are src that way when the gallery pull back the data from the database can recognize what URLs
To format it simply create an empty object, then each time your upload field uploads a picture RETURNS back an answer inside the answer, with developer tools you can find the picture src.
Take your empty object and add in it the src and the type keys something like:
let myObject = {};
myOBject.src = "the urls returned by the upload field",
myObject.type = "image"
on you do this object on your empty array variable push the object so is like:
let myArray = [];
myArray.push(myObject);
With this you are ready, keep in mind no loops are needed because each time a user clicks on the upload button runs a block of code, SO your loop is your user on click event, hope that makes sense.
@asanchez92195 Thank you very much. Its working now.
@tristinwhite Glad to hear 