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

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

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

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, поэтому не знаю, почему это происходит.

Любая помощь будет признательна.

2 5
javascript angularjs html filereader

2 ответа:

Переупорядочивая некоторые строки кода, надеюсь, что комментарии достаточно поясняют

$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 в MDN

13

Это всего лишь небольшое улучшение в 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

1