Problem z input files

Witam. Czy wie ktoś może dlaczego zwraca mi undefined?

<table class="table table-striped materials">
....
<input type="file" />
...
</table>

$('table.materials').on('change', 'input[type=file]', function(){

            var $this = $(this);

            console.log($this.files);

        })

W console.log wyświetla mi się po dodaniu pliku undefined. Wie ktoś dlaczego tak się dzieje?

var $this = $(this);
console.log($this.files);

tutaj w $this będziesz miał obiekt jQuery, a nie element DOM.
Po prostu wywal to $(....):

console.log(this.files);

to powinno zadziałać. Ew. jakby nie działało to użyj czegoś takiego

function (e) {
console.log(e.target.files);
}

albo to samo używając funkcji strzałkowej (arrow function (e) => {............... }).

w sumie ja zapomniałem już, co this robi w takiej sytuacji (bo wieki temu używałem this w eventach), ale pamiętam, że w jakiejś sytuacji zachowanie było dziwne w porównaniu do e.target

druga sprawa, niezwiązana z problemem: to polecałbym korzystać z const albo let, zamiast z var. Przy takim małym kawałku kodu to nie ma znaczenia, ale na dłuższą metę var jest mniej intuicyjny w użyciu i łatwiej zrobić sobie kuku.

Teraz działa. Dziękuję za pomoc i za wskazówki :) Pozdrawiam.