0

My code is fairly standard:

  // #csvfile is an input element with type="file"
  var selectedFile = document.getElementById("csvfile").files[0];
  var file = window.URL.createObjectURL(selectedFile);
  fetch(file)
    .then(response => response.text())
    .then(text => {...})

It works reliably on all browsers for small files. However, in Chrome and Edge response.text() returns an empty string "" when I try to load a 671 MB CSV file. Firefox has no issue loading this file using the same code.

I've tried changing the fetch options (mode: "same-origin" and headers: {"Content-Type": "text/plain"}). Honestly, I'm just scrambling here because I don't know enough about JavaScript or the Fetch API to understand what else to try.

My intuition is that it has something to do with Firefox waiting an appropriate amount of time to resolve the promise in full whereas Edge and Chrome are terminating before the full stream is read into memory. I would appreciate some hints about how to test this theory since I'm fresh to the concept of promises in JavaScript.

Vijchti
  • 526
  • 6
  • 19
  • Why are you using `fetch()` and not the `FileReader` API? Why are you trying to read so much data in the browser? Surely this is something you should do in a more fitting environment – Phil Jun 28 '23 at 23:44
  • 1
    Does this answer your question? [Reading file contents on the client-side in javascript in various browsers](https://stackoverflow.com/q/750032/283366) – Phil Jun 28 '23 at 23:46
  • use developers mode if you're linking the script to a HTML page. – Colorado Akpan Jun 28 '23 at 23:49
  • No, unfortunately `FileReader` performs the same as `fetch()`. It works fine on small files. On large files it works in Firefox but fails in Chrome and Edge. It also doesn't trigger the `onerror()` function. – Vijchti Jun 29 '23 at 00:28
  • Regarding choosing the right environment: I believe this is the right environment, but I could be wrong. I need 1) ease of code deployment without setting up something like node or python on user's computers or setting up a server somewhere, 2) good visualization of data, 3) user interactivity. That's a case for HTML+JS if I've ever seen one. But I'm open to alternate suggestions... – Vijchti Jun 29 '23 at 00:34
  • 1
    I think I've found a workaround by using `Blob.slice()` to split the file into chunks. The limit on Edge and Chrome seems to be 512MB. – Vijchti Jun 29 '23 at 00:47
  • same problem, trying to read large obj files into webgl application, works perfectly fine in firefox but fails in edge, how do you use blob.slice() @Vijchti – Markus Jul 03 '23 at 19:32
  • @Markus, any File object returned by a form element is also a Blob object. It's one API built on top of another. So just use `file.slice(start, end)` and make sure that `(end - start) < (512 * 1024 * 1024)`. – Vijchti Jul 03 '23 at 19:56

0 Answers0