JSFiddle - React, Tailwind, and code Playground

HTML

<form id="fileform">
  <div id="filepicker">
    <input id="files" type="file" multiple="" name="files[]">
    <output id="list"></output>
  </div>
  <div id="submitter">
    <input id="read-file" type="button" value="read-file">
    <input id="reset-button" type="reset" value="Reset">
  </div>
</form>
<div id="reader-results">
</div>

JavaScript

$(document).ready(
  function() {
    $("#read-file").on("click", readSingleFile);
    function readSingleFile(event) {
      var file = $('#files')[0].files[0];
      if (file) {
	var reader = new FileReader();
	reader.onload = function(file) {
      var result_length = reader.result.length
      var result_contents = reader.result
        $("#reader-results").append(
            "<p>Length: " + result_length + "</p>"
        );
        $("#reader-results").append(
            "<p>Content: " + result_contents + "</p>"
            );
        var blob = new Blob([result_contents])
        $("#reader-results").append(
            "<p>Blob Size: " + blob.size + "</p>"
            );
	};
	reader.onerror = function(event) {
	  console.error("File could not be read! Code "+ event.target.error.code);
	};
	reader.readAsBinaryString(file);
      }
    }
  }
);