JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-wrapper">

        <h1>Stacked Chart Generator</h1>
        <div>
            Select a text file:
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"></pre>
</div>

CSS

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;
  }

JavaScript

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'));
            fileDisplayArea.innerHTML = reader.result;
        }
        reader.readAsText(file)
        alert("this runs");
    });
}