Javascript error on IE8 and IE9

Question

I'm getting 'this.0.files.0' is null or not an object error on IE8 and IE9 and Chrome and Mozila don't throw any errors .

$(function()) {
    var fileType = ['txt' , 'csv' ];
    $('.input_file').find('input [type = "file" ]').live('change', function (e)) {
        $this = $(this) 
        var ext = $this.val() === " " ? " " : this.value.match(/\.(.+)$/)[1];
        if($this.val()) {
            $this.parent().find('label').text.($this[0].files[0].name)  
        }
    }
}

Im not sure why above code throws a javascript error 'this.0.files.0' is null or not an object

Answer 1

IE < 10 has no support for the html5 fileapi, i.e. no HTMLInputElement.FileList you'll have to parse HTMLInputElement.value to get the file name.

Answer 2

To get the filename you can do:

var filename = $this[0].files ? $this[0].files[0].name : $this[0].value.match(/[^\/\\]*$/)[0];

or simply:

$this[0].value.match(/[^\/\\]*$/)[0];

Full code:

$(function()) {
    var fileType = ['txt' , 'csv' ];
    $('.input_file').find('input [type = "file" ]').live('change', function (e)) {
        $this = $(this) 
        var ext = $this.val() === " " ? " " : this.value.match(/\.(.+)$/)[1];
        if ($this.val()) {
            var filename = $this[0].files ? $this[0].files[0].name : $this[0].value.match(/[^\/\\]*$/)[0];
            $this.parent().find('label').text.($this[0].files[0].name);
        }
    }
}