JSFiddle - React, Tailwind, and code Playground

by rbyers

HTML

Pick a relatively big file and see how the "process" part of the message is never updated<br>
<input type="file" id="el">
<code id="out"></code>

JavaScript

const el = document.getElementById('el');
const out = document.getElementById('out');
el.addEventListener('change', async () => {
  const file = el.files?.[0];
  if (file) {
    const reader = file.stream().getReader();
    out.innerText = JSON.stringify({ fileSize: file.size });
    let received = 0;
    async function update() {
      const chunk = await reader.read();
      // Lock for 100ms
			t1 = performance.now();
      while(performance.now() - t1 < 100) {}
      received += chunk.value.byteLength;
      out.innerText = JSON.stringify({
        fileSize: file.size,
        process: `${received} / ${file.size} (${((received / file.size) * 100).toFixed(2)}%)`,
      });
      if (!chunk.done) setTimeout(update, 0);
    }
    update();
  }
});