FileReader lädt die Datei nicht korrekt mit AngularJS

Question

Ich versuche eine CSV-Datei in AngularJS zu laden, damit ich den Inhalt manipulieren kann. Es funktioniert nicht ganz so, wie ich es möchte. Um zu testen, ob es korrekt geladen wird, lade ich es in ein Textfeld, um den Inhalt anzuzeigen.

Wenn ich die Datei lade, heißt es, dass sie korrekt geladen ist, aber das onload() - Ereignis scheint nicht zu zünden, bis ich eine zweite CSV-Datei lade. In diesem Fall wird die FIRST-Datei im Textfeld angezeigt.

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

Und wenn ich dies in JSFiddle setzen, wird die Datei nicht in das Textfeld überhaupt erscheinen. Ich bin neu mit JSFiddle, also weiß ich nicht, warum das passiert.

Irgendwelche Hilfe würde geschätzt werden.

Answer 1

einige Linien des Codes neu anordnen, hoffen, dass die Kommentare sind Erläuterungs genug

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

Referenz: FileReader at MDN

Answer 2

Dies ist nur eine kleine Verbesserung in HTML:

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

und 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