1

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!

Maria
  • 61
  • 5
  • Have you tried this in different browsers? Any different results? What if you choose very very small files? Does the number stay 40? is 40 an estimate or can it happen sooner like 37? – Kevin Y Jan 25 '22 at 06:55
  • @KevinY it stops at 43. on chrome it stops at 42. It seems on the last file it stops at, it seems it never fires "request.addEventListener('load', function(e) {". Can it be u have to delete each addeventlistener after using it? :/ – Maria Jan 25 '22 at 07:09
  • Are you able to recreate the problem with isolated code which you can share the whole thing? For the `upload.php` script, do you get similar results if it's left completely blank and does nothing with the upload? What is `i` in `document.querySelector('#file-input').files[i]`? Might be related to the looping logic. – Kevin Y Jan 25 '22 at 07:16
  • You are uploading one file at a time there, yes, a new AJAX request for each one? (If not, it could have been the `max_file_uploads` PHP setting, but that would not apply if you upload only one file per request.) _"it just stops"_ - meaning what, exactly? Are no more requests made, or do they "hang" and not get any response? Did the error log contain anything related? – CBroe Jan 25 '22 at 08:07
  • @KevinY I just edited this post and put the whole code. Temporarily in the php upload, I'm only echoing successful and then ending it so the PHP is is not really doing anything so the problem is not the PHP code it self. – Maria Jan 25 '22 at 17:41
  • @CBroe in cpanel, the upload_max_filesize is 1gb, post_max_size=128mb. I put the whole code above in this post so you can see. I'm not sure where or how to check for an error log. It doesn't HANG, it just completely stops. It's like at some point "request.addEventListener('load', function(e) {" is not called anymore :S sometimes it makes my ENTIRE website (The connection was reset) I can't use none of my pages on my website for like 30 minutes sometimes :S – Maria Jan 25 '22 at 17:51
  • Regarding the error log location, please check https://stackoverflow.com/q/5127838/1427878 – CBroe Jan 26 '22 at 07:10
  • What response did you get for the last _working_ upload request? Check in the network panel of your browser dev tools. What is the status code, and what response (if any) was returned in the response body? – CBroe Jan 26 '22 at 07:11
  • @CBroe really appreciate you helping me out!! A) In the VAR folder I only have cpanel, nothing about any log. Nor do I have a "/usr" folder. B) I don't see anything about browser or dev tools in cpanel control panel. C) When running "phpinfo();", what headline can I look for that will show the path logs being saved? - So using the code above, it seems in the loop this happens: New form data, File append, new XML, Request open etc and then this fires "request.upload.addEventListener('progress', function(e) {" and this continues and loops but then the request upload doesn't fire all of – Maria Jan 28 '22 at 06:49
  • @CBroe - I mean this goes on and loops and files are being uploaded until 41-43 files being uploaded and then it never fires: "request.upload.addEventListener('progress', function(e) {". In other words, "request.send(data)" runs and then it's supposed to fire "request.upload.addEventListener('progress', function(e) {" which is does until around 41-43 files are uploaded :/ Are there a limit of how many addEventListener u can do? could that be the problem? – Maria Jan 28 '22 at 06:51
  • also normally when I do run a PHP script that has an error, a error_log file is created in same folder. Which is not happening in this case. Also, when I try to run this code uploading more than 50 files ..after few times my entire webserver stops working. I Can't surf to any of my pages on my website for 2-25 min "The connection was reset". It's feels like somehow it's overloading something :S – Maria Jan 28 '22 at 07:12

0 Answers0