This is a migrated thread and some comments may be shown as answers.

File upload Template with file size

3 Answers 392 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Sriram
Top achievements
Rank 1
Sriram asked on 05 Jun 2018, 06:53 PM

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

 

 

3 Answers, 1 is accepted

Sort by
0
Sriram
Top achievements
Rank 1
answered on 05 Jun 2018, 06:56 PM

Below is the declaration of the file upload control

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

0
Accepted
Dimitar
Telerik team
answered on 07 Jun 2018, 08:37 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Sriram
Top achievements
Rank 1
answered on 07 Jun 2018, 07:33 PM
Thanks Dimitar. That fixed the issue.
Tags
Upload
Asked by
Sriram
Top achievements
Rank 1
Answers by
Sriram
Top achievements
Rank 1
Dimitar
Telerik team
Share this question
or