Show file name with sizes.

[Merlin]

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.

[Shinu]

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.

[Merlin]

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.

[Shinu]

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.

[Merlin]

Thank You Shinu. Now it works Great.

[Suthish]

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.?

[Veselin Tsvetanov]

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