Code won't run and does not show any errors either

Question

I'm completely stumped as to why my code won't run. In console there are no errors. EDIT: added more code

<!DOCTYPE html>
  <meta charset="utf-8">
  <style>
    html {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 100%;
      font color: white;
      background: #333;
    }

    #page-wrapper {
      width: 600px;
      background: #FFF;
      padding: 1em;
      margin: 1em auto;
      min-height: 300px;
      border-top: 5px solid #69c773;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  }

  h1 {
    margin-top: 0;
  }

  #fileDisplayArea {
    margin-top: 2em;
    width: 100%;
    overflow-x: auto;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 960px;
    height: 500px;
    position: relative;
  }
</style>

<body>
    <div id="page-wrapper">

        <h1>File to Matrix</h1>
        <div>
            Select a text file:
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"><pre>

    </div>
</body>
<script>

    var data = []; //will hold data from file

    window.onload = function() {
        var fileInput = document.getElementById('fileInput');
        var fileDisplayArea = document.getElementById('fileDisplayArea');

        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];

            var reader = new FileReader();
            var str = '';
            reader.onload = function(e) {
                str = reader.result;
                alert("does this even ever run?");
                var temp = str.split('\n');
                for(var i = 0; i < temp.length; i++)
                    data.push(temp[i].split('\t'));
            }
            alert("this runs");
        });
    }
</script>

Trying to read in a .tsv selected by the user, and convert the data into a matrix.
The line reader.onload = function(e){} won't run, as the alert never pops up, and data is still blank.

Any help is appreciated.

Thanks

This site might help: http://www.javascripture.com/FileReader — E. Mourits, Jul 18 '16 at 20:03
You need to create a [minimal, complete, verifiable example](http://stackoverflow.com/help/mcve): the minimum necessary to get the same error as you. A good start would be (though not necessarily limited to) the HTML. — rockerest, Jul 18 '16 at 20:06
So what is that fileReader supposed to read, you're not passing anything to it, so there's nothing to load, hence no `onload` event? — adeneo, Jul 18 '16 at 20:06
To be even clearer, you probably want something like `reader.readAsDataURL(file);` below the `onload()` function. — adeneo, Jul 18 '16 at 20:07
@adeneo what should i pass in? I want the user to choose the file — averagebegginnercoder, Jul 18 '16 at 20:11
@adeneo alright I added some more of my code, and the error is reproducible now — averagebegginnercoder, Jul 18 '16 at 20:15
The very first comment is a link that answers your question. What more do you want? — Jared Smith, Jul 18 '16 at 20:23
Possible duplicate of [HTML5 FileReader how to return result?](http://stackoverflow.com/questions/11829537/html5-filereader-how-to-return-result) — Heretic Monkey, Jul 18 '16 at 20:25
@MikeMcCaughan thanks mike, that seems to work but I have a question - how do I store the file info into a variable? This may seem silly but I'm new to js and don't know a lot. The "$('#output_field').text(e.target.result);" line is the one that prints out the file information, but I tried to store that into a variable and alert it, but it didn't work (alerted as [object Object] instead of the actual file info) — averagebegginnercoder, Jul 18 '16 at 20:34
I suggest learning about debugging with the browser you are using. There are a lot of articles on the web about this. — Heretic Monkey, Jul 18 '16 at 20:40

score 0 · Accepted Answer · answered Jul 18 '16 at 20:27

You're just missing

reader.readAsText(file);

To tell the reader to actually read the selected file.

Working example: https://jsfiddle.net/zck7z3aa/2/

I also added fileDisplayArea.innerHTML = reader.result; to show the content of the file in the PRE tag.

Code won't run and does not show any errors either

1 Answers1