FileReader() onload function not firing - angularjs

Question

I know this is a duplicate but none of the answers have helped so far..
I have this directive:
app.directive('fileReader', function () {
return {
scope: {
fileReader: "="
},
link: function (scope, element) {
$(element).on('change', function (changeEvent) {
var files = changeEvent.target.files;
if (files.length) {
var reader = new FileReader();
console.log('reader created');
reader.onload = function (e) {
console.log('onload hit');
};
}
});
}
};
})
And this DOM element linked to the directive:
<input type="file" id="file" file-reader="fileContent"/>
When I select a file for my input, my console prints out reader created, but never prints onload hit. I can not figure out how to properly fire off my onload function. What am I doing wrong here?

Answer 1

### Directive ###
app.directive('fileReader', ['$rootScope', function($rootScope) {
return {
scope: {
fileReader:"="
},
link: function(scope, element) {
$(element).on('change', function(changeEvent) {
var files = changeEvent.target.files;
if (files.length) {
$rootScope.uploadedFileName = files[0].name;
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
scope.$apply(function () {
scope.fileReader = contents;
$rootScope.uploadedFileName = files[0].name;
});
};
r.readAsText(files[0]);
}
});
}
};
}]);
### HTML ###
<input type="file" accept=".csv" id="myFile" file-reader="fileContent"/>