Using FileReader & DOMParser in AngularJS

Question

I have a user uploaded file using AngularJS and like to manipulate the file contents using XML. However, I have a difficulty in the DOMParser recognising the text file.

index.html

  <div ng-controller = "myCtrl">
      <input type="file" file-model="myFile"/>
      <button ng-click="uploadFile()">upload me</button>
  </div>

app.js

 myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){

     $scope.uploadFile = function(){
     var file = $scope.myFile;

     reader = new FileReader();
     reader.onload = function() {
     showout.value = this.result;
     txtFile = showout.value;

     console.log(txtFile);
     };

    reader.readAsText(file);
    parser=new DOMParser();

    xmldoc = parser.parseFromString(txtFile,"text/xml"); 
    console.log(xmlDoc);

In this example, the txtFile is correctly printed to the console, within the Reader.onLoad. However, xmlDoc shows as undefined.

I should I be referencing the file and converting it so that it can be read by DOMParser?

NOTE: if I replace txtFile in ... xmldoc = parser.parseFromString("bob","text/xml"), the code works.

Thanks in advance.

Answer 1

I know this is old but I want drop a working example here in case people still come across this

var parser = new DOMParser();
var reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onload = function (evt) {
    var data = parser.parseFromString(evt.target.result, "application/xml");
    console.log(data);
};