Again: how can I read a file using javascript

Question

I could not find out why this part of my code doesn't work:

var loc = window.location.pathname;
var dir = loc.substring(0, loc.lastIndexOf('/'));
var FilePath = dir + "/" + FileName;
var file = new File("FilePath");
var reader = new FileReader();
reader.onload = function(e) {FileText = reader.result;}
reader.readAsText(file); 
alert (FileText);

The intention is, I think, clear: FilePath contains the filename of a file (passed via parameter FileName) containing logging data (a plain ASCII text file, with one line per log entry), the file is located in the same directory as the web page is (loc), and I want to embed the text into my html document somewhere further down the code.

Since the logged lines are of different kinds (e.g. errors, warning, other blabla ...) each line needs to be parsed and processed.

I intended to split FileText into an array, and loop through it. I cannot, however, get readastext to work. Though, according to FireFox debugger, FilePath does contain the correct string, I get the NS_ERROR_FAILURE, which I, according to the sparse documentation I found about it, must consider to be the 'zillionst stupid way to say "File not found".

I found tons of other posts from people messing with the file API, and tons of snippets taken from the mozilla docs which don't help me out. I read that there are maybe other ways to read a file, e.g. through Ajax, JQuery ... but before I go that way ... is it really, really absolutely impossible to accomplish what I want using just plain JavaScript, and if it is possible, who can provide a code snippet?

Thanks very much,

Armin.

You should be able to see in the Developer Tools what did the actual request for the file look like. That could help you tune the way you set up your FIleReader. (I.e. you should see what was the actual requested URL, and what was the response to this request.) — Jaroslav Záruba, Jan 16 '15 at 10:48
it could be that your browser don't have the permission to read the file? — JimboSlice, Jan 16 '15 at 10:50
Where are you running your JavaScript? You can only pass a file path to `File` if you're in a privileged environment. (And Ajax is as plain JS as File is, and jQuery is also plain JS as it is just helper functions written (by other people) in JS). — Quentin, Jan 16 '15 at 10:51

JLRishe · Answer 1 · 2015-01-16T11:01:08.673

2

You have quotes around "FilePath":

var file = new File("FilePath");

This means it's going to try to load a file with the path "FilePath".

Pretty sure this is what you want:

var file = new File(FilePath);

On the other hand, Quentin is absolutely right. You're not going to be able to access local files if this code is running in a web page.

edited Jan 16 '15 at 11:01

answered Jan 16 '15 at 10:54

JLRishe

99,490
19
131
169

thanks for the clarification, but, as you already anticipated, this was not the problem ... – Armin Jan 26 '15 at 01:19

score 0 · Answer 2 · answered Jan 16 '15 at 13:18

Since you are using window.location.pathname i assume that you are in a browser and want to use that code to "navigate" to files on the server based on the URL path.

I think your whole approach is wrong, and it would be a security issue to have something like that possible.

The File API can be used strictly on files selected by the user, and not on any file. The MDN description is self-explanatory:

Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files, then read the contents of those files. This selection can be done by either using an HTML element, or by drag and drop.

Yes, you can specify a path to any file in the File constructor method, but that doesn't mean you can access any file. Another excerpt from MDN:

This only works from privileged code, so web content can't do it. This protects users from the inherent security risks associated with allowing web content free access to the contents of their disks. If you pass a path to the File constructor from unprivileged code (such as web content), an exception will be thrown.

Hm, what is the "correct" approach if I need to read a file from the server via Javascript then, given the file is located in the same directory where the html and js files come from? — Armin, Jan 26 '15 at 01:30
@Armin If you want to read a file from the server and show it in your page (setting aside the option of `iframe`s for the moment), you need to use Ajax. Ajax _is_ "just plain JavaScript", although some libraries provide helper functionality to make it easier to use. — JLRishe, Jan 26 '15 at 05:13
Gotcha! that was the one I was looking for. The XMLHttpRequest object delivered the file like I wanted, with minimal complaints (file is not well formatted), but nevertheless I get the file contents. Thanks very muxh! — Armin, Jan 26 '15 at 18:11

score 0 · Accepted Answer · answered Jan 26 '15 at 18:20

This code did the trick:

var objXMLhttp = new XMLHttpRequest()
objXMLhttp.open("GET",strFileName,true);
objXMLhttp.send();

and, in addition, an objXMLhttp.onreadystatechange=function() ... event handler must be implemented, which is the code acutally receiving the data, like so:

objXMLhttp.onreadystatechange=function()
  {
  if (objXMLhttp.readyState==4 && objXMLhttp.status==200)
    {
    var arrContents = objXMLhttp.responseText.split("\n"); // gotcha!
    ....
    }
  }

score 0 · Answer 4 · answered Feb 04 '15 at 08:40

Easy win is to do an ajax request for the path...you should have your page that contains the js and files served by a web server. Any other way needs other priveleges and if you were to get files from a users computer without an uploader or anything like that would be a security breach

Again: how can I read a file using javascript

4 Answers4