Question

I am trying to slice a big file as follows:

function alertChunk(file) {
    var reader = new FileReader();

    reader.onloadend = function(e) {
        if (e.target.readyState == FileReader.DONE) {
            alert(e.target.result);
        }
    };

    if (file.slice) {
        var blob = file.slice(1000, 1000);
    } else if (file.mozSlice) {
        var blob = file.mozSlice(1000, 1000);
    } else if (file.webkitSlice) {
        var blob = file.webkitSlice(1000, 1000);
    }

    reader.readAsBinaryString(blob);
}

HTML as follows:

<input type="file" onchange="alertChunk(this.files[0])" />

But I do get an empty result in Chrome, though it works well in Firefox. Does anybody know why it can be empty? What is wrong?

NB: It seems to work well in Chrome when I do as follows:

var blob = file.webkitSlice(10, 1000); // changed the start index

But it won’t work with a bigger index!

Answer 1

The FileReader interface is part of the W3C File API that is still just a working draft so you can expect it to be inconsistenly implemented across browsers.

ECMA-262 specifies slice as String.prototype.slice(start, end) where start and end reference characters in a string. I expect that if start == end then nothing will be sliced.

The W3C File API working draft specifies File.slice(start, length[, contentType]) where start and length are byte offsets. The optional contentType parameter may allow setting the content to ASCII text or similar.

So it appears that Chrome’s File.slice may well be implemented per the ECMA-262 String method rather than the W3C File API method.