Find size of file behind download link with jQuery

Question

I was wondering if there was a way to use jQuery to find out the file size for a PDF that i'm linking to a webpage.

I want to make it so that on hovering over the download link, a modal box pops up saying the file size of the PDF. I can do the second bit, the only thing i'd like to know is how to find out the file size. I dont know if jQuery is capable of this. If not then too bad i guess..

Cheers in advance.

Pedo

possible duplicate of Get size of file requested via ajax – Masticate

Answer 1

I feel like this is too much to be doing client-side, but I don't know the details of your application, so presuming you have to do it with jQuery... you can do a HEAD request and look at the Content-Length header. Earlier I recommended the jqHead plugin, but after I tried to use it I found that it was broken.

Here's a working example that doesn't depend on any extra plugins: http://host.masto.com/~chris/so/jqhead.html

The meat of it is very simple:

  var request;
  request = $.ajax({
    type: "HEAD",
    url: $("#url").val(),
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

Muncy

I was basically writing an answer suggesting a HEAD request, but you beat me too it. May help to show code to do it with/without the plugin. – Fionafionna

Awesome, but devs should notice that domain privacy take place here :) – Cryptozoite

To what @InviS was saying, try using http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, which is on another domain – Krystlekrystyna

@Krystlekrystyna No matter from what domain your .js file has been loaded. It works on your domain. And if your site has domain a.com and you are going to fetch data from b.com using AJAX, you should add xhrFields: { withCredentials: true } field to ajax options, look at jQuery.ajax for details, and server should respond with correct Access-Control-Allow-Origin field – Cryptozoite

@InviS That's not cross-domain. I was giving an example to your statement. I don't think withCredentials will work with that google cdn :) – Krystlekrystyna

I've just found that not all the servers send the Content-Length header :( – Asben

Answer 2

Here is working snippet to find the file size in javascript without going to the server, if you are about to upload the file to the server.

This idea helps to restrict the file size before uploading big files to the server.

<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
    function findSize() {
        var fileInput = $("#loadfile")[0];
        alert(fileInput.files[0].size); // Size returned in bytes.
    }    
</script>

Dusa

@Kyle Sevenoaks: Sorry about that Kyle. Was fiddling about on it, I rolled back to yours :) – Campbell

Works fine in Firefox and Safari. No jQuery so dismal fail I guess. – Namecalling

In Firefox, fileSize is deprecated, in favour of size. – Acerose

what if i want to check the file date? what to use ? thank you ^^ – Neither

Answer 3

If you know the file size beforehand, you can put that in the title attribute of the download link. You can also use jQuery to show a custom popup.

Otherwise, there is no way to get just the file size (content-length) of a URL without actually downloading the whole content AFAIK.

Violent

Answer 4

The only way that I can think of to do this would be to create a web service that would return you the filesize of the PDF.

Merchant

Answer 5

In the answer above, Chrome 21 and Safari 6 did not have a fileSize member, but does have size. Use:

fileInput.files[0].size

Purse