I have created a table that a user can use to input multiple files (photos from a phone).
I generate the table rows using Javascript and x(below) starts at 1 and increments from there. This is the line that generates the javascript
<th class="col-xs-1"> <input class="form-control" type="file" id="myFileInput'+ x + '" accept="image/*;capture=camera"></th>'
When I submit these files for upload I send them via AJAX to a php file. This is what I use to create an array of files to send as POST parameters:
for (var r = 1, n = table.rows.length; r < n; r++) {
var myInput = document.getElementById("myFileInput" + r);
fileArray.push(myInput.files[0]);
}
I send the files array like this:
form.append('file', fileArray);
The problem is that the files array is POST’ed to the PHP file in the $_POST parameters and not the $_FILES array and I don’t know how to handle that.
Here is a minimum reproduceable example – User interface file (html)
<!DOCTYPE html>
<html>
<head>
<title>LIST of files to php</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Container for padding https://www.w3schools.com/bootstrap5/bootstrap_containers.php -->
<div class="container p-5 my-5 border">
<!-- Table of files -->
<div class="container my-5">
<table id="FileTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
</tr>
</thead>
</table>
<button onclick="addRow()" type="button" class="btn btn-primary">Add Another Photo Or File</button>
</div>
<!-- Submit request -->
<div class="container my-5">
<button onclick="submitFiles()" type="button" class="btn btn-primary">Submit</button>
</div>
</div>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
function submitFiles() {
//File(s)
var table = document.getElementById('FileTable');
var fileArray = [];
for (var r = 1, n = table.rows.length; r < n; r++) {
var myInput = document.getElementById("myFileInput" + r);
fileArray.push(myInput.files[0]);
}
var form = new FormData(),
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert('Submited');
}
}
form.append('file', fileArray);
xhr.open('post', 'uploadMinReproduceable.php', true);
xhr.send(form);
}
function deleteRow(id)
{
document.getElementById(id).remove()
}
function addRow() {
var table = document.getElementById("FileTable");
// GET TOTAL NUMBER OF ROWS
var x =table.rows.length;
var id = "row"+x;
var row = table.insertRow(x);
row.id=id;
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell1Inner = ' <th class="col-xs-1"> <input class="form-control" type="file" id="myFileInput'+ x + '" accept="image/*;capture=camera"></th>';
cell1.innerHTML = cell1Inner;
cell2.classList.add("text-center");
cell2.classList.add("py-1");
cell2.innerHTML = '<button class="btn btn-outline-primary btn-xs" onclick="deleteRow('' + id + '')" >Delete</button>';
}
//Initialise the table with a row
addRow();
</script>
</body>
</html>
The PHP file:
<?php
header('Content-Type: application/json; charset=utf-8');
error_log('post params for upload file ' . $_SERVER['SCRIPT_NAME']);
foreach ($_POST as $key => $value) {
error_log(' key: '. $key .' value: '. $value);
}
error_log('files params for upload file ' . $_SERVER['SCRIPT_NAME']);
foreach ($_FILES as $key => $value) {
error_log(' Files key: '. $key .' Files value: '. $value);
}
$dsID = !empty($_POST['id_Job'])?$_POST['id_Job']:'0';
$locationvalue = '';
if (isset($_POST['Location']) && $_POST['Location'] !== '') {
$locationvalue = $_POST['Location'] ;
}
?>
The result in the error log (note that the $_FILES array is empty):
[26-Feb-2025 17:33:14 Australia/Sydney] post params for upload file /uploadMinReproduceable.php
[26-Feb-2025 17:33:14 Australia/Sydney] key: file value: [object File]
[26-Feb-2025 17:33:14 Australia/Sydney] files params for upload file /uploadMinReproduceable.php
The expected result in the error log for the $_FILES array:
[26-Feb-2025 16:16:14 Australia/Adelaide] files params for upload file /FileTest/uploadFile.php
[26-Feb-2025 16:16:14 Australia/Adelaide] Files key: file Files value: Array
