Different browsers show different behaviour with input type file

Question

I have 2 file upload fields in my form. Both look like this:

<input type="file" id="file1" name="file1" accept="application/pdf,application/msword">
<span id="file1_status">Currently uploaded: <?php echo $file1_fileName; ?></span>
<input type="file" id="file2" name="file2" accept="application/pdf,application/msword">
<span id="file2_status">Currently uploaded: <?php echo $file2_fileName; ?></span>

where $file1/2_fileName; is either "none" when the page is first loaded or equal to $_FILES["file1/2"]["name"] after a post event.

Toward the end of the page, I do

$(document).ready(function () {  
  jQuery("input#file1").change(function () {
    var val = $(this).val();
    _('file1_status').innerHTML = "Currently uploaded: " + val.substr(12); // removes C:/fakedir/
  });

Same for file2. So, basically if someone uploads "file.pdf", there is a text under the file input that reads: "Currently uploaded: file.pdf". I do this so the user sees that the file is still there if form validation fails after form submission.

OK so far so good.

Rather than using "required" in the input file field, upon form submission, I do the following:

if (is_uploaded_file($_FILES["file1"]["tmp_name"])) {
 // check mime_type, file size, etc.
} else {
 // display an error below the input field that a file is missing.
}

Same for file2. Now to the actual question/problem. Imagine the following situation. A user only uploads file1 but forgets file2 and clicks submit. This is what happens:

Firefox (latest version): Below the file1 field the status still shows "Currently uploaded: file1.pdf" and below the file2 input field an error message is displayed to remind the user to upload this file also. If the user complies and uploads file2, then clicks on submit again, the form is submitted and all is fine, ie, both files have been attached to the form submission. This is the expected behaviour.

Chome/Edge : For the same user behavouir everything is the same except for when the user clicks on submit a second time. For some reason, both these browsers now show an error below the file1 input field (although it still shows "Currently uploaded: file.pdf" which the user uploaded in the very beginning). So for some reason, and although $_FILES["file1"]["tmp_name"] is not empty, the test is_uploaded_file($_FILES["file1"]["tmp_name"]) fails upon the second form submission in both Chrome and Edge but not in FF.

This is very confusing. Why is this and how can this be avoided/fixed?

Answer 1

It seems that the Edge/Chrome behaviour is indeed to expected/normal behaviour. To my great embarrassment I have not been able to reproduce the above behaviour in FF anymore so I am not exactly sure what happened because I really did see a different behaviour while testing it for about an hour or so.

Anyway, for all practical purposes, I was able to work around the issue by moving the files that met all my criteria (re mime types, file size, etc) into a temporary upload directory on my server, store the file name in a session variable, and modify this code:

if (is_uploaded_file($_FILES["file1"]["tmp_name"])) {
 // check mime_type, file size, etc.
} else {
 // display an error below the input field that a file is missing.
}

to this

if (is_uploaded_file($_FILES["file1"]["tmp_name"])) {
 // check mime_type, file size, and if OK move to upload directory on server and store the name of the successfully uploaded file in $_SESSION["file1"]
} elseif (!empty($_SESSION["file1"])) { //basically this gets invoked the second time round, i.e., when the user uploads the 2nd file they forgot when submitting the form for the first time
   $file1_fileName = $_SESSION["file1"]; // used to display under the input file element (see above)
} else {
 // display an error below the input field that a file is missing.
}

Same for file2. So while the first "if" condition fails upon the 2nd form submission, the "elseif" condition is true and no error is issued.