JSFiddle - React, Tailwind, and code Playground

by Fred Fourie

HTML

<input type="file" id="files" name="file" />Read bytes:
<span class="readBytesButtons">
  <button onclick="next()">next</button>
  <button onclick="loop()">loop</button>
</span>

<div id="byte_range"></div>
<div id="byte_content">
    </div

JavaScript

var reader = new FileReader();
var step = 4;
var stop = step;
var start = 0;
var file;

document.getElementById('files').addEventListener('change', load, true);

function load() {
    var files = document.getElementById('files').files;
    file = files[0];
    reader.onloadend = function (evt) {
        if (evt.target.readyState == FileReader.DONE) {

            var result = evt.target.result;



            var placemark = 0;
            var byte = reader.result;
            //console.log(byte);

            var dv = new DataView(result);
            var output = dv.getUint32(placemark);
            var hex = ' 0x' + ("00000000" + output.toString(16)).slice(-8);
            var str = longToString(output);
            console.log(output + " >> " + hex + " >> " + str);
            placemark += 4;

            document.getElementById('byte_content').textContent += output;
            document.getElementById('byte_range').textContent = ['Read bytes: ', start, ' - ', start + result.length,
                ' of ', file.size, ' byte file'].join('');

        }
    }
}

function next() {
    if (!file) {
        alert('Please select a file!');
        return;
    }
    var blob = file.slice(start, stop);
    //var placemark = 0, dv = new DataView(this.result), limit = dv.byteLength - 4, output;
    reader.readAsArrayBuffer(blob)
    //reader.readAsBinaryString(blob);


    start += step;
    stop = start + step;
}

function loop() {
    if (!file) {
        alert('Please select a file!');
        return;
    }
    if (start < file.size) {
        next();
        setTimeout(loop, 50);
    }
}


longToByteArray = function ( /*long*/ long) {
    // we want to represent the input as a 8-bytes array
    var byteArray = [0, 0, 0, 0, 0, 0, 0, 0];

    for (var index = 0; index < byteArray.length; index++) {
        var byte = long & 0xff;
        byteArray[index] = byte;
        long = (long - byte) / 256;
    }

    return byteArray;
};

byteArrayToLong = function (...