Using xhr object for html5 chunked upload in a loop

Question

Experts, I am facing issues looping through the BLOB chunks I create for resumable chunked upload. The method I am following is as: I chunk the file to be uploaded using Blob.slice(), push all the chunks on a queue and try to send them to my server.

The issue I am facing is regarding looping through the chunks. The first chunk is sent successfully and I end up in uploadNext method mentioned below from the function delegated to xhr.onreadystatechange. All good till now, but this piece of code just stops after sending the first two chunks and doesn't loop through.

The following code is what I have achieved so far:

uploadFile: function(item, location, start, isresume) {
        var blob = item.file;

        const BYTES_PER_CHUNK = 1024 * 200 * 10; 
        const SIZE = blob.size;

        var chunkId = 0;
        var end = BYTES_PER_CHUNK;

        while(start < SIZE) {
            var chunkObj = {};
            // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
            end = start + BYTES_PER_CHUNK;
            if(end > SIZE){
                end = SIZE;
            }
            if ('mozSlice' in blob) {
                chunkObj["chunk"] = blob.mozSlice(start, end);
                chunkObj["id"] = chunkId;
            } else {
                // var chunk = blob.webkitSlice(start, end);
                chunkObj["chunk"] = blob.slice(start, end);
                chunkObj["start"] = start;
                chunkObj["end"] = end-1;
                chunkObj["id"] = chunkId;
            }
            chunkId++;
            item.chunks.push(chunkObj);

            start = end ;
        }
        this.upload(item, location, SIZE, isresume);
    },

    upload: function(item, location, SIZE, isresume) {
        var xhr = new XMLHttpRequest();
        // Upload the first chunk
        xhr.upload.addEventListener("error", this.onFileUploadError.createDelegate(this, [item, xhr], 0), false);
        xhr.onload = this.getStatus.createDelegate(this, [item, xhr, isresume], 0);
        xhr.onreadystatechange = this.isChunkUploaded.createDelegate(this, [item, item.chunks[0], xhr, 0, SIZE, location, isresume], 0);
        xhr.open("PUT", location, true);
        xhr.setRequestHeader("Content-Range", "bytes " + item.chunks[0].start + "-" + item.chunks[0].end + "/" + SIZE);
        xhr.send(item.chunks[0].chunk);
    },

    uploadNext: function(item, xhr, index, SIZE, location, isresume) {
        if(index > item.chunks.length) {
            return;
        }

        console.log("uploading next chunk");

        xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("error", this.onFileUploadError.createDelegate(this, [item, xhr], 0), false);
        xhr.onload = this.getStatus.createDelegate(this, [item, xhr, isresume], 0);
        xhr.onreadystatechange = this.isChunkUploaded.createDelegate(this, [item, xhr], 0);
        xhr.open("PUT", location, true);
        xhr.setRequestHeader("Content-Range", "bytes " + item.chunks[index].start + "-" + item.chunks[index].end + "/" + SIZE);
        xhr.send(item.chunks[index].chunk);
        //this.uploadNext(item, xhr, index + 1, SIZE, location, isresume);
    },

    isChunkUploaded: function(item, chunkObj, request, index, SIZE, location, isresume, e) {
        if (request.readyState === 4) {
            console.log("chunk " + index + " uploaded");
            this.uploadNext(item, request, index + 1, SIZE, location, isresume);
        }
    },

PS I can't use jquery for the same (don't ask why).

Answer 1

Nevermind, this is working correctly. I made an error on my end by sending less function parameters as function arguments than expected.