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 !!!")}

}

- - - - -

- - - - -

- - - - -

​

​

- - - - -

​

- - - - -

- - - - -

Tutorial

Index

Tutorial

Problem + Brainstorming ( Step-I )

Designing ( Step-II )

Coding ( Step-III )

User - Online

mt2-king

russian-dima

www.wix-world.de