HTML5 File API - slicing or not?

Question

There are some nice examples about file uploading at HTML5 Rocks but there are something that isn't clear enough for me.

As far as i see, the example code about file slicing is getting a specific part from file then reading it. As the note says, this is helpful when we are dealing with large files.

The example about monitoring uploads also notes this is useful when we're uploading large files.

Am I safe without slicing the file? I meaning server-side problems, memory, etc. Chrome doesn't support File.slice() currently and i don't want to use a bloated jQuery plugin if possible.

score 6 · Answer 1 · answered Oct 11 '11 at 16:23

6

Both Chrome and FF support File.slice() but it has been prefixed as File.webkitSlice() File.mozSlice() when its semantics changed some time ago. There's another example of using it here to read part of a .zip file. The new semantics are:

Blob.webkitSlice( 
  in long long start, 
  in long long end, 
  in DOMString contentType 
);

Are you safe without slicing it? Sure, but remember you're reading the file into memory. The HTML5Rocks tutorial offers chunking the upload as a potential performance improvement. With some decent server logic, you could also do things like recovering from a failed upload more easily. The user wouldn't have to re-try an entire 500MB file if it failed at 99% :)

answered Oct 11 '11 at 16:23

ebidel

23,921
3
63
76

And then there's Opera, implemented `.slice()` but in two different ways, one following the w3c and one that didn't =/ – Ja͢ck May 29 '12 at 10:31
3

[MDN says](https://developer.mozilla.org/en-US/docs/DOM/Blob) that, as of Firefox 13 and Chrome 21, `slice()` is no longer prefixed. – Jordan Miner Oct 08 '12 at 16:23
You can use the method without prefix in newer versions of most browsers. – Mite Mitreski Mar 23 '13 at 16:49
Does HTml Slice loads the File in memory first and then Slices? Actually i looking into resumable.js and in case of large files its taking a lot of time in slicing,so wondering is this in client memory? – Taran Aug 12 '15 at 16:06

score 0 · Answer 2 · edited Dec 05 '13 at 14:15

This is the way to slice the file to pass as blobs:

function readBlob() {
    var files = document.getElementById('files').files;
    var file = files[0];
    var ONEMEGABYTE = 1048576;
    var start = 0;
    var stop = ONEMEGABYTE;

    var remainder = file.size % ONEMEGABYTE;
    var blkcount = Math.floor(file.size / ONEMEGABYTE);
    if (remainder != 0) blkcount = blkcount + 1;

    for (var i = 0; i < blkcount; i++) {

        var reader = new FileReader();
        if (i == (blkcount - 1) && remainder != 0) {
            stop = start + remainder;
        }
        if (i == blkcount) {
            stop = start;
        }

        //Slicing the file 
        var blob = file.webkitSlice(start, stop);
        reader.readAsBinaryString(blob);
        start = stop;
        stop = stop + ONEMEGABYTE;

    } //End of loop

} //End of readblob

`FileReader.readAsBinaryString()` is deprecated. It's no longer in the [W3C File API](https://www.w3.org/TR/FileAPI/#dfn-filereader) working draft: `// async read methods` `void readAsArrayBuffer(Blob blob);` `void readAsText(Blob blob, optional DOMString label);` `void readAsDataURL(Blob blob);` — Raman Sinclair, Jul 26 '16 at 07:59

HTML5 File API - slicing or not?

2 Answers2

Linked