Javascript check file size

Question

Is it possible to keep checking with javascript if the filesize of a file on a webserver (e.g. http://www.mysite.com/myfile.js) is larger than 0 bytes and if so return a true or false value?

Thanks in advance!

Kinney

You will need a simple ajax request and a Serverside endpoint that returns the size of a requested file... without that and by default it won't be possible – Sheehy

@sra: That's not necessarily true. – Imminent

Answer 1

Theoretically, you could use XHR to issue a HTTP HEAD request and check the Content-Length in the response headers.

A HEAD request is identical to a regular GET request except the server MUST NOT return the actual content. In other words, the server replies with the headers it would have had you tried to GET the resource, but then stops and does not send the file.

However, some severs respond to a HEAD request with a Content-Length header of 0, regardless of the actual size of the file. Others respond with the size of the file.

In order to accomplish this, you'll have to pray your server returns a file's actual size to a HEAD request.

If it does, getting that value is easy:

$.ajax('/myfile.js', {
    type: 'HEAD',
    success: function(d,r,xhr) {
       fileSize = xhr.getResponseHeader('Content-Length');
    }
});

Note that JSFiddle's server always returns 0 when we HEAD /, even though / is 16916 bytes.

Also note what jQuery's docs say about the HTTP request type option:

The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers.

I just tested this Fiddle in IE 6-10, Firefox 3.6-7, Opera 9-11, and Chrome, and every single browser correctly issued the HEAD request, so I wouldn't worry about that vague incompatibility statement. Of more concern is how your server responds.

Imminent

Answer 2

Javascript has no access to the filesystem (thankfully) so I'm afraid not.

Housebreaking

+1 and there is no more to say if it runs in a browser. But I think it is worth to mention that this must not be correct if the JS runs outside of a browser cause the specification allows filesystem activity – Sheehy

Sorry I don't think I made it clear I want to check the filesize of a file on the web. I have edited the question, hopefully this is clearer and now and this is possible? – Kinney

The comment from @Sheehy to your actual question is the best answer in that case I think – Housebreaking

Answer 3

The idea given by josh3736 is great. Only the code example he gave, refused to work in my browser (Chrome 20, Firefox 13, IE 8, Opera 12), for the reason, that I don't know.

Here is the one, that worked perfectly in my case:

jQuery.ajax
({
    cache: false,
    type: 'HEAD',
    url: 'myfile.js',
    success: function(d,r,xhr){alert('File size is ' + xhr.getResponseHeader('Content-Length') + ' bytes.')},
    error: function(xhr, desc, er){alert('ERROR: "' + xhr.responseText + '"')}
});

I want also to notice, that Apache on-board XAMPP server works just fine with HEAD request, but of course, when run on localhost, such request is blocked by a browser with error message: "Origin localhost is not allowed by Access-Control-Allow-Origin" (example from Chrome).

Topology

Answer 4

IE: If you set the Ie 'Document Mode' to 'Standards' you can use the simple javascript 'size' method to get the uploaded file's size.

Set the Ie 'Document Mode' to 'Standards':

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Than, use the 'size' javascript method to get the uploaded file's size:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

Other browsers: On all the other browsers you can use the javascript 'size' method without any problems.

Tymes

This will not work in IE9 or older, no matter what you meta tags you add. – Operator