Hello everyone,
Is there a way to add/code an upload input/button, where the user can add several images, as apposed to only one?
Thank you
Tal
Yisrael has mentioned this in a previous post about the same question…
This is currently under development.
Meanwhile, you can add multiple UploadButton components to your page and then when you click your “Save files” button, have it do startUpload() for all buttons that have a selected file.
You can also look at using media gallery fields in your dataset.
https://support.wix.com/en/article/displaying-media-uploaded-in-your-media-gallery-field-type
In the meanwhile have a read of this previous forum post here and see if this helps you.
https://www.wix.com/corvid/forum/community-discussion/uploading-multiple-images-to-a-collection-as-separate-items
Thank you for your thorough answer.
do you have any suggestion for a middle-way solution? the users in my website that fill up a form might upload one image but also might upload 10 images. I don’t want to add 10 upload button because it will be cumbersome and not UX/UI friendly for users who want to upload one image, but for others it is necessary.
Thank you
Tal
Thank you!
You can also use 1 button, and once the first image is uploaded save it aside etc…
something like:
let images = [];
//........
$w("#button").startUpload()
.then( (uploadedFile) => {
images.push(uploadedFile.url);
})
//and save all the images from the array.
Or even better: If they’re images, you can push them to a gallery one by one, so the users will be able to see what they’re going to save.
Then on click, save all the images from the gallery.
Thanks again
You’re welcome
See an example (for using a single button for loading image after image):
https://jonatandor35.wixsite.com/test/multiupload
1 Like
I gave the multi-upload feature a try and it seems to work perfectly. But how should I modify the code for it to be able to accept multi-upload for videos instead?
this is the current set of code that enables to upload a single video file
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.”;
}
}
I’d be grateful for your kind assistance.
Is that the entire code?
@cheryl currently you can’t select many files at once, but you can let the user upload many files one after the other.
Have a look at my link above.
It’s wonderful page! Very kind.
I try it but, its not work.
please tell me the bad part.
https://risa73.wixsite.com/kenjyukyo02/blank-9
export function uploadButton_change(event, $w) {
if ($w('#galley').items.length > 0) {
if ($w('#gallery').items[0].title === "noImageUploadedImage") {
let items = $w('#gallery').items;
items.splice($w('#gallery').items[0], 1);
$w('#gallery').items = items;
}
}
$w('#gallery').show();
let selectfile = $w('#uploadButton').values;
let selectfilesize = selectfile[0].size;
console.log(selectfilesize);
if (selectfilesize < 150000) {
$w('#uploadStatusText').hide();
$w('#uploadButton').buttonLabel = "uploading...";
$w('#uploadButton').startUpload()
.then((uploadfile)=>{
let uploadfileurl=uploadfile.url;
console.log(uploadfileurl);
let items=$w('#gallery').items;
items.push({
"src":uploadfileurl,
"description":"",
"title":""
});
$w('#gallery').items=items;
$w('#uploadButton').reset();
$w('#uploadButton').buttonlabel="upload more";
if(items.length>10){
$w('#uploadButton').hide();
}else{
$w('#button1').enable();
$w('#dataset1').setFieldValue("image",items);
}
})
.catch((uploadError)=>{
console.log(uploadError);
$w('#uploadButton').reset();
$w('#uploadButton').buttonLabel="upload";
$w('#uploadStatusText').show();
});
}else{
$w('#uploadButton').reset();
$w('#uploadStatusText').text="Max file sise:15mb";
$w('#uploadStatusText').show();
}
}
export function submitButton_click(event){
let nrOfImages =$w('#gallery1').items.length;
if(nrOfImages>0){
$w('#dataset1').save()
.then((saved)=>{
console.log(saved);
})
}else{
$w('#uploadStatusText').text="appuro-doshitene"
}
}
Hi guys! I just want you guys to know that https://jonatandor35.wixsite.com/test/multiupload 's code worked fabulously! I really appreciated your help, J.D… That being said, the images uploaded into the gallery only shows up when the user is uploading, which disappears if the user reloads the page :(. Any fixes to this issue?
You’ll have to run a query on page load, retrieve the images and push them to the gallery.
//in the $w.onReady:
wixData.query(Pictures)
.eq("userId", userId)
.limit(100)
.distinct("image")
.then(r => {
let items = r.items.map(e => ({src: e}));
$w("#gallery1").items = items;
})
and make sure not to insert the existing images again when you save the new ones.
1 Like
Wow! Thank you so much for your fast response! I really appreciate it. I will try it out.
I incorporated this portion of the code, but it is still not working. The gallery presenting the image mysteriously disappears after the image is saved. I checked back further up in the code and removed the command that collapses the gallery. Still no luck. In my other pages, however, I included a form that receives user inputs and presents it in a repeater down below. Is it okay to mix-match the two? (Here is the video I watched: https://www.youtube.com/watch?v=FVARVy3YS74 ).
Because I deliberately emptied the gallery after saving.
This line of code empties the gallery:
$w("#gallery1").items = [];
You should adjust the code to your specific needs.
1 Like