Upload multiple files on one upload button

Ask the community
,
1

We should be able to upload more than one file without having to use multiple buttons when using it to submit forms

8 Likes
2

Hi there, here is the solution that we built for one of our clients allowing a user to upload as many images desired with one single upload field. We prefer to avoid call back hell so we use async await.

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

This doesn’t work for me. I replace the #uploadWork to the name of the upload button but it still didn’t work.

Edit:
It worked but it’s not uploading to database. So still not the solution that works for me.

4

You have to change uploadedTxt, this is a text element and is important to know how to implement async await all what you see after “await” and before greenFlag is on one single line

5

In case that you are wondering how this looks like here is screenshot of the live project:

722Ă—726 299 KB

So with a single button, you can upload as many pictures as you want selecting them one by one Wix still doesn’t have a tool to mark them all at the same time which they should do it but anyway this is a solution.

6

Hi, would I be able to use the same set of code for multiple video file upload?
Currently the page I have is an upload button with a button to start the upload. i need it to be able to upload 2 files instead of 1.

how should this be tweaked to make is useable for site visitors to upload 2 files at once?

7

Would you be able to post step-by-step instructions on how to implement this coding on to a site? I’m new at coding and I’m having difficulties altering the code so that it works smoothly. Thank you!