Do you like the ease of the OOB List View Web Parts but hate the way it displays file size? Yeah, me too. I’d like to see the file size in either KB or MB right next to the file and only for client application files (like .pdf, doc., and .xls).

Let’s turn this:

into this…

I admit I got the idea from seeing Simon Willison’s json-head application, hosted on Google’s appspot. Only, Simon’s program can’t authenticate to my WSS site so I rebuilt it using jQuery and AJAX.

We need a function to dynamically tell us the size in KB or MB and a function to get the data. But we’re not using web services. Instead, we’ll use an undocumented AJAX call with jQuery, a HEAD request.

The HEAD request returns, among other things, the Content-Length (which is the file’s size in bytes) but doesn’t return the entire file. This way, we get the information we want without clogging up our tubes!

<script type="text/javascript" src="/PaulGrenier/js/jquery.js"></script>
<script type="text/javascript">
function hdrDetails(i, elm, cl) {
        cl = cl/1024;  //divide content-length by 1024 (KB)
    var sz = cl>1024?"MB":"KB";  //if cl is still big, set to MB
        cl = cl>1024?cl/1024:cl;  //if cl is still big, divide again
    var len = $(elm).eq(i).text().length;  //check the link's text length
    if(len > 0) {
        //add a file size
        $(elm).eq(i).after("<span> ("+cl.toFixed(2)+" "+sz+")</span>");
    }
}
$(function() {
    var elm="a[href$='.pdf'],"+ //only the file types we want
            "a[href$='.doc'],"+
            "a[href$='.ppt'],"+
            "a[href$='.xls'],"+
            "a[href$='.docx'],"+ //don't forget 2007 versions
            "a[href$='.pptx'],"+
            "a[href$='.xlsx']";
    $(elm).each(function(i, e) {
        if (e.hostname && e.hostname == location.hostname) {
            $.ajax({
                type: "HEAD",
                url: $(this).attr("href"),
                complete: function(xhr, textStatus) {
                    var cl=xhr.getResponseHeader("content-length");
                    if(textStatus=="success") {
                        var cl=xhr.getResponseHeader("content-length");
                        hdrDetails(i, elm, cl); //call the calculation fn
                    }else{
                        $(elm).eq(i).after("<span> (file not found)</span>");
                    }
                }
            });
        }
    });
});

</script>

You may have noticed that we’re only calculating file size for internal files. That’s because AJAX, using XMLHttpRequest, can only make requests to the originating server.

So tomorrow, I’ll show you how to add Simon’s application to do the same file size calculations for external files.

Paul Grenier