Page Loading Progress

0%

top of page

How-2   create   a   multi-uploader ?

written by ------------->

Ninja1 (1).png

     - Introduction

     - Brainstorming

     - Designing

     - Coding

     - Example, Result & Conclusion

     - Additional related stuff 

iconfinder-technologymachineelectronicde
2890564-artificialintelligence1_101963.p
iconfinder-securityprotectlockshield36-4
code_brackets_icon_155617.png

Velo-Ninja

Things_34164.png
chain_connect_hyper_internet_link_securi

    Intoduction:

Hello and welcome to the first free tutorial on WIX-WORLD.DE / MEDIA-JUNKIE.com

In this tutorial, you will learn how to create a workaround for a tiny multi-uploader.

When you are a Wix-Website-Owner, then you surely know, that it is difficult to find a good working multi-uploader, which can be integrated into your wix-website, since this feature on the wix-platform is still under developement.

You will surely confirm, when i say that this feature is probably one of the most used ones, because we upload & download files from the world-wide-web almost every day.

And you will also agree with me, when i say, that faster more efficient and good working uploder, makes our cyber-life easier & more comfortable. And this is exactly the point, why i want you to present my own creation of a multi-uploader, right now.

As all of you know, wix offers an --> UPLOAD-BUTTON, which can be used, for example to upload your files

directly into your DATA-MANAGER. But this upload-function has a big disatvantage, because it can't handle multiple upload-processes. That means, you always have to choose files one by one to upload them into your DATA-MANAGER. When you want to upload just a few pics or 1-3-documents, this shouldn't be a big problem.

But what if you want to uplaod a bunch of pics or text-files, or you want to share a whole foto-album?

Yes, the whole thing will end in a problem and definetely after 30-50 single uploads you're fed up to upload further 250-fotos into your wished folder in your WIX-DATA-MANAGER.

Conclusion? ---> We need an upgraded automatic upload-process, which will speed up the whole upload.

 

So what are you waiting for? ---> Lets GO !!! Lets do it !!!

iconfinder-technologymachineelectronicde

    Brainstorming:

Before we start to code and to create our new project, we should do first some ---> "brainstorming" to collect our ideas and knowledge of how to create & design our project the best. 

Lets do it by collecting some important questions:

- How will look the design of our project?

- Which elements are needed to realize our project?

- Which interactions do we need to fulfill a complete upload-function?

- What will be the exact flow of our project? 

- If you know further important questions for your own brainstorming, it is always recommended to notice them on paper.

Doing some notations while you are generating some new ideas is very important and should not be underestimated, because sometimes good ideas gets lost, if you don't do that.

Used elements:

 

- BUTTONS --->       /   BOXES --->      or   MULTI-STATE-BOXES --->      /   UPLOAD-BUTTONS --->

2890564-artificialintelligence1_101963.p

    Designig:

You already know which elements you will use in your project, now lets do some page-designing and place all elements into right places.

iconfinder-securityprotectlockshield36-4

- adding 2x normal BOXES...

One for the Main-Menu

One for the Sub-Menu

- adding some CONTROL-BUTTONS...

RESET
UPLOAD

- adding some UPLOAD-BUTTONS...

Change File
Change File
Change File
Change File
Change File
Change File

! ! ! Of course we do not forget to give each of our added elements a unique ID ! ! !

    CODING:

Like always we should start with....

$w.onReady(( )=>{ }); - command, our 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 !!!")}

}

code_brackets_icon_155617.png
code_brackets_icon_155617.png

    Example, Result & Conclusion:

Things_34164.png

Example

Tutorial2.png

Yes, we were able to generate a multi-upload-function. It's for sure not a real "multi-uploader" but it is still an improved uploading function (tool), which makes your UPLOADING a little bit more comfortable and speeds up the whole uploading process.

    Additional-Related-Stuff (links & posts):

chain_connect_hyper_internet_link_securi

- adding VALIDATION & RESET-function...

 You love this TUTORIAL? Like it, if you really liked it:

like-001.png

Want to see                more tutorials?

bottom of page