title: Using FileReader & DOMParser in AngularJS
body: <p>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.</p>
  
  <p>index.html</p>
  
  <pre><code>  &lt;div ng-controller = "myCtrl"&gt;
        &lt;input type="file" file-model="myFile"/&gt;
        &lt;button ng-click="uploadFile()"&gt;upload me&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code> 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);
  </code></pre>
  
  <p>In this example, the txtFile is correctly printed to the console, within the Reader.onLoad. However, xmlDoc shows as undefined.</p>
  
  <p>I should I be referencing the file and converting it so that it can be read by DOMParser? </p>
  
  <p>NOTE: if I replace txtFile in ... xmldoc = parser.parseFromString("bob","text/xml"), the code works.</p>
  
  <p>Thanks in advance.</p>