jQuery: Finding file size and adding it to the link

Question

Let me start by saying that I'm not a jQuery guru by any means and I genuinely know this is over my head, that's why I've come to SO.

Is there a way with jQuery to find the file size of a link on a page and then inject/add the text of the file size next to the link?

Here's my problem

On one of my pages, I have a link to my resume which is a PDF file and to improve usability it's proper to have the file type and file size next to the link so the users have the option to decide if they want to click on that link or not. So the link would read something like "Download my resume (PDF / 80KB)"

The problem is that I'm constantly updating my resume and uploading a new PDF file which, of course, has a different file size so I'm always going back to the HTML and changing the text to reflect the new file size.

Is there a way to automate this with jQuery... or plain JavaScript for that matter?

I found this script and made a demo here in Codepen but it doesn't seem to work.

Any help with this would be greatly appreciated.

Because I'm not a programmer, I don't know how :p. If you have any suggestions, it'd be nice to have more info about it for everyone. Thanks. — Ricardo Zea, Jun 24 '13 at 16:50
Depends on which language you use on the server to ship those html files. — Alp, Jun 24 '13 at 21:50
http://stackoverflow.com/questions/2602612/php-remote-file-size-without-downloading-file and http://stackoverflow.com/questions/5958725/get-size-of-remote-file-from-url — Alp, Jun 25 '13 at 08:05

Fabrizio Calderan · Accepted Answer · 2013-06-24T16:18:59.233

2

you wrote (twice)

json.headers['Content-Length']

when the name of the property (you can see it in the body of the response) is actually in lower case:

json.headers['content-length']

if you correct this key, the output is (pdf 101.6 KB)

Also note that if both your CV and download page are on the same domain, you could simply use a HEAD ajax request and read the content-length response header

edited Jun 24 '13 at 16:18

answered Jun 24 '13 at 16:13

Fabrizio Calderan

120,726
26
164
177

This worked great Fabrizio!. One quick question: I see the file type and file size are 'floating'. Is there a way to encapsulate them in a `` tag for CSS targeting purposes? – Ricardo Zea Jun 24 '13 at 16:43
Hello everyone. The script is not working anymore since apparently the URL `http://json-head.appspot.com` is returning a 503 response. Does anyone know of a way to get a hold of the main script being served by this site so the call can be made to a local file instead? Thanks again. – Ricardo Zea Oct 03 '13 at 02:45

score 0 · Answer 2 · answered Jun 24 '13 at 16:13

0

If the size is going to be around 80KB, then it isn't going to be a problem. It seems rather out-dated to put the size in the link. The easy way to do it, is work out a theoretical maximum, e.g. 150KB, which it'll never go over, and put "Download my resume (PDF / < 150KB)"

Other than that, I would have thought that the only way to do this client-side would be to download the file, work out the size, and update the link, which kind of defeats the object.

answered Jun 24 '13 at 16:13

harriyott

10,505
10
64
103

It's not out-dated at all, you just want to do it in differently, which is better than not doing anything at all. "Choosing" 80KB is an arbitrary decision that doesn't take into account the users' right to decide. Maybe for you 80KB is not a big deal but you never know for who it will. So it's a much better user experience to be able to read the **exact** file size than an 'estimated' range. Thanks. – Ricardo Zea Jun 24 '13 at 16:47

jQuery: Finding file size and adding it to the link

2 Answers2