Tuesday, September 2nd, 2008

addSizes.js: automatic link file-size generation

Category: JavaScript, jQuery, Tip

Nathalie Downe has taken Simon Willison’s json-head App Engine mini-service and used it to create addSizes.js, a little script that looks for large files linked from a page, and automatically adds their file size to the copy after the link.

Once in place, you simple do your usual link, and asynchronously the Web page will be updated to look like “your pdf link (pdf 2.8 MB)”.

javascript

  1. jQuery(function($){
  2.     $('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
  3.         // looking at the href of the link, if it contains .pdf or .doc or .mp3
  4.         var link = $(this);
  5.         var bits = this.href.split('.');
  6.         var type = bits[bits.length -1];
  7.        
  8.        
  9.         var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
  10.    
  11.         // then call the json thing and insert the size back into the link text
  12.          $.getJSON(url, function(json){
  13.             if(json.ok && json.headers['Content-Length']) {
  14.                 var length = parseInt(json.headers['Content-Length'], 10);
  15.                
  16.                 // divide the length into its largest unit
  17.                 var units = [
  18.                     [1024 * 1024 * 1024, 'GB'],
  19.                     [1024 * 1024, 'MB'],
  20.                     [1024, 'KB'],
  21.                     [1, 'bytes']
  22.                 ];
  23.                
  24.                 for(var i = 0; i < units.length; i++){
  25.                    
  26.                     var unitSize = units[i][0];
  27.                     var unitText = units[i][1];
  28.                    
  29.                     if (length >= unitSize) {
  30.                         length = length / unitSize;
  31.                         // 1 decimal place
  32.                         length = Math.ceil(length * 10) / 10;
  33.                         var lengthUnits = unitText;
  34.                         break;
  35.                     }
  36.                 }
  37.                
  38.                 // insert the text directly after the link and add a class to the link
  39.                 link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
  40.                 link.addClass(type);
  41.             }
  42.         });
  43.     });
  44. });

Posted by Dion Almaer at 5:07 am
8 Comments

++++-
4 rating from 21 votes

8 Comments »

Comments feed TrackBack URI

Clever. But isn’t the point of such a file size notation to warn you that the file is pretty big before you bother downloading, in effect giving you a choice? In this case, you are downloading it whether you like it or not…. Seems to miss the point, maybe it’s just me

Comment by jwlrs — September 2, 2008

oops, missed the json head bit, duh…

Comment by jwlrs — September 2, 2008

Another great use for this would be to check the mime-type for untrusted files. It wouldn’t be fool-proof but it could help you to know what you might get with somefileservingscript.php?filename.ext or worse somefileservingscript.php?id.

Comment by eyelidlessness — September 2, 2008

Building off eyelidlessness’s comment – What if this was an injection / javascript based plugin for a browser? It could scan the page and append the file time / file size as well as flag files as potentially harmful if they aren’t of the types you define.

Comment by btopro — September 2, 2008

Seems like this could be easily done without json-head app if the resources are on the same domain. One could simply make a HEAD request with XHR to the resource and then read the Content-Length.

Comment by westonruter — September 2, 2008

It may well make a good browser extension, especially with the addition of the untrusted file type check. @westonruter – that is an interesting idea, I might well update the script to do a check with XHR for files on the same domain and resort to json-head otherwise.

btw Dion, ny name is Natalie Downe not ‘Nathalie Downe’.

Comment by natbat — September 2, 2008

very helpful
thank you

Comment by Tribulus — October 1, 2008

Great concept, I’ll definitely use this when I can.

Comment by JasonStockman — October 31, 2008

Leave a comment

You must be logged in to post a comment.