JSFiddle - React, Tailwind, and code Playground

by Mark Hendricks

HTML

<div>
			<span id="fileIndicator">Select text file:</span> 
      <button onclick="selectFile();" class="button" title="selectFile" id="selectFile">Select File</button><input type="file" id="fileInput">
		</div>
		<textarea id="content2" cols="40" rows="10"></textarea>

CSS

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  background: #333;
}

#fileInput {
  display: none;
}

#content2 {
  margin-top: 2em;
  overflow-x: auto;
}

JavaScript

function selectFile() {
		var fileInput = document.getElementById('fileInput');
		var content2 = document.getElementById('content2');
		var selectFile = document.getElementById('selectFile');
    var fileIndicator = document.getElementById('fileIndicator');
    fileInput.click();
		fileInput.onchange = () => {
			var selectedFile = fileInput.files[0];
      var fname = fileInput.files[0].name;
      //console.log(selectedFile)
			var textType = /text.*/;
			if (selectedFile.type.match(textType)) {
				var fileContent = new FileReader();
				fileContent.onload = function() {
					content2.value = fileContent.result;
				}
				fileContent.readAsText(selectedFile);
        fileIndicator.innerHTML = fname;
			} else {
				content2.value = "<<< File Not Supported >>>";
			}
		}
  }