How to upload a file with ajax in small chunks and check for fails, re-upload the parts that failed.

Question

I have a file uploaded by a user, and I'd like to achieve the following.

1. Divide the file into smaller chunks about a megabyte.
2. Upload each chunk, and wait for it to finish before starting to upload the next chunk.
3. For every chunk get success or failure report.
4. Re-upload the failed chunks.
5. Get progress in percentages.

Here's some rough JavaScript. I'm literally lost. Got some code online and tried modifying it.

$.chunky = function(file, name){        
                var loaded = 0;
                var step = 1048576//1024*1024;
                var total = file.size;
                var start = 0;
                var reader = new FileReader();

                reader.onload = function(e){

                var d = {file:reader.result}
                $.ajax({
                    url:"../record/c/index.php",
                    type:"POST", 
                    data:d}).done(function(r){
                    $('.record_reply_g').html(r);

                    loaded += step;                 
                    $('.upload_rpogress').html((loaded/total) * 100);

                        if(loaded <= total){
                            blob = file.slice(loaded,loaded+step);
                            reader.readAsBinaryString(blob);
                        } else {
                            loaded = total;
                        }
                })              
                };

                var blob = file.slice(start,step);
                reader.readAsBinaryString(blob);
            }

How can I achieve the above. Please do explain what's happening if there's a viable solution.

Answer 1

You are not doing anything for failure of any chunk upload.

$.chunky = function(file, name){        
    var loaded = 0;
    var step = 1048576//1024*1024; size of one chunk
    var total = file.size;  // total size of file
    var start = 0;          // starting position
    var reader = new FileReader();
    var blob = file.slice(start,step); //a single chunk in starting of step size
    reader.readAsBinaryString(blob);   // reading that chunk. when it read it, onload will be invoked

    reader.onload = function(e){            
        var d = {file:reader.result}
        $.ajax({
            url:"../record/c/index.php",
            type:"POST", 
            data:d                     // d is the chunk got by readAsBinaryString(...)
        }).done(function(r){           // if 'd' is uploaded successfully then ->
                $('.record_reply_g').html(r);   //updating status in html view

                loaded += step;                 //increasing loaded which is being used as start position for next chunk
                $('.upload_rpogress').html((loaded/total) * 100);

                if(loaded <= total){            // if file is not completely uploaded
                    blob = file.slice(loaded,loaded+step);  // getting next chunk
                    reader.readAsBinaryString(blob);        //reading it through file reader which will call onload again. So it will happen recursively until file is completely uploaded.
                } else {                       // if file is uploaded completely
                    loaded = total;            // just changed loaded which could be used to show status.
                }
            })              
        };
}

EDIT

To upload failed chunk again you can do following :

var totalFailures = 0;
reader.onload = function(e) {
    ....
}).done(function(r){
    totalFailures = 0;
    ....
}).fail(function(r){   // if upload failed
   if((totalFailure++) < 3) { // atleast try 3 times to upload file even on failure
     reader.readAsBinaryString(blob);
   } else {                   // if file upload is failed 4th time
      // show message to user that file uploading process is failed
   }
});

Answer 2

I've modified afzalex's answer to use readAsArrayBuffer(), and upload the chunk as a file.

    var loaded = 0;
    var reader = new FileReader();
    var blob = file.slice(loaded, max_chunk_size);
    reader.readAsArrayBuffer(blob);
    reader.onload = function(e) {
      var fd = new FormData();
      fd.append('filedata', new File([reader.result], 'filechunk'));
      fd.append('loaded', loaded);
      $.ajax(url, {
        type: "POST",
        contentType: false,
        data: fd,
        processData: false
      }).done(function(r) {
        loaded += max_chunk_size;
        if (loaded < file.size) {
          blob = file.slice(loaded, loaded + max_chunk_size);
          reader.readAsArrayBuffer(blob);
        }
      });
    };