Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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?
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
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>
That's great. Thanks so much!
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
Asked: 2021-11-03 14:43:18 +0800
Seen: 18 times
Last updated: Dec 02 '21