JSFiddle - React, Tailwind, and code Playground

by João Felipe

HTML

<div id="page-wrapper">

		<h1>File Reader</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%;
  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;
}

img {
  max-width: 100%;
}

#fileDisplayArea {
  margin-top: 2em;
  width: 100%;
  overflow-x: auto;
}
td{
    border:1px solid black;
    padding:5px;
}

JavaScript

var fileInput = document.getElementById('fileInput');
		var fileDisplayArea = document.getElementById('fileDisplayArea');

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

				var reader = new FileReader();

				reader.onload = function(e) {
                var data = reader.result; 
                data = data.replace(/\s/, " #"); 
                data = data.replace(/([0-9]\s)/g, "$1#"); 
                var lines = data.split("#"), 
                    output = [],
                    linesArray = [],
                    i;

                for (i = 0; i < lines.length; i++)
    output.push("<tr><td>" + lines[i].slice(0,-1).split("|").join("</td><td>") + "</td></tr>");
output = "<table>" + output.join("") + "</table>";
                    
                fileDisplayArea.innerHTML = output;

      

                }

				reader.readAsBinaryString(file.slice(0, 10 * 1024 * 1024));	
				
			
		});