How to execute a loop in a file, byte by byte, in JavaScript?

Question

I need help to understand how a file is accessed in JavaScript to do some operations on it.

I would like to skip the byte byte file using JavaScript. I can already choose which file I would like to read. And I can read the given byte of the file.

I found this good example of how to read a file fragment here:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Here is the code snippet I'm playing with:

<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>entire file</button> </span> <div id="byte_range"></div> <div id="byte_content"></div> <script> 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.readAsBinaryString(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> 

Now I would like to skip the file, four bytes at a time, but cannot figure out how to do this. The reader does not seem to allow me to read more than once.

As soon as I can read from a file more than once, I should be able to do through it quite easily with something like this:

 while( placemark != fileSize-4 ){ output = file.slice(placemark, placemark + 4); console.log(output); placemark = placemark + 5; } 

Thanks in advance! Here is a link to jsFiddle and plnkr version

Answer 1

I'm not sure if this is what you wanted, but maybe it can help, and anyway I had fun. I tried installing reader and file vars as global:

 var reader = new FileReader(), step = 4, stop = step, start = 0, 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; document.getElementById('byte_content').textContent += result; 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); 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); } } 

 <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> 

Answer 2

I would read blob as an ArrayBuffer and use a DataView to read data

  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(); reader.onload = function(evt) { var placemark = 0, dv = new DataView(this.result), limit = dv.byteLength - 4, output; while( placemark <= limit ){ output = dv.getUint32(placemark); console.log(' 0x'+("00000000" + output.toString(16)).slice(-8)); placemark += 4; } }; var blob = file.slice(start, stop + 1); reader.readAsArrayBuffer(blob); } 

 <input type="file" id="files" onchange="readBlob(0, 100)"> 

Answer 3

In the onload FileReader handler, convert the result to a string ( toString() ), then read 4 characters at a time using the slice method.

 var contents = null; reader.onload = function(){ contents = reader.result.toString(); } var startByte = 0; // read 4 bytes at a time var step = 4; // actual reading (doesn't alter the contents object) console.log(contents.slice(startByte, step)) // update the next startByte position startByte += step;