How to queue files and start uploads with a button click?

See more:

Javascript

Ajax

jQuery

The code below is calling webapi on drop and will send file one by one. How to get all the files first and upload them all? Because on the server side, I need to put those files in its each unique folder so that multiple users can download theirs but as of now, as this is sending file one by one, It will create a folder for each file which is not ideal. Why?

    function handleFileUpload(files, obj) {
                        for (var i = 0; i < files.length; i++) {
                            var fd = new FormData();
                            fd.append('file', files[i]);
                            var status = new createStatusbar(obj); //Using this we can set progress.
                            status.setFileNameSize(files[i].name, files[i].size);

                        }
                    
                     var submit = $("#submit-button-id");
                     submit.on('click', function (e)
                    {
                        e.preventDefault();
                        alert("clicked nest!")
                        sendFileToServer(fd, status);
                    });
            }

and here is the WEB API AJAX call function: 

 

     function sendFileToServer(formData, status) {
                    var uploadURL = _config.UploadPrismaTemplates;
                    var extraData = {}; //Extra Data.
                    var jqXHR = $.ajax({
                        xhr: function () {
                            var xhrobj = $.ajaxSettings.xhr();
                            if (xhrobj.upload) {
                                xhrobj.upload.addEventListener('progress', function (event) {
                                    var percent = 0;
                                    var position = event.loaded || event.position;
                                    var total = event.total;
                                    if (event.lengthComputable) {
                                        percent = Math.ceil(position / total * 100);
                                    }
                                    //Set progress
                                    status.setProgress(percent);
                                }, false);
                            }
                            return xhrobj;
    
                        },
                        url: uploadURL,
                        type: "POST",
                        contentType: false,//not to set any content header
                        processData: false, //not to process data
                        cache: false,
                        data: formData,
                        success: function (data) {
                            status.setProgress(100);
                           //$("#status1").append("File upload Done<br>");
                            alert("set progress success");
                        },
                        error: function (xhr, status, error)
                        {
                            alert(error);
                        }
                    });
    
                    status.setAbort(jqXHR);
    
                } /*send file to server ends here*/

What I have tried:

var submit = $("#submit-button-id");
                   submit.on('click', function (e)
                  {
                      e.preventDefault();
                      alert("clicked nest!")
                      sendFileToServer(fd, status);
                  });

I tried to wrap the sendtoServer function which is AJAX call in submit button but it is sending files one by one