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;
    while (true) {
      const chunk = await reader.read();
      if (chunk.done) break;
      // 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)}%)`,
      });
    }
  }
});