Tuesday, September 2nd, 2008
addSizes.js: automatic link file-size generation
Category: JavaScript
, Tip, jQuery
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:
-
-
jQuery(function($){
-
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
-
// looking at the href of the link, if it contains .pdf or .doc or .mp3
-
var link = $(this);
-
var bits = this.href.split('.');
-
var type = bits[bits.length -1];
-
-
-
var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
-
-
// then call the json thing and insert the size back into the link text
-
$.getJSON(url, function(json){
-
if(json.ok && json.headers['Content-Length']) {
-
var length = parseInt(json.headers['Content-Length'], 10);
-
-
// divide the length into its largest unit
-
var units = [
-
[1024 * 1024 * 1024, 'GB'],
-
[1024 * 1024, 'MB'],
-
[1024, 'KB'],
-
[1, 'bytes']
-
];
-
-
for(var i = 0; i <units.length; i++){
-
-
var unitSize = units[i][0];
-
var unitText = units[i][1];
-
-
if (length>= unitSize) {
-
length = length / unitSize;
-
// 1 decimal place
-
length = Math.ceil(length * 10) / 10;
-
var lengthUnits = unitText;
-
break;
-
}
-
}
-
-
// insert the text directly after the link and add a class to the link
-
link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
-
link.addClass(type);
-
}
-
});
-
});
-
});
-
4.5 rating from 14 votes
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
oops, missed the json head bit, duh…
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.
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.
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.
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’.
very helpful
thank you
Great concept, I’ll definitely use this when I can.