0

I'm setting up multi file upload in client-side.Below are the steps, I need to done:

  1. User will upload multiple files at once. Ex: 5 files at a time.
  2. Each file size is vary and large files. Ex: File1.size = 800mb
  3. Slice that large files into chunks. Ex: chunk_size = 50mb
  4. Each chunk will be send to backend and will get response from it.

I'm able to do it for single file upload, like splicing large file chunks.But I'm unable to do it for multiple files uploaded at a time.

Below is the code I tried:

var that = this;
var files = that.files || [];
var url = that.config.url;
var fileKeyUpload = that.config.fileKeyUpload;
for(var i=0; i < files.length; i++) {  //multiple files loop
    var start = 0;    //chunk start as 0
    var bytes_per_chunk = 52428800; // 50 MB  per chunk
    var blob = files[i];
    var size = blob.size;
    var end = bytes_per_chunk;
    var getStatus = function() {
        var nextChunk = start + bytes_per_chunk;
        var percentage = nextChunk > size ? 100 : Math.round((start / size) * 100); // calculating percentage
        uploadFile(blob.slice(start, end), files[key], start, percentage).then(function() {
            if(start < size && bytes_per_chunk < size){
                start = end;
                end = start + bytes_per_chunk;
                start < size ? getStatus() : null;
            }
        });
    }
    return getStatus();
}

function uploadFile(blob, file, offset, completedPrecentile) {
    return new Promise(function(resolve) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", url);
        xhr.setRequestHeader("Accept", "*/*");
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if(that.config.hasOwnProperty("onFileUploadComplete")){
                    that.config.onFileUploadComplete(xhr, true, completedPrecentile, file);
                    resolve();
                }
            }
        };
        xhr.send(blob);
    });
};

This is what I tried, it works for single file, Any help on how to achieve multiple file upload with slicing large files into chunks.

Unable to post working demo since local api is used.

Learn to code
  • 183
  • 3
  • 14
  • try blueimp fileupload. It's a great plugin – AndyNope Jul 25 '19 at 16:26
  • where is `key` defined? it's the index of the current file, and it doesn't seem to change. if it can do one, you should be close, you just have to manage the whole batch and repeat what you're already doing. This is two parts above a single upload: what file am i on, and am i done with the batch yet? – dandavis Jul 25 '19 at 16:36
  • I want to do it in pure javascript @andy – Learn to code Jul 25 '19 at 16:39
  • Thanks but you can see that in files[i] which have the current file in a loop , in my case for loop is terminating after expecting first in loop @dandavis . I do not know which causes problem here 1. Return inside for loop 2. Promise 3. Asynchronous calls. Deliberately need help on this. – Learn to code Jul 25 '19 at 16:41
  • ahh, ok, i see, now. you can't use a for loop where you have it if you want to wait for each file completion. move the loop body into a function, i usually call mine next(). at the top of next(), you check if all are done and if so, return early and fire your complete handler. if not, increment the file index, and pass it all to uploadFile() as you are. lastly, the end of uploadFile() (a promise as shown) needs to call next() once it's done. This way, a finishing file calls next(), which either finishes the batch or queues up the next big file. use a lot of consle.log() calls to get it working – dandavis Jul 25 '19 at 16:52
  • I think I already had that problem but I solved it with PHP. – AndyNope Jul 25 '19 at 16:52
  • @dandavis i can't figure it out still, is there's any working model on how to achieve this ? – Learn to code Jul 26 '19 at 04:07
  • Have your taken a look at https://stackoverflow.com/questions/38815140/javascript-spliced-filereader-for-large-files-with-promises-how ? – GWorking Aug 03 '19 at 05:29

0 Answers0