title: How can I read a file from an HTML input with js-xlsx?
body: <p>I have an angular application where I am trying to read and parse a .xlsx file resorting to the js-xlsx JavaScript library. However I am having trouble opening the file on the JavaScript side.</p>
  
  <p>On my html I have a simple input of type file that opens a file chooser where the user can choose an appropriate file. I had trouble using angular directives to send the file to a function on my controller, because ng-change would not update when the user chose a file only when the button of the input is pressed. I ended up having to resort to a mixture of plain old JavaScript together with some angular by adding 'onchange="angular.element(this).scope().handleFile(this)"' to my input.</p>
  
  <p>add-quotation.html:</p>
  
  <pre><code>&lt;div class="container-fluid" ng-controller="addQuotationController"&gt;
  ...  
  &lt;input type="file" id="file" class="" onchange="angular.element(this).scope().handleFile(this)"&gt;
  ...
  &lt;/div&gt;
  </code></pre>
  
  <p>This solved my problem of not being able to send the file from the HTML to the JavaScript side of things. However, I'm having trouble opening the file. I have tried many examples from the official documentation but I haven't succeeded in making it work. This is my current code:</p>
  
  <p>add-quotation.component.js:</p>
  
  <pre><code>$scope.handleFile = function(e) {
      var files = e.target.files;
      var i,f;
      for (i = 0, f = files[i]; i != files.length; ++i) {
          var reader = new FileReader();
          var name = f.name;
          reader.onload = function(e) {
              var data = e.target.result;
  
              var workbook = XLSX.read(data, {type: 'binary'});
  
              /* DO SOMETHING WITH workbook HERE */
          };
          reader.readAsBinaryString(f);
      }
  }
  </code></pre>
  
  <p>I tried to debug and found out that the file does indeed get into the method but then an exception occurs when trying to access "e.target.files;"</p>
  
  <p><a href="https://i.stack.imgur.com/nNfRT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nNfRT.png" alt="getting into the function"></a></p>
  
  <p><a href="https://i.stack.imgur.com/gdda9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gdda9.png" alt="trying to access e.target.files"></a></p>
  
  <p>I'm completely lost in how to fix this and the examples that I've seen are of no help. What am I doing wrong?</p>