0

Catch the upload event in client side

asked 2021-11-03 14:43:18 +0800

reamerit gravatar image reamerit
3 1

updated 2021-11-04 12:13:38 +0800

cor3000 gravatar image cor3000
6270 2 7
ZK Team

I now want to get the uploaded file details(a zip) in client side and check the file type of each file in the zip. How can i get the zip file content in a client event? I tried to listen on the "onUpload" event in client side, but, I do not know how to get the file object from that event.

<button xmlns:w="client" label="upload" 
        upload="true,maxsize=801192"  
        w:onUpload="doBeforeUpload(event)"
        onUpload="@command('uploadFile',upload=event)"
        autodisable="self" />

The doBeforeUpload is js function as below:

function doBeforeUpload(event){
    console.log(event);
    console.log(event.medias);
}

event is an object, but i can not find any file object from it. Anyone can help me?

delete flag offensive retag edit

6 Answers

Sort by ยป oldest newest most voted
0

answered 2021-11-16 18:59:13 +0800

MDuchemin gravatar image MDuchemin
2031 1 5
ZK Team

Hey there!

DropUpload is a different widget, which has its own uploader.

You can wire both to the same function to review the content of the file before accepting the upload, it will look like this: https://zkfiddle.org/sample/20n0ach/1-DropUpload-intercept-start-event

link publish delete flag offensive edit
0

answered 2021-11-04 15:58:13 +0800

cor3000 gravatar image cor3000
6270 2 7
ZK Team

the "onUpload" event fires once the upload is complete (both at server and client side), so that event is not what you need to perform checks before an upload happens.

Instead you can to override the zul.Upload.start function: there you can perform checks on the file contents before they are uploaded. Here an example without actually implementing the zip content validation (that's up to you using your favorite JS zip library).

<zk>
    <script><![CDATA[
    zk.afterLoad('zul', function() {
        var xUpload = {};
        zk.override(zul.Upload, xUpload, {
            start : function(uploader) {
                if(uploader) {
                    doBeforeUpload(uploader)
                        .then(result => {
                            console.log("Upload OK", result);
                            if (!xUpload.start.apply(this, arguments)) {
                                throw "start upload failed";
                            }
                        })
                        .catch(err => {
                            // your error handling
                            console.error("Upload INVALID", err);
                            uploader.destroy();
                        });
                    return true;
                } else {
                    return xUpload.start.apply(this, arguments);
                }
            },
        });//zk.override

        const doBeforeUpload = async function(uploader) {
            var file = uploader._upload._inp.files[0];
            if(file.type === "application/zip") {
                // get the binary data ...
                var fileDataBuffer = await file.arrayBuffer();
                // do some validation of the ZIP content
                if (yourZipValidation(fileDataBuffer)) {
                    return "zipValid";
                } else {
                    // or fail by throwing an exception
                    throw "zipInvalid";
                }
            }
            return "notZip"; // skip validation for non zip files
        }
    });//zk.afterLoad
    ]]></script>
    <script>
    </script>
    <button xmlns:w="client" label="upload"
            upload="true,maxsize=801192"
            onUpload="Clients.log(event.media.name)"
            autodisable="self"/>

</zk>
link publish delete flag offensive edit
0

answered 2021-11-08 10:12:54 +0800

reamerit gravatar image reamerit
3 1

That's great. Thanks so much!

link publish delete flag offensive edit

Comments

don't forget to "accept/upvote" a helpful answer so that it's easier for others to see a question was answered form the search results, in case they come across a similar question

cor3000 ( 2021-11-08 10:43:56 +0800 )edit
0

answered 2021-11-08 12:03:18 +0800

reamerit gravatar image reamerit
3 1

I tested the above codes with the upload button, it works fine. While, is there a way to do the same thing on dropupload control? Many thanks!

link publish delete flag offensive edit
0

answered 2021-11-16 18:59:24 +0800

MDuchemin gravatar image MDuchemin
2031 1 5
ZK Team

Hey there!

DropUpload is a different widget, which has its own uploader.

You can wire both to the same function to review the content of the file before accepting the upload, it will look like this: https://zkfiddle.org/sample/20n0ach/1-DropUpload-intercept-start-event

link publish delete flag offensive edit
0

answered 2021-12-02 17:23:26 +0800

reamerit gravatar image reamerit
3 1

Sorry for the late reply. I tested above solution. It works fine. Thanks so much!

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
3 followers

RSS

Stats

Asked: 2021-11-03 14:43:18 +0800

Seen: 18 times

Last updated: Dec 02

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More