File size detect before upload issue

Question

Following is my code in which I am detecting filesize before upload but this document.getElementById('file').files[0] property is not supported by some browsers. All I wanna do is if on detecting browser doesnot support this property user gets alert of no else yes. Kindly let me know how to do this?

var filename = document.getElementById('file').files[0];
if (typeof filename === 'undefined' || filename === false)
{
alert('no');
}
     else if(filename && filename.size < 10240) { // 10485760 = 10 MB (this size is in bytes)
     alert('yes');
     $('#processing-modal').modal('show');
     return false;
     }

You can find more information here: http://stackoverflow.com/questions/7497404/get-file-size-before-uploading — Jeff Renaud, Dec 26 '13 at 22:37

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

You've got it almost. Check for the property beforehand:

var element = document.getElementById('file');
if (typeof element.files !== "undefined") {
    // and now your code
}

[edit] Or as suggested here:

if (typeof FileReader !== "undefined") {
    // your code here
}

edited May 23 '17 at 11:49

Community

1
1

answered Dec 26 '13 at 22:34

nietonfir

4,797
6
31
43

Jeff Voss · Answer 2 · 2013-12-26T22:44:39.997

1

Indeed, IE does not support the HTML5 file API (big surprise right?)

we can simply check the files property of the input - and thus provides us with a workaround for crappy IE.

if (!this.files) alert('message');

working example: http://jsfiddle.net/whiteb0x/nHBDp/

edited Dec 26 '13 at 22:44

answered Dec 26 '13 at 22:35

Jeff Voss

3,637
8
46
71

File size detect before upload issue

2 Answers2