how can i create queue structure in ajax

Question

How can I upload after pressing the overwrite upload or rename upload buttons one after the other? When I press the overwrite or change all name buttons, I can return with for and upload them all. but I can't do single overwrite upload, rename upload, how can I create a queue structure? As I press the buttons, the upload process should start. If another file is being uploaded, it should be added to the queue. When the upload is finished, those in the other queue will upload.

Answer 1

Generally speaking you should have a place where to store that queue (localStorage, or if you are using VueJS or AlpineJS or something similar you already have places to store such information, like data).

To trigger a queue initially you could have a function that is called when you press one of the buttons and then that function is responsible to add it to your queue and call another function that will be responsible for the start and process of those queue elements.

Here's an example to visually explain it better:

<button id="btnAddToQueue" onclick="addElementToQueue()">
   Add To Queue
</button>

<script type="text/javascript">
function startQueue () {
  // access storage to get pending
      
  // process them
      
  // check if there are any left to queue
  // call or not startQueue again to process the remaining
      
  if(queue.length > 0){
     startQueue()
  }
}
    
function addElementToQueue () {
   // do checks if needed and add to storage here
      
   startQueue()
}
</script>