Upload more files(eg: images) with a single upload button

Ask the community
,
1

Currently we can only upload a single file with one upload button. But if the site visitors need to upload 2 or many files (eg:images), we need to provide 2 or more upload buttons which doesn’t seem professional. So is there a simple and elegant way to select multiple files from user’s computer and then upload these files by clicking just one upload button one time.Thanks.

8 Likes
2

Hi,
Unfortunately, this is not available yet.

Feel free to add a feature request for this here:
https://www.wix.com/code/home/forum/feature-requests

Thanks!
Liran.

3

Currently we can only upload a single file with one upload button. But if the site visitors need to upload 2 or many files (eg:images), we need to provide 2 or more upload buttons which doesn’t seem professional. So is there a simple and elegant way to select multiple files from user’s computer and then upload these files by clicking just one upload button one time.Thanks.

4

why don’t ye just overlay the upload buttons on top of each other then collapse the first button when the first image is chosen by the user, it will have the same appearance as having one upload button. PS wix feature requests are an embarrassment, you’d get a more effective solution pissing against the wind.

Something like this…

$w.onReady( function () {

//upload button “show text on load” = NO

        $w("#imageUploadButton1").onChange( **function**  () {

if ($w(“#imageUploadButton1”).value.length > 0) {

                $w("#imageUploadButton1").collapse(); 
            } 

            $w('#submitButton1').onClick( **function**  () { 

                console.log('i am slow, give me a few more seconds to fetch the image URL') 

                $w("#imageUploadButton1").startUpload() 
                    .then((imageUploaded1) => {

let imageURL1 = imageUploaded1.url

                        console.log("image 1 URL = ",(imageURL1)); 





                                $w("#imageUploadButton2").startUpload() 
                                    .then((imageUploaded2) => {

let imageURL2 = imageUploaded2.url

                                        console.log("image 2 URL = ",(imageURL2)); 

                                    }) 





                            }) 

                    }) 
            }) 
        })
5

Here is the solution built for one of our clients, we like to use async await on all our developments so no call back hell … once this is done is easy to insert to the database the variable “workImages” which contains all the images.

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}`;
        }
    }
}
6

You are a legend

7

i’m looking to have 2 video files uploaded. Does this same set of code work for videos?
I tried to overlay another upload button on top of the first, and used another set of code for the 2nd file upload, but it doesn’t seem to work.

is there a demo of how this script is executed??

help would be appreciated. thanks.

8

Old post reappearing, closed.
Add a new forum post if you still need help.