Javascript, FileReader vs XMLHttpRequest for reading a local file?

Question

I'm trying to read a local file with javascript and a Google Chrome App (it may not be possible through Chrome I think), but I can't see what's the latest approach to the problem.

I can read it with the following code:

obj.read = function() {
    return new Promise(function(resolve){
        var xmlhttp = new XMLHttpRequest();
        var file_path = 'file_name.xml';
        xmlhttp.open('GET', file_path, true);
        xmlhttp.send(null);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                let xml = xmlhttp.responseText;
                var parser = new DOMParser();
                var xmlDoc = parser.parseFromString(xml, "text/xml");
                console.log(xml);
                console.log(xmlDoc);
                resolve(xmlDoc);
            }
        }
    });
};

But it is like I should be using something like

var reader = new FileReader();
reader.onload = (function(theFile) {
    return function(e) {
        console.log(e.target.result);
    };
})(file_path);

var file_path = 'file_name.xml';
var file_parts = [
    new Blob(['you construct a file...'],{type: 'text/plain'}), 
    'Same way as you do with blob',
    new Uint16Array([33])
];
var file = new File(file_parts, file_path);
reader.readAsText(file);

(copied from https://stackoverflow.com/a/24495213/826815) (I'm having a hard time finding literature on this topic)

So, what's the way to do it?

A few things are not clear: 1) "I can read it with the following code" - so why is that not a good approach? Why are you trying to change it? 2) What exactly do you mean by a "local file"? Your examples are for a file inside your app's package. Is that all you need? — Xan, Sep 29 '16 at 10:29
1) that's the question, it is "the" good approach? is there any "second" approach? if so, which one should I choose? 2) by local file I mean a file located in the same folder where the App is located, but since I haven't yet packaged it, I can only guess it will be in the app's package — GWorking, Sep 29 '16 at 10:31

score 3 · Accepted Answer · edited May 23 '17 at 12:19

The first approach (XMLHttpRequest for a file in the package) is perfectly valid and likely to be easier if all you need is the whole file.

What you call a "second approach" is lifted from a question about instantiating a File object, not reading an actual file. This would not allow you to read an existing file, just create a "virtual" file that can be used in DOM forms.

There's the whole HTML FileSystem API, which is not implemented anywhere but Chrome and as such documentation is scarce and fraught with big scary red warnings. You can actually use it for the purpose you state - reading App's own files - by starting with chrome.runtime.getPackageDirectoryEntry, but that's probably overkill in your particular case and again, you'll have a hard time finding examples of doing so.

I can think of only two reasons to disturb the slumber of the beast that is FileSystem API for App's own files:

You don't know, at runtime, what files are included. Then you can use it to list files. Rare, but possible.
You need a more fine-grained access than "get me the whole thing", for example you only need a chunk of a large file.

Note that FileSystem API is primarily used in Chrome for chrome.fileSystem Apps API. Considering that Chrome is going to support Chrome Apps on Chrome OS for a while, it's likely to stay, despite being non-standard.

Surviving documentation:

The above-mentioned HTML5Rocks article: Exploring the FileSystem APIs
Last public standards document: File API: Directories and System
Actual standards document on File API (that your "second example" is covered by): File API

is **xmlhttprequest** best approach for reading whole _.txt. files or **FileReader()** — Extraterrestrial, Jul 14 '22 at 13:36

Javascript, FileReader vs XMLHttpRequest for reading a local file?

1 Answers1