Check file size before uploading it in Vue Uploader component
16 Mar 20232 minutes to read
By using uploading event, you can get the file size before upload it to server. File object contains the file size in bytes only. You can convert the size to standard formats (KB
or MB
) using bytesToSize method.
<template>
<div>
<ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :autoUpload="autoUpload" :asyncSettings= "path" :uploading="onBeforeUpload"></ejs-uploader>
</div>
</template>
<script>
import Vue from 'vue';
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(UploaderPlugin);
export default {
data: function(){
return {
path: {
saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
},
autoUpload: false
}
},
methods: {
onBeforeUpload: function(args): void {
// get the file size in bytes
let sizeInBytes: number = args.fileData.size;
// get the file size in standard format
alert("File size is: " + this.$refs.uploadObj.bytesToSize(sizeInBytes))
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
#container {
padding-left: 5%;
width: 100%;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
You can also explore Vue File Upload feature tour page for its groundbreaking features. You can also explore our Vue File Upload example to understand how to browse the files which you want to upload to the server.