File upload Template with file size

4 posts, 1 answers
  1. Sriram
    Sriram avatar
    14 posts
    Member since:
    Dec 2014

    Posted 05 Jun 2018 Link to this post

    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

     

     

  2. Sriram
    Sriram avatar
    14 posts
    Member since:
    Dec 2014

    Posted 05 Jun 2018 in reply to Sriram Link to this post

    Below is the declaration of the file upload control

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

  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    633 posts

    Posted 07 Jun 2018 Link to this post

    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.
  4. Sriram
    Sriram avatar
    14 posts
    Member since:
    Dec 2014

    Posted 07 Jun 2018 in reply to Dimitar Link to this post

    Thanks Dimitar. That fixed the issue.
Back to Top