File upload Template with file size

[Sriram]

Hi,

I am using the file upload template to customize the file upload. Currently Async is set to false, so on select event I am displaying the template. But I want to use the in built function which displays the file size. I am using the below template but I don't want to display the file size in bytes. Is there a way I can achieve this? I created a custom function called formatFileSize() but I want to utilize the inbuilt function if available.

 

<script id="uploadFileTemplate" type="text/x-kendo-template">
        <div>
            <span class="k-file-extension-wrapper">
                <span class="k-file-extension">#=files[0].extension#</span>
                <span class="k-file-state"></span>
            </span>
            <span class="k-file-name-size-wrapper">
                <span class="k-file-name" title="#=name#">#=name#</span>
                <span class="k-file-size">#=formatFileSize(size,2)#</span>
            </span>
            <button id='btnFileDelete' type='button' class='k-upload-action' style='position: absolute; right: 0;' title="Delete">
                <span title="Remove" class="k-icon k-i-close k-i-x" aria-label="Remove"></span>
            </button>
        </div>
    </script>

<script type="text/javascript">

        function OnSelectUploadFile(e) {
            setTimeout(function () {
                $('#btnFileDelete > span').addClass('btnFileOverwrite');
                $('#btnFileDelete > span').attr('title', 'Delete the file');
                $('#btnFileDelete > span').text('Delete');
                $('#btnFileDelete').prepend('<i class="fas fa-times"></i>');
            });
            return true;
        }        
        function formatFileSize(bytes,decimalPoint) {
            if(bytes == 0) return '0 KB';
            var k = 1000,
                dm = decimalPoint || 2,
                sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
                i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

    </script>

I am using the below version of Kendo Mvc
2017.3.1018.545

 

 

[Sriram]

Below is the declaration of the file upload control

 .Name("UploadedFile")
                            .Multiple(false)
                            .TemplateId("uploadFileTemplate")
                            .Events(e =>
                            {
                                e.Select("OnSelectUploadFile");
                            })

[Dimitar]

Hello Sriram,

The specified built-in function is currently not exposed in the public API. However, you should be able to use it by simply defining it in the view:

<script>
  function getTotalFilesSizeMessage(files) {
    var totalSize = 0;

     if(typeof files[0].size == "number") {
       for(var i = 0; i < files.length; i++) {
         if(files[i].size) {
           totalSize += files[i].size;
         }
       }
     } else {
       return "";
     }

     totalSize /= 1024;

     if(totalSize < 1024) {
       return totalSize.toFixed(2) + " KB";
     } else {
       return (totalSize / 1024).toFixed(2) + " MB";
     }
  }
</script>

The function can then be invoked in the template as follows:

<script id="fileTemplate" type="text/x-kendo-template">
  <h4 class='file-heading file-size-heading'>Size: #: getTotalFilesSizeMessage(data.files) #</h4>
</script>

Check out the following Dojo example, where the above is implemented.

Regards,
Dimitar
Progress Telerik

[Sriram]

Thanks Dimitar. That fixed the issue.