how to multi upload one by one with XMLHttpRequest

Question

I am uploading images using XMLHttpRequest and i want to have different progress for each image (I want to upload multiple but not in one select). I mean I will select one image and it's uploading ... then I will select another images and I want to upload together with different progress

$('#fileToUpload').change(function(){
            var file = this.files;
            var xhr = new XMLHttpRequest();
            var formdata = new FormData();
            formdata.append("_token", Laravel.csrfToken);
            formdata.append('file',file[0]);
            xhr.open('post','/new/upload',true);
            xhr.send(formdata);
});



xhr.upload.addEventListener('progress',function (e) {
    var percent = Math.round(e.loaded/e.total*100);
    $('.loading1').css('width' , percent+'%');
});

there's nothing stopping you from making multiple requests, they're async for more reasons than one, unless the problem is the loading bar itself, then I'd suggest thinking about how to have a variable selector — Patrick Barr, Jul 12 '17 at 17:57
ok i will send multiple . but how can i get response for every of them?? image i sent 3 xhr to server and finally i want to show them name in client. — K1-Aria, Jul 12 '17 at 18:01
Assuming you're making a new request, they will each have different references so they will have unique event listeners, or with less generic buzzwords... each request is different, you can bind a progress handler specific to each handler — Patrick Barr, Jul 12 '17 at 18:29
@PatrickBarr i have this : xhr.upload.addEventListener('progress',function (e) { — K1-Aria, Jul 12 '17 at 18:39

Patrick Barr · Answer 1 · 2017-07-12T19:08:42.173

As I mentioned in the comments, there's nothing stopping you from having multiple requests, and the key thing to remember here is that when you create a new request, each one has it's own unique reference.

This allows us to do some nifty things like making a generic function to handle uploading our new file!

$('#fileToUpload').change(function(){
    // If we're always uploading when we add a new file then we can
    // assume the last file is the next to upload
    var index = this.files.length - 1;

    // Here I suggest that you actually use ids to select your loading
    // indicators, that way they can all keep the same style and not affect
    // each other's progress
    uploadFile(this.files[index], '#loading' + index);
});

// Here we define a function that will handle our upload, taking the file
// and the jQuery selector for the loading indicator as parameters
function uploadFile(img, progressBarSel) {
    var xhr = new XMLHttpRequest();
    var formdata = new FormData();
    formdata.append("_token", Laravel.csrfToken);
    formdata.append('file',img);
    xhr.open('post','/new/upload',true);
    xhr.send(formdata);

    // Just a little flair, that allows us to optionally have a selector
    // not having one just means this won't setup the indicator
    if(progressBarSel) {
        xhr.upload.addEventListener('progress',function (e) {
            var percent = Math.round(e.loaded/e.total*100);

            // Here we simply use a variable as the selector
            // Note how this differ from than the question, which selected a
            // specific class rather than a "generic" selector
            $(progressBarSel).css('width' , percent+'%');
        });
    }

    // Return the reference to the request incase we want to do more with it
    return xhr;
}

Note: I'm assuming that whatever fileToUpload is has the array of files correctly populated beforehand. If you would like to know how to create new progress bars for more pictures I would look at some other questions like Creating a div element in jQuery. Remember, you already have one, so all that's left is to know how to create more (with less code!).

Also I couldn't help but notice you said:

I want to upload together with different progress

The word that strikes me is "together". I think it's really helpful if you think about this a bit differently, instead of "together" think "at the same time", they are very similar, but there's one key difference: "at the same time" doesn't infer that they're related. If you think of each upload as a separate event that just so happens to occur at the same time as another it becomes much more clear about what is happening under the hood in the web browser, and how you can design your code to do what you want!

how to multi upload one by one with XMLHttpRequest

1 Answers1