0

I'm trying to read the contents of a text file that I have stored on my (the host's) computer. When I encountered Javascript's FileReader I thought it was the perfect tool for the job. However, every example or question I see online shows how to use it to read files that are being uploaded from the user's computer (and thus they can use the event target to point toward which file they want to read) or they use AJAX (well, at least the XMLHttpRequest object) to read their own files.

So is it possible to read from local (to the host) files using FileReader? As I am researching this question it is making me wonder if I am going about this all wrong, but is the only way to use information from a text file on a webpage through AJAX? That seems wrong, it seems like there must be an easier way.

Guy
  • 979
  • 1
  • 11
  • 21
  • Okay, so can FileReader be used to download the file from the computer's memory, or does something else need to be done to do that? – Guy May 15 '18 at 03:18
  • No, a FileReader is just a reader. It doesn't download anything*. Well to be completely pedant, in case of a File stored on the user's HDD, the FileReader will trigger an IO access to the file, but it's not the FileReader by itself that does that, other APIs (like an AJAX POST) would trigger this too. – Kaiido May 15 '18 at 03:25

1 Answers1

1

A FileReader needs a Blob. Which is an object representing a binary file in memory.

From where this Blob comes from doesn't really matter, but you need to have it the browser's assigned memory so that FileReader can access it. FileReader won't download anything by itself.

So if you are talking about a file stored on your server, then the browser has to download it from there to the computer's memory. As to how this can be achieved, there are many ways the most common being AJAX, as long as the data is downloaded from the server and accessible, at least to build a Blob from it, then FileReader will be happy.

If you are talking about a file stored on the user's disk, then the browser needs to be granted the permission to access it and load it in its memory, this is usualy done using an <input type="file"> element, since for security reasons, browsers don't give access to the user disk otherwise.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Okay that makes sense. Is there an easier way to download a file from my server than AJAX, or is that the "best" way of doing it? Also, is using FileReader the typical way of reading/displaying files from the server, or is there a more common and better way of doing it? – Guy May 15 '18 at 03:32
  • Ah I now see it's a text file, so you don't need the FileReader. xhr.responseText will have your text data. And yes, it's probably the best way, while not the only one (e.g an iframe could also do) – Kaiido May 15 '18 at 03:37
  • Okay, perfect, thank you! It's too bad there isn't a simpler way to read this data without going through the whole rigmarole of instantiating an object and writing a callback function and all that but if that's what I have to do, let it be so! – Guy May 15 '18 at 03:44
  • 1
    Well with the [fetch API](https://developer.mozilla.org/en/docs/Web/API/Blob) it's been simplified to `fetch(url).then(resp => resp.text()).then(textData => ...)` – Kaiido May 15 '18 at 03:46