Ajax upload issues

Question

I'm trying to build a tool on my own website that allows me to upload 50-100 images to my webserver. I been working on this for 1-2 weeks. The problem is, it uploads then it stops all of the sudden and "this.status" = 0 instead of = 200. And then my entire website stops working for like a minute like there's some type of overload.

It was important to have a progress bar. So at first my code uploaded multiples files at the same time which I thought it might be a problem. So I changed it to only upload 1 at a time. Still issues!

<input type="file" multiple id="file-input" accept=".jpg, .jpeg, .png">
<button onclick='The_Function_to_upload();'>Upload</button><br>

<script>

offset_test = 0;    // this is the offset of what file to upload
max_files = XXX;    // how many files there are. This is populated correctly

function The_Function_to_upload (){ // this function is called when pressing "Upload"
        
    upload_image(offset_test);      // This uploads the FIRST FILE ONLY!
        
}

    
function upload_image(i_filen) {


    var files = document.getElementById("file-input").files;    // get the file we're uploading

    var formData = new FormData();
    formData.append("file", files[i_filen]);    // add the file
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "upload.php", true);     // the PHP that uploads

    xhttp.onreadystatechange = function() {     // call on request changes state
      
        if (this.readyState == 4 && this.status == 200) {

            var response = this.responseText;
            if(response == "File uploaded successfully"){           // if PHP file outputs "File uploaded successfully", it means file was uploaded
               
                offset_test +=1;        // increase the offset to next file
                                
                if (offset_test==max_files){ 
                    alert('completely done');   return;     // ALL DONE. END
                }
                upload_image(offset_test);                  // upload next file
                
          }else{
                alert("File not uploaded: " + response);
           }
         }
      };

      xhttp.send(formData);       // Send request with data

}

</script>

You can view my own created log at the bottom.

I even changed the PHP file to only output "File uploaded successfully" so it doesn't even upload. It still stops. I also added a setTimeout to wait 1.5 SECONDS before it calls function upload_image AND IT STILL stops for gods sake. I have no idea why this is happening. Obviously it must be a server problem. But what can I do? :S Please guys, please help me :(

phpinfo() settings:
post_max_size: 128mb
memory_limit: 512mb
max_execution_time: 999999999
max_input_time: 999999999
upload_max_filesize: 1gb
max_input_vars: 1000

--

1. this.readyState:     2
2. this.status:     200
3. this.readyState:     3
4. this.status:     200
5. this.readyState:     4
6. this.status:     200
7. File uploaded:   1   (this means 1st is uploaded)
    
8. this.readyState:     2
9. this.status:     200
10. this.readyState:    3
11. this.status:    200
12. this.readyState:    4
13. this.status:    200
14. File uploaded:  2   (file 2 has been uploaded)
    
    ...
    etc
    ...
    
15. this.readyState:    2
16. this.status:    200
17. this.readyState:    3
18. this.status:    200
19. this.readyState:    4
20. this.status:    200
21. File uploaded:  41  (this means 41 files been uploaded)
   Now try to upload file # 42.
22. this.readyState:    4  (why does this not show 2 and then 3 and jumps to 4 ?)
23. this.status:    0     (why does this show 0 instead of 200 ? ) 

And here it stops! and sometimes at this point, my ENTIRE website stops working for 30-60 seconds :/ Sometimes it stops at file 43..but it's usually after 40 files it stops.