How to download a file using ajax in small pieces and check for failures, re-download those parts that failed.

Question

I have a file uploaded by a user and I would like to receive the following.

• Divide the file into smaller pieces around a megabyte.
• Download each fragment and wait for it to complete before loading the next fragment.
• For each fragment we get a report on success or failure.
• Reload the failed pieces.
• Get progress as a percentage.

Here is an example of crude JavaScript. I am literally lost. Got some code online and tried to change 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 explain what happens if there is a viable solution.

Answer 1

You are not doing anything to refuse any download channel.

 $.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 download the failed fragment again, you can do the 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 } });