JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="fileinput" />
<pre id="board" contenteditable = "true">
paste the chosen text file here
</pre>

JavaScript

function readSingleFile(evt) {

    var f = evt.target.files[0];
      console.log(f);
       if (!f) {
        alert("Failed to load file");
           return;
    } 
      if (f.name.indexOf('.txt') == -1) {
		    alert(f.name + " is not a valid text file.");
             return;     
                  }    
      
      var r = new FileReader();
      r.onload = function(e) { 
	      var contents = e.target.result;//.replace("\r\n","<br/>");
          contents = contents.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "contents: " + contents
        );
          document.getElementById('board').innerHTML = contents;
      }
      r.readAsText(f);
    
  }

  document.getElementById('fileinput').addEventListener('change', readSingleFile, false);