Can files be updated and read using the JavaScript FileReader interface?

Question

I am reading a local CSV file using a web UI, and the HTML5 FileReader interface to handle the local file stream. This works great.

However, sometimes I want the file being read to be updated continuously, after the initial load. I am having problems, and I think it might have something to do with the FileReader API. Specifically, after the initial file load, I maintain a reference to the file. Then, when I detect that the size of the file has increased, I slice off the new part of the file, and get a new Blob object. However, there appears to be no data in these new Blobs.

I am using PapaParse to handle the CSV parsing, though I don't think that is the source of the problem (though it may be).

The source code is too voluminous to post here, but here is some pseudocode:

var reader = new FileReader();
reader.onload = loadChunk;
var file = null;

function readLocalFile(event) {
    file = event.target.files[0];
    // code that divides file up into chunks.
    // for each chunk:
    readChunk(chunk);
}

function readChunk(chunk) {
    reader.readAsText(chunk);
}

function loadChunk(event) {
    return event.target.result;
}

// this is run when file size has increased
function readUpdatedFile(oldLength, newLength) {
    var newData = file.slice(oldLength, newLength);
    readChunk(newData);
}

The output of loadChunk when the file is first loading is a string, but after the file has been updated it is a blank string. I am not sure if the problem is with my slice method, or if there is something going on with FileReader that I am not aware of.

Answer 1

The spec for File objects shouldn't allow this: http://www.w3.org/TR/FileAPI/#file -- it's supposed to be like a snapshot.

The fact that you can detect that the size has changed is probably a shortcoming of an implementation.