I'm trying to build a tool that allows me to upload hundreds of less than 1 mb files to my website with "<input type="file" multiple"
It works perfectly but when I select more than 40 files it completely stops (apparently type="file" multiple uploaded multiple files simultaneously so I thought THIS was the problem).
So I did a loop and instead and ONLY uploaded 1 file at a time and waited until complete before uploading next. IT HAS THE SAME PROBLEM. It seems every time it comes up to AROUND 40 files, it just stops. I even killed the upload process in PHP File to see if it's the upload it self or not.
<input type="file" multiple id="file-input" accept=".jpg, .jpeg, .png"><br>
<button id="upload-button">Upload File</button><br>
<script stuff below:>
document.querySelector('#upload-button').addEventListener('click', function() {
files_total = document.querySelector('#file-input').files.length;
files_completed = 0;
Upload_the_file(files_completed); // upload only the 1st file
});
function Upload_the_file(i){ // this is a function called to upload 1 file
let data = new FormData();
data.append('file', document.querySelector('#file-input').files[i]);
let request = new XMLHttpRequest();
request.open('POST', 'upload.php');
request.upload.addEventListener('progress', function(e) { //this only shows progress
let percent_complete = (e.loaded / e.total)*100;
//Add_log('file ' + (i+1) + ': ' + percent_complete.toFixed());
});
request.addEventListener('load', function(e) { // this load when PHP is done with uploading
if (!(request.response=="File uploaded successfully")){
alert("error");
return;
}
files_completed += 1;
if (files_completed==files_total){
Add_log("Done!");
alert('completely done');
}else{
Upload_the_file(files_completed); // upload next file. This will call upon this same function until we're done
}
});
request.send(data);
} // end of function
Do I have to end or close a addEventListener ? I have no idea why it stops exactly around 40 files :( Thought it was calling the upload.php too often but it's only doing so every 5-6 seconds. Is there some type of timeout or something I'm missing? Please note, the functions to upload a new file is ONLY called after it's done uploading and the "request.addEventListener('load', function(e) { " has been fired! Please help :( Thank you so much!