FileReader non sta caricando il file correttamente utilizzando AngularJS

Question

Sto provando a caricare un file csv in AngularJS in modo da poter eseguire alcune manipolazioni sui contenuti. Non funziona esattamente come voglio. Per verificare se sta caricando correttamente, lo sto caricando in una textarea per visualizzare il contenuto.

Quando carico il file, si dice che sia caricata correttamente ma l'evento onload() non sembra essere la cottura fino a quando si carica un secondo file CSV, nel qual caso viene visualizzato il primo file nella textarea.

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); 
    }); 
}; 

E quando ho messo questo in JSFiddle, il file non viene visualizzata nella textarea a tutti. Sono nuovo con JSFiddle quindi non so perché sta succedendo.

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

Riordinamento alcune linee di codice, sperano i commenti sono abbastanza esplicativi

$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); 
}; 

Riferimento: FileReader at MDN

Answer 2

Questo è solo un piccolo miglioramento in HTML:

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

e il controller:

.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