Home > SharePoint Advancements > Show document file size using Jquery

Show document file size using Jquery

There might be an occassion where you or a client would like to physically see the actually file sizes of all the documents uploaded into a SharePoint document library using JQuery.  
To accomplish this, edit your SharePoint site or SharePoint document library.
1.  Site Actions
2.  Edit Page
3.  Click on “Add a Web Part”
4.  Select “Content Editor Web Part”
5.  Add to page.
Edit the Content Editor Web Part
1.  Click “Edit’
2.  Select “Modify Shared Web Part”
3.  Click on “Source Editor..” button.
Inside the Source Editor, copy and paste this Jquery code below.
<script src=”/jquery-1.3.2.min.js”></script> 
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$=’.docx’],”+ //don’t forget 2007 versions 
$(elm).each(function(i, e) { 
if (e.hostname && e.hostname == location.hostname) { 
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 
$(elm).eq(i).after(“<span> (file not found)</span>”); 


Apply and save the changes.  View your page.  If you are viewing this on your main sharepoint page you may need to add the Shared Document (or whatever you may have called it) webpart onto your page.
This will show the file size of all documents in your SharePoint Document Library.  If there are files in your document library that are not displaying the file size, just edit the Jquery code above and add the file extentions you need.  i.e.
“a[href$=’.some file extention’]”;

  1. Amber Berg
    July 8, 2011 at 10:23 pm

    Hello James,

    Excellent article on https://jshidell.wordpress.com/2010/09/20/show-document-file-size-using-jquery/.However, I need to determine the file size before user can upload. The upload limit for this particular site collection is 1MB. We can’t change it web app because there are 200 other site collections. Is there a jquery or javascript that will prevent user to upload files larger than 1MB.

    Please suggest.
    Amber Bert

    • July 12, 2011 at 9:12 am

      Hi Amber,

      Great question, I don’t know a way off the top of my head of doing this via JQuery or Javascript, but this can be accomplished by using SharePoint Designer or Nintex Workflows.

      If you have access to SharePoint Designer, you can create a workflow that checks the document size upon upload and if its larger than 1MB you can have the document deleted.
      Of course it will first upload the document, check the file size, and if its larger than 1MB it will be deleted from the list.

      The downside to this is, if you need this applied to the entire Site Collection, and you have many document library lists you will have to create Workflows for each document library.

      I will put my thinking cap on and see if there might be an easier way of doing this with JQuery.

  2. July 9, 2011 at 3:08 am

    Can’t you just add the File Size column to your view? Seems like a lot of work to show what’s already available out of the box.


    • July 12, 2011 at 8:39 am

      Hi Marc – You are absolutely right. This can be accomplished very easily OTB, and really no need to perform JQuery to display it. However with JQuery it allows for more flexiablitity for formating of the size. ie, if you want to display the size in MB instead of KB. Many of my clients prefer to see that instead of having to calculate KB to MB or MB to GB, etc! Its just an option, but not necessary. Of course a calculated column would probably work as well to accomplish that.

      For those that don’t know how to display the File Size column in your document library like Marc suggests:

      1. Open up your document library
      2. Click the down arrow next to View:
      3. Select “Modify this View”
      4. Select the “File Size” check box
      5. Click “Ok”

      You will now see your documents listed in your view with their file size listed in KB.

      Thanks Marc

  3. Stefan
    August 21, 2012 at 9:08 am

    Dear Sir,

    I am trying to add this script but can’t seem to make it work. Can you help with a bit more detail?
    Thank you.


    • August 21, 2012 at 9:41 am

      Hi Stefan,

      Sure. First and I apologize for not including this in the original post. If you haven’t already downloaded the JQuery-1.3.2 plugin you can so right here – http://docs.jquery.com/Release:jQuery_1.3.2

      Or if your SharePoint environment can access resources outside of its domain you can simply reference JQuery from the google ajax api url – http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

      If you downloaded the JQuery upload it into a document library on your site. I have a document library called scripts and usually just upload all my JQuery scripts into that document library.

      Then on your Site Collection or Site add a SharePoint Document Library WebPart onto your page. So for example if the name of the document library you would like to have the sizes show for is called “My Documents” add the “My Documents” document library webpart onto your page.

      Next add a Content Editor Webpart below the “My Documents” document library webpart on your page, edit the Content Editor Webpart, select Source Editor, and paste the above JQuery script into it.

      Now depending on if you downloaded the JQuery and uploaded it into a document library or if you are referencing the JQuery you will have to edit your location.

      If you uploaded the JQuery, for your script src="" include the url path of the document library where you uploaded your JQuery (i.e "script src="/scripts/jquery.min.js" if you are referencing from the google api you would use (i.e. script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”)

      Everything else in the script should stay the same. Just save the Content Editor WebPart and the sizes should then show up next to each document. Unless that document extension is not included in the script you would have to add it (i.e. a[href$=’.txt’].

      Hopefully that helps you out some. If you have any further problems, can you include your script and I’ll take a look at it for you.


      • Stefan
        August 21, 2012 at 10:00 am

        Done that but still having issues. I uploaded that in SiteAssets i.e. https://X.sharepoint.com/SiteAssets/jquery-1.3.2.min.js
        My page is https://X.sharepoint.com/SitePages/Home.aspx
        This is the first line:
        Is this correct?

      • Stefan
        August 21, 2012 at 10:07 am

        The code line disaperead from my post:

        of course without the spaces…

      • Stefan
        August 21, 2012 at 10:09 am

        not again
        see link for code

      • Stefan
        August 21, 2012 at 10:13 am

        My path is modified automatically when I close it to http://www.cstefan.com/code1.png

      • August 21, 2012 at 10:18 am

        Thats odd. What happens if you try to edit it again, does it change it automatically again?

        Also does your /SiteAssets/ library live in the same root level as your Site Collection /SitePages/ if so you shouldn’t need "../SiteAssets/" try to remove the ".." before /SiteAssets/

      • Stefan
        August 21, 2012 at 10:24 am

        I removed the .. and it didn’t change the path anymore but it doesn’t seem to do anything. If I give you admin access can you login and do it for me? Can you email me so I won’t post the login details here? Thank you.

      • August 21, 2012 at 10:25 am

        Sure, I’m be happy to help. Email is on its way.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: