90

I'm trying to ride the HTML5 wave but I'm facing a small issue. Before HTML5 we were checking the file size with flash but now the trend is to avoid using flash in web apps. Is there any way to check the file size in the client side using HTML5?

Johann
  • 4,107
  • 3
  • 40
  • 39
Khaled Musaied
  • 2,513
  • 3
  • 25
  • 38

6 Answers6

136

This works. Place it inside an event listener for when the input changes.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}
Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
Abdullah Jibaly
  • 53,220
  • 42
  • 124
  • 197
  • 1
    It works to me in IE 10, Mozilla FFx and Chrome. Thanks! – Rahnzo Dec 10 '14 at 13:36
  • works fine, you just aren't using it correctly; log on the input's onchange event and you'll be fine. – dandavis Jul 18 '15 at 20:34
  • @dandavis I'm using the code in the answer. If the code works fine, why do I need to change it? – Chuck Le Butt Jul 20 '15 at 16:28
  • @Chuck: but you said it doesn't work fine, that it's "Not working for me in Chrome"... – dandavis Jul 20 '15 at 19:37
  • 1
    @Chuck your example doesn't work because you try to read the file list on page load, before selecting any file. – approxiblue Jul 21 '15 at 03:02
  • @dandavis I was quoting you, Dan. It doesn't work fine, but you insist it does. If it "works fine" why do you also say that I'm "not using it correctly" when I've copied it verbatim. Simple point to make, I think. – Chuck Le Butt Jul 21 '15 at 10:09
  • 1
    @Chuck: ok, it does work just fine, and you did paste it ok, but it alone is not enough. if you ran it in the console after populating the file, you would see it working fine. for apps, console is no good, so you should put the code in an event that runs after the input is populated, so it will work as expected. sorry for the misunderstanding. – dandavis Jul 21 '15 at 17:37
39

The accepted answer is actually correct, but you need to bind it to a event listener so that it would update when ever the file input is changed.

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

If you are using jQuery library then the following code may come handy

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

Given that the conversion of the fileSize to display in which ever metric is up to you.

Ammadu
  • 1,675
  • 15
  • 17
  • Your jQuery example doesn't work. You don't appear to be able to use jQuery with `.files`: https://jsfiddle.net/edxvo4wa/ (I discovered this myself when I was coming up with a solution -- it works if you change it to `document.getElementById`). – Chuck Le Butt Jul 21 '15 at 10:22
  • 1
    @Chuck sorry for the error there, I have updated my answer with the working one – Ammadu Jul 21 '15 at 10:28
9

The HTML5 file API supports to check the file size.

Read this article to get more info about file api

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="fileInput" />


var size = document.getElementById("fileInput").files[0].size;

similarly file API gives name and type.

Udo E.
  • 2,665
  • 2
  • 21
  • 33
kongaraju
  • 9,344
  • 11
  • 55
  • 78
4

Personally, I would opt for this format:

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }
Alexander Leon
  • 61
  • 1
  • 7
  • 1
    I believe 500kb would actually be 500 * 1024. Not a big deal, but end user with a 500,000b file would see it as 488kb and refused. And here starts the big frustration – Apolo Dec 03 '18 at 17:30
2

"no simple, cross-browser solution to achieve this" : Detecting file upload size on the client side?

Community
  • 1
  • 1
Julien
  • 9,312
  • 10
  • 63
  • 86
  • 11
    Add server size validation as well, but you might as well save those with modern browsers the pain and check it client side as well. – El Yobo Mar 21 '11 at 06:25
0

I prefer to do the check (validation), when the form is about to be submitted. That way, I don't have to perform an extra check to know if a file was selected, because the size check happens alongside other html5 validation attributes (e.g. required).

$('#fileForm').on('submit',function() {
    // file will not submit if is greater than 5MB
    if($('#fileInput').prop('files')[0].size > 5*1024*1024){ 
        alert('Max file size is 5MB');
        return false;
    }
});
Udo E.
  • 2,665
  • 2
  • 21
  • 33