JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="files" name="file" />
<br />
<input type="button" id="load_button" value="load file" />
<input type="button" id="file_size" value="display file size" />
<br />
<pre id="size"></pre>

<br/>
<br/>
File Contents:
<pre id="content"></pre>

CSS

input { margin: 5px }

JavaScript

var file = null;
var bytes = 0;
var start_bytes = 0;

$(document).ready(function() {

    $('#file_size').click(function() {
        processFile();
    });
    
    $('#load_button').click(function() {
        readBlob();
        if(file) {
            $('#size').text('file: ' + 
                              file.name + ' loaded in.');
        }
    });

});

function readBlob() {

  var files = document.getElementById('files').files;

  if (!files.length) {
    alert('Please select a file!');
    return;
  }

  file = files[0];
}

function processFile() {

  if(!file) { return; }

  var reader = new FileReader();

  reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { 
        $('#size').text('file is ' + file.size + ' bytes');
        $('#content').text(evt.target.result);
    }
  };

  reader.readAsText(file);
}