Show file name with sizes.

7 posts, 2 answers
  1. Merlin
    Merlin avatar
    15 posts
    Member since:
    Feb 2013

    Posted 05 Nov 2013 Link to this post

    Greetings

    In asyncupload, When I select few files for upload, all the file names are displayed above the control with a green icon. My requirement is. along with the individual file name, can I show the file size? I tried a couple of times but didn't work out and I want to confirm if its possible.

    Please be kind enough to reply soon.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Nov 2013 Link to this post

    Hi Merlin,

    You can attach the OnClientFileUploaded client event of the RadAsyncUpload to achieve your requirement. Please have a look into the following code I tried which works fine at my end.

    JavaScript:
    <script type="text/javascript">
        var $ = $telerik.$;
        function onClientFileUploaded(sender, args) {
            var fileSize = ((args.get_fileInfo().ContentLength) / 1024).toString();
            //The ContentLength property returns the size in bytes. To convert it to KB divide by 1024.
            //The .split function will work only on string, so convert the Numeric value to String using .toString().
     
            var newFileSize = (fileSize.split("."))[0];
            //removing the decimal portion of the filesize. The split() splits a string into an array of substring.
            //array[0] returns the value before the decimal point.
     
            var row = args.get_row();
            var span = $(row).find(".ruFileWrap .ruUploadProgress");
            span.text("").append(args.get_fileName() + " " + newFileSize + " KB");
            //accessing each row and setting the file name along with size in KB.
        }
    </script>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Merlin
    Merlin avatar
    15 posts
    Member since:
    Feb 2013

    Posted 06 Nov 2013 Link to this post

    This works fine. I require a little more assistance in this to make it work as I needed. I want to display the size in mega bytes for files with size>=1MB. Apart from that, can I have the size displayed in a separate color?

    Also Thank You shinu for your wonderful support with a neat explanation.
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Nov 2013 Link to this post

    Hi Merlin,

    Please have a look into the following updated code.

    JavaScript:
    <script type="text/javascript">
        var $ = $telerik.$;
        function onClientFileUploaded(sender, args) {
            var fileSize;
            var contentLength = (args.get_fileInfo().ContentLength) / 1024; //Bytes to KB
            if (contentLength >= 1024) {
                //Checking if file size is >= 1MB (1024 KB)
                contentLength = contentLength / 1024; //KB to MB
                contentLength = Math.floor(contentLength * 100) / 100; //Set file size in MB up to 2 decimal places as seen in Windows file system
                fileSize = contentLength + " MB";
            }
            else {
                contentLength = (contentLength.toString().split("."))[0]; //Removing the decimal part if file size is in KB.
                fileSize = contentLength + " KB";
            }
            var row = args.get_row();
            var span = $(row).find(".ruFileWrap .ruUploadProgress");
            span.text("").append(args.get_fileName() + "<label style='margin:0px 10px 0px 10px; color:Green;'>" + fileSize + "</label>");
            //Display the file size in <label> to set style (color).
        }
    </script>

    Thanks,
    Shinu.
  6. Merlin
    Merlin avatar
    15 posts
    Member since:
    Feb 2013

    Posted 07 Nov 2013 Link to this post

    Thank You Shinu. Now it works Great.
  7. Suthish
    Suthish avatar
    13 posts
    Member since:
    May 2015

    Posted 02 Jun in reply to Shinu Link to this post

    This is pretty old post, but still helps everyone. But one issue here, if the file name length is very big, then the file size wont be displayed. File size text get over written by file name text. Is there any way to increase the upload progress span width so everything can be fit properly and is it possible to move file size after remove button.?
  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 07 Jun Link to this post

    Hello Suthish,

    Attached you will find a simple web page and a screenshot of the page running. You will notice that the file name text does not overlaps over the file size text. Could you, please specify, what is the difference in your scenario, compared to the example sent?

    Regards,
    Veselin Tsvetanov
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017