FileReader не загружает файл должным образом, используя AngularJS

Question

Я пытаюсь загрузить файл csv в AngularJS, поэтому я могу сделать некоторые манипуляции с содержимым. Это не совсем так, как я хочу. Чтобы проверить, правильно ли загружается, я загружаю его в текстовое поле для просмотра содержимого.

Когда я загружаю файл, он говорит, что он загружен правильно, но событие onload(), похоже, не срабатывает, пока я не загружу второй файл CSV, и в этом случае FIRST-файл отображается в текстовом поле.

HTML:

<div> 
    <input ng-model="csv" 
      onchange="angular.element(this).scope().fileChanged()" 
      type="file" accept=".csv" id="fileInput"/> 
</div> 
<br/> 
<div> 
    <textarea ng-model="csvFile" readonly="true" style="width:99%; height:500px" disabled></textarea> 
</div> 

JS:

$scope.fileChanged = function() { 

    $scope.$apply(function() { 
     var csvFileInput = document.getElementById('fileInput'); 
     var reader = new FileReader(); 
     var csvFile = csvFileInput.files[0]; 
     reader.onload = function(e) { 
      $scope.csvFile = reader.result; 
     }; 
     reader.readAsText(csvFile); 
    }); 
}; 

И когда я это в JSFiddle, файл не отображается в текстовое поле вообще. Я новичок в JSFiddle, поэтому я не знаю, почему это происходит.

Любая помощь вообще будет оценена по достоинству.

Answer 1

Упорядочивание несколько строк кода, надеюсь, комментарии достаточно пояснительная

$scope.fileChanged = function() { 

    // define reader 
    var reader = new FileReader(); 

    // A handler for the load event (just defining it, not executing it right now) 
    reader.onload = function(e) { 
     $scope.$apply(function() { 
      $scope.csvFile = reader.result; 
     }); 
    }; 

    // get <input> element and the selected file 
    var csvFileInput = document.getElementById('fileInput');  
    var csvFile = csvFileInput.files[0]; 

    // use reader to read the selected file 
    // when read operation is successfully finished the load event is triggered 
    // and handled by our reader.onload function 
    reader.readAsText(csvFile); 
}; 

Ссылка: FileReader at MDN

Answer 2

Это лишь незначительное улучшение в HTML:

<input type="file" onchange="angular.element(this).scope().file_changed(this)"/> 
<textarea cols="75" rows="15">{{ dataFile }}</textarea> 

и контроллер:

.controller('MyCtrl', ['$scope', function($scope) { 
    var vm = $scope; 

    vm.file_changed = function(element){ 
     var dataFile = element.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(e){ 
      vm.$apply(function(){ 
       vm.dataFile = reader.result; 
      }); 
     }; 
     reader.readAsText(dataFile); 
    }; 
}]); 

Ref