[Help - Javascript] Reading files with FileAPI and Javascript Hashing

[Atlantisman]

Hello, i have been stuck on this problem for quite a while and have finally decided to ask for some help. I am trying to read files into javascript and have the browser hash the file client-side. The problem appears to be where i am reading the file in. i have tested and confirmed the hashing function to be functional, but everytime i read a file into it i don't get the proper hash returned.
Here is the code:

<h1>JavaScript MD5 Demo</h1><style>  #byte_content {    margin: 5px 0;    max-height: 100px;    overflow-y: auto;    overflow-x: hidden;  }  #byte_range { margin-top: 5px; }</style><input type="file" id="files" name="file" /> Read bytes:<span class="readBytesButtons">  <button data-startbyte="0" data-endbyte="4">1-5</button>  <button data-startbyte="5" data-endbyte="14">6-15</button>  <button data-startbyte="6" data-endbyte="7">7-8</button>  <button id="go">entire file</button></span><div id="byte_range"></div><div id="byte_content"></div><script>var files = document.getElementById('files').files;  function readBlob(opt_startByte, opt_stopByte) {    var files = document.getElementById('files').files;    if (!files.length) {      alert('Please select a file!');      return;    }    var file = files[0];    var start = parseInt(opt_startByte) || 0;    var stop = parseInt(opt_stopByte) || file.size - 1;    var reader = new FileReader();    // If we use onloadend, we need to check the readyState.    reader.onloadend = function(evt) {      if (evt.target.readyState == FileReader.DONE) { // DONE == 2        document.getElementById('byte_content').textContent = evt.target.result;        document.getElementById('byte_range').textContent =            ['Read bytes: ', start + 1, ' - ', stop + 1,             ' of ', file.size, ' byte file'].join('');      }    };    var blob = file.slice(start, stop + 1);    reader.readAsArrayBuffer(blob);    //$('#hash').val(md5(files[0]));    $('#hash').val(md5(blob));  }  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {    if (evt.target.tagName.toLowerCase() == 'button') {      var startByte = evt.target.getAttribute('data-startbyte');      var endByte = evt.target.getAttribute('data-endbyte');      readBlob(startByte, endByte);    }  }, false);</script><input id="hash" size="50">

Does anyone have any ideas what i am doing wrong here? The actual md5 function is part of the CryptoJS library.
Basically, i am trying to make something similar to this website: https://md5file.com/calculator[1] , but their code is very hard to read, by design, id imagine.Thank you.