Get the total size of selected files in Vue Uploader component

11 Jun 20246 minutes to read

You can get the total size of selected files before upload it to designated server. By using selected event you can achieve this behavior.

In the following example, explains about how to calculate total file size before upload.

<template>
  <div>
    <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :selected="onSelect"
      :asyncSettings="path"></ejs-uploader>
  </div>
</template>
<script setup>

import { UploaderComponent as EjsUploader } from '@syncfusion/ej2-vue-inputs';
import { ref } from 'vue';
const uploadObj = ref(null);

const path = {
  saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
  removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
};

const onSelect = (args) => {
  let totalSize = 0;
  for (let file of args.filesData) {
    totalSize = totalSize + file.size;
  }
  let size = uploadObj.value.bytesToSize(totalSize);
  alert("Total select file's size is " + size);
}

</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 {
  visibility: hidden;
  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>
<template>
  <div>
    <ejs-uploader ref="uploadObj" id='defaultfileupload' name="UploadFiles" :selected = "onSelect" :asyncSettings= "path"></ejs-uploader>
  </div>
</template>
<script>

import { UploaderComponent } from '@syncfusion/ej2-vue-inputs';
 
let initial = true;
export default {
name: "App",
components: {
"ejs-uploader":UploaderComponent
},
  data: function(){
        return {
          path:  {
            saveUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Save',
            removeUrl: 'https://services.syncfusion.com/vue/production/api/FileUploader/Remove'
          }
        }
    },
    methods: {
 onSelect: function(args) {
    if (initial) { initial = false; return; }
    args.isModified = true;
    let oldFiles = this.$refs.uploadObj.getFilesData();
    let filesData = args.filesData.concat(oldFiles);
    let modifiedDataleInfo = this.sortFileList(filesData);
    args.modifiedFilesData = modifiedDataleInfo;
},

 sortFileList: function(filesData){
    let files= filesData;
    let fileNames = [];
    for (let i = 0; i < files.length; i++) {
        fileNames.push(files[i].name);
    }
    let sortedFileNames = fileNames.sort();
    let sortedFilesData = [];

    for (let name of sortedFileNames) {
        for (let i = 0; i < files.length; i++) {
            if (name === files[i].name) {
                sortedFilesData.push(files[i]);
            }
        }
    }
    return sortedFilesData;
}

    }
}
</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 {
        visibility: hidden;
        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.