[Solved] Reading local file in javascript [duplicate]

Question

The answer is not really, no.

BUT there are some workarounds, depending on what you can get away with (supported browsers, etc)

When you grab a local file (I’m assuming you’re using <input type="file">, rather than partially supported, unstandardized methods), you get a "change" event to subscribe to, but that change reflects the change in selected files, not a change in the contents of a particular file.

Moving beyond that, if you have a Blob or a File which inherits from Blob, you basically have a buffer full of data.

That buffer isn’t going to dynamically update itself, based on changes elsewhere in the OS, nor does it support callback options to do so.

Alternatively, from a blob or a file, you have the option to use URL.createObjectURL( file ), which returns a temporary url, which references a file, rather than the content of the file.

That said, any change to that file might then be reflected from subsequent calls to that URI.
This isn’t something I’ve built to test, yet.

There would be no callback; however, you could set up an interval-based heartbeat, to make an XHR call to that URI, and then compare the .responseText with the previous .responseText.

Again, no guarantees, but that’s as close as I think you’re going to get to an answer, right now (while still in the realm of plugin/extension-free solutions), and might just be worth an hour of working out a prototype, and a couple more, testing support (whether the link is live, rather than an initial representation, etc).

var input = document.querySelector("input[type="file"]"), // client must open file, themselves
    fileHandle = "", // this will be the url for the local file
    content    = "", // this will be the latest contents of the file
    previousContent = ""; // this will be the previous contents

var ms = 1000,
    secs = 2,

    pollId; // will be the process ID for the polling (so you can stop checking for changes, later).

// wait for a file to be selected
input.addEventListener("change", function (evt) {

    var file = evt.target.files[0]; // grab the file object
    fileHandle = URL.createObjectURL(file); // create a url which points to the local file

    // create an interval to check for changes
    pollId = setInterval(
        getLatest(fileHandle, getCurrent, updateCurrent),
        secs * ms
     );
});

function updateCurrent (latest) {
    current = latest;
    doStuff(current);
    // the text has changed; it's been updated;
    // now call home or do something else
}

function getCurrent () { return current; }

function getLatest (url, getCurrent, onchange) {
    return function () {
        // this isn't actually calling the network
        // it's calling the local file
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);

        xhr.onload = function () {
            var latest = xhr.responseText;
            if (getCurrent() !== latest) { onchange(latest); }
        };

        xhr.send();
    };
}

You now have change polling, in supporting browsers.

Accepted Answer