POSTing data via AJAX to a PHP file

Question

I have an input which accepts multiple files:

<input id="propertyImages" type="file" name="submission_img[]" multiple accept=".jpg, .jpeg, .png, .gif"/>

I then POST this data to a PHP file via JS/Ajax:

//Compiling the data which will be POSTed using AJAX. Note that the input above with id of propertyImages is not part of the form with id accommodationForm and is therefore appended to the formData.
var form = $("#accommodationForm")[0]; 
var formData = new FormData(form);

var propertyImages = document.getElementById("propertyImages");

for(var i=0; i<propertyImages.files.length; i++){
   formData.append('propImages[]', propertyImages.files[i]);
}

//Printing to console the formData entries to confirm the formData data:
for (var d of formData.entries()) {
   console.log(d);
}

//The partial code for the ajax call:
$.ajax({
   url: "includes/handlers/ajax_submit_accommodation.php",
   method: "POST",
   data: formData,
...

The PHP code to which the data is POSTed:

$errorstatus = 0; //Used as an error flag
$maximagesize = 10485760; // Max file size allowed = 10MB    
$acceptableimage = array( //The allowed mime types
    'image/jpeg',
    'image/jpg',
    'image/png',    
);

$submission_images_array = array();

$output = ""; //Used for debugging purposes

for($x=0; $x<30; $x++){ //30 is the upper limit for the amount of images POSTed
    if($_FILES['propImages']['size'][$x] != 0){    
        if( $_FILES['propImages']['size'][$x] >= $maximagesize  || (!in_array($_FILES['propImages']['type'][$x], $acceptableimage))) { 
            $errorstatus = 1;              
        } else {            

            $submission_img = $_FILES['propImages']['name'][$x];   
            $submission_img = pathinfo($submission_img, PATHINFO_FILENAME);  
            $submission_img = $submission_img.'-'.$user_id.'-'.rand().'.jpeg';
            array_push($submission_images_array, $submission_img);

            $submission_img_tmp = $_FILES['propImages']['tmp_name'][$x];

            compressImage($submission_img_tmp, '../../submitted_media/accommodation/'.$submission_img, 50);

            $output .= "$x:"." ".$submission_img."\n";
        } 
    } else {
        $output .= "$x: Empty image\n";
        $submission_img = "";
        array_push($submission_images_array, $submission_img);
    }
}

file_put_contents('../../filenames.txt', $output ); // DEBUG

I want the user to attach a maximum of 30 images. I have made sure that the front end and back end check for this. The issue I am having is that I can attach 30 images - the debugging confirms this via the printing to console of the formData ...ie the formData contains all the image data. However, when I look at the filenames.txt which I logged in the PHP it only contains the first 20 file names, while the last 10 entries is logged as "Empty image" (as I instructed in the code if the image size is 0).

Notes:

1. I have made sure (using other JS code) that propertyImages.files.length in the for loop cannot be greater than 30 and that when I attach 30 images, that the length is indeed 30.

2. I have made sure that max_input_vars in the PHP.ini file is not the issue.

3. The image sizes of the last 10 files are NOT 0. This has been confirmed by the logging of formData

Answer 1

Have a look at themax_file_uploads directive:

max_file_uploads integer

The maximum number of files allowed to be uploaded simultaneously.

As shown in the table in the "File Uploads" section, it defaults to 20:

Name              Default   Changeable       Changelog
...
max_file_uploads  20        PHP_INI_SYSTEM   Available since PHP 5.2.12.

You'll need to update that value your php.ini .

Also check you don't exceed post_max_size or upload_max_filesize .