Like always we should start with....

$w.onReady(( )=>{ }); - command

It will be the first initial code-sequence, which will do some action, once the page is ready. All your further code between the curly brakets, will be fired-up when your page-loading is done and your page is ready to do some actions.

Then let us connect the UPLOAD-BUTTON to start the "UPLOAD-FUNCTION"...

$w('#btnStartUPLOAD').onClick(()=> { start_Upload(); });

...and also connect the RESET-BUTTON with the created "RESET-FUNCTION", to be able to reset all file-data later...

$w('#btnStartRESET').onClick(()=> { start_Reset(); });

$w.onReady(() => { //starts automaticaly when page is ready
$w('UploadButton').onChange(() => {
$w('#btnStartUPLOAD').enable();
})
$w('#btnStartUPLOAD').onClick(() => {
start_Upload();
});
$w('#btnStartRESET').onClick(() => {
start_Reset();
});
$w('#btnClose').onClick(() => {
$w("#msbUpload").collapse(), $w("#btnUPLOAD").expand();
});
$w('#btnUPLOAD').onClick(async() => {
$w("#btnUPLOAD").collapse();
if ($w("#msbUpload").collapsed) {
await $w("#msbUpload").expand()
$w("#msbUpload").show('float')
} else {
await $w("#msbUpload").hide('float');
$w("#msbUpload").collapse();
$w("#btnUPLOAD").expand();
}
});
});

The UPLOAD-FUNCTION and the RESET-FUNCTION are the important functions in this little example-project.

async function start_Upload() {console.log("Upload started...")
let myArray = []
let counter = 0
for (let x = 0; x < 50 ; x++){
try{console.log("Upload-" + x + " / " + $w("#btnUP"+x).value[0].name + " / File-Size: " + $w("#btnUP"+x).value[0].size);
if($w("#btnUP"+x).value.length>0) {//console.log("Upload-"+x)
$w("#text1").text = `Uploading ${$w("#btnUP"+x).value[0].name}...`;
myArray.push(x)
$w("#txtUP"+myArray[counter]).show()
$w("#txtUP"+myArray[counter]).html = `<p style = "color:${uploadTextColor}; font-size:17px";>File uploaded</p>`
$w("#txtUP"+myArray[counter]).expand()
let xxx = await $w("#btnUP"+x).startUpload()
$w("#imgUP"+myArray[counter]).src = xxx.url
$w("#btnUP"+myArray[counter]).reset();
$w("#btnUP"+myArray[counter]).disable();
counter++;
}
else {
$w("#text1").text = "Please choose a file to upload.";
}
}
catch{console.log("File empty!"); $w("#text1").text = "File empty!";}
}
$w("#text1").text = "!!! Upload successful !!!"
}

function start_Reset() {

for (let x = 0; x < 50; x++) {

try {

$w("#imgUP" + x).src = placeholderPicURL

$w("#txtUP" + x).collapse();

$w("#btnUP" + x).enable();

} catch {

console.log("xxxxx")

}

}

}

Complete-Code:

//---- [ User-Interface ] --------------------

const uploadTextColor = "green"

const placeholderPicURL = "https://static.wixstatic.com/media/b03143_29a30a6ad0aa4eb2a65af67b842afad6~mv2.png"

//---- [ User-Interface ] --------------------

$w.onReady(()=>{

$w('UploadButton').onChange(()=>{$w('#btnStartUPLOAD').enable();})

$w('#btnStartUPLOAD').onClick(()=>{start_Upload();});

$w('#btnStartRESET').onClick(()=>{start_Reset();});

$w('#btnClose').onClick(()=>{$w("#msbUpload").collapse(),$w("#btnUPLOAD").expand();});

$w('#btnUPLOAD').onClick(async()=>{$w("#btnUPLOAD").collapse();

if($w("#msbUpload").collapsed){

await $w("#msbUpload").expand()

$w("#msbUpload").show('float')

}

else {

await $w("#msbUpload").hide('float');

$w("#msbUpload").collapse();

$w("#btnUPLOAD").expand();

}

});

});

async function start_Upload() {console.log("Upload started...")

let myArray = []

let counter = 0

for (let x = 0; x < 50 ; x++){

try{console.log("Upload-" + x + " / " + $w("#btnUP"+x).value[0].name + " / File-Size: " + $w("#btnUP"+x).value[0].size);

if($w("#btnUP"+x).value.length>0) {//console.log("Upload-"+x)

$w("#text1").text = `Uploading ${$w("#btnUP"+x).value[0].name}...`;

myArray.push(x)

$w("#txtUP"+myArray[counter]).show()

$w("#txtUP"+myArray[counter]).html = `<p style = "color:${uploadTextColor}; font-size:17px";>File uploaded</p>`

$w("#txtUP"+myArray[counter]).expand()

let xxx = await $w("#btnUP"+x).startUpload()

$w("#imgUP"+myArray[counter]).src = xxx.url

$w("#btnUP"+myArray[counter]).reset();

$w("#btnUP"+myArray[counter]).disable();

counter++;

}

else {

$w("#text1").text = "Please choose a file to upload.";

}

}

catch{console.log("File empty!"); $w("#text1").text = "File empty!";}

}

$w("#text1").text = "!!! Upload successful !!!"

}

function start_Reset(){

for (let x = 0; x < 50 ; x++){

try{

$w("#imgUP"+x).src = placeholderPicURL

$w("#txtUP"+x).collapse();

$w("#btnUP"+x).enable();

}

catch{console.log("xxxxx")}

}

}

Additional-Code-Part:

export function btnUP0_change(event) {

let mySizeLimit = 100000; console.log("Size-Limit: ", mySizeLimit);

let files = $w("#btnUP0").value; console.log(files);

let fileSize = files[0].size; console.log("File-Size: ", fileSize);

if (fileSize > mySizeLimit) {

setTimeout(()=>{$w("#btnUP0").reset();},100)

$w("#text1").text="Selected file-size exceeded !!!";

console.log("Selected file-size exceeded !!!");

}

else {$w("#text1").text="File accepted !!!"; console.log("File accepted !!!")}

}

- - - - -

- - - - -

- - - - -

​

​

- - - - -

​

- - - - -

- - - - -

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

File uploaded

User - Online

mt2-king

russian-dima

www.wix-world.de