Multiple File Upload using AJAX in sequence/queue

Question

I'm new to Javascript and jQuery. While uploading N number of files in the form, only the last file is uploaded N times,

I'm want to upload each file one at a time (Asynchronously) through AJAX request.

Below is my implementation:

$("#file-input").on("input", function() {

  var formdata = new FormData(document.getElementById("file-catcher"));
  

  $.each($("#file-input")[0].files, function (key, file){

      formdata.append(key, file);

      // This is to Inspecting each file 
      for(var pair of formdata.entries()) {
        console.log(pair[0]+ ': '+ pair[1]); 
      }

      // Sending AJAX 
      $.ajax({
            type: "POST",
            data: formdata,
            url: "/url/to/upload",
            datatype: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success:function(data){
              console.log(data); // Inspecting Response 
            },
            error: function (error) {
              console.log(error); // Inspecting Error if occured
            }
      });
  });

});

<form method="POST" id="file-catcher" action="/url/to/upload" enctype="multipart/form-data">

  <input type="text" name="fileCode" value="10">
  <input type="file" id="file-input" name="file-input" multiple>
  
</form>

That each loop will start all these requests at the same time basically. I'm also pretty sure there's no need to append anything to `formdata`; it should already contain everything after you initially set it. — , Dec 24 '20 at 11:52
In general, to run multiple async operations in sequence, you either use a) a for loop and `await` the op inside or b) build a queue and start the next queue item once the current one has finished. — , Dec 24 '20 at 11:54
@ChrisG, I would be very grateful. If you can help me with some article to use the loop, Queue to send multiple async requests. Or Can you correct my implementation? — Maqsud, Dec 24 '20 at 11:57
Can I ask why you want to upload the files individually? Also, sorry, but I can't provide free tutoring. — , Dec 24 '20 at 12:03
This should help: https://stackoverflow.com/questions/24586110/resolve-promises-one-after-another-i-e-in-sequence — , Dec 24 '20 at 12:08

Maqsud · Accepted Answer · 2020-12-26T10:46:06.057

I would like to give credit to Chris G for guiding me to iterate through each file to create a queue and send files in the sequence.

const inputFile = document.getElementById('file-input');

// Iterating through each file and sending AJAX request
for (const file of inputFile.files){

  var formdata = new FormData(document.getElementById("file-catcher"));

  formdata.append("file-input", file);

  $.ajax({
        type: "POST",
        data: formdata,
        url: "/url/to/upload",
        datatype: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success:function(data){
          console.log(data);
        },
        error: function (error) {
          console.log(error);
        }
  });

}

Multiple File Upload using AJAX in sequence/queue

1 Answers1