How can I read a file from an HTML input with js-xlsx?
<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>