Loop through $_FILES causes JSON unexpected Token - php

Question

***** Update:** The issue I believe is with the dSubmit function, it might not be handling multipart form data therefore causes PHP to throw an error when the foreach is executed? I've submitted over arrays through the function without issue, is there something different with the files[]
I have a AJAX form submission on a website, the JSON array that is returned is used to show message or direct to another page. Everything works well until I loop through file uploads sent through the form via the PHP script. I have removed all possible extra code so it is now bare bones and I still can't resolve it:
upload.php
<?php
foreach($_FILES['files']['name'] as $f => $name){};
$returnData = array(
"infoMsg" => "message for user",
"color" => "orange"
);
echo json_encode($returnData);
?>
html snippet:
<form id="fileUpload" name="fileUpload" enctype="multipart/form-data">
<input type="file" id="file" name="files[]" multiple="multiple"/>
</form>
<button onclick="dSubmit('fileUpload' , 'inc/upload.php')">test</button>
dSubmit is the function to submit the form, everything is working as expected until I introduce the looping of the uploaded files. The error I receive is:
Uncaught SyntaxError: Unexpected token < in JSON at position 0
I can see no extra characters/whitespace or anything else that might cause the JSON issue.
Here's the dSubmit code found in the head:
function dSubmit(formName, formAction){
// formName = id of Form to process
// formAction = php file to parse data to
var url = formAction;
event.preventDefault()
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
$.ajax({
type: "POST",
url: url,
data: $("#" + formName).serialize(),
success: function(returnData)
{
var data = JSON.parse(returnData); // Return php array from formAction
var passedInfoMsg = (data['infoMsg']); // infoMsg (if set)
var color = (data['color']); // infoMsg color (if set)
var resetForm = (data['reset']); // boolean reset submitted form upon submission
var fileToLoad = (data['fileToLoad']); // fileToLoad (if set)
var divToLoad = (data['divToLoad']); // divToLoad fileToLoad in (if set)
console.log("Form Return: passedInfoMsg: " + passedInfoMsg + " | color: " + color + " | Reset: " + resetForm + " | fileToLoad: " + fileToLoad + " | divToLoad: " + divToLoad);
if(passedInfoMsg!==undefined) {
// If message defined, display message
infoMsg(passedInfoMsg,color);
}
if(resetForm===true) {
// clear submitted form upon request from formAction
clearForm($("#"+formName))
}
if(fileToLoad!==undefined) {
// if fileToLoad is set, run dLoader
dLoader(fileToLoad,divToLoad);
}
}
});
return false; // avoid to execute the actual submit of the form.
}
The full code as requested:
storage.php ( where uploads take place ):
<?php
require $_SERVER['DOCUMENT_ROOT'] . '/../vendor/bucketScripts/start.php'; // include AWS email parser
$folderTitle = "Client Portal";
$projectId = "36";
$folder = "client";
$objects = $s3->getIterator('ListObjects', array(
"Bucket" => "openplanman",
"Prefix" => "Projects/$projectId/$folder/" //must have the trailing forward slash "/"
));
$passedPrefix = "Projects/$projectId/$folder/";
?>
<div class="row">
<div class="12u 12u$(medium)">
<h3><?php echo $folderTitle;?></h3>
</div>
<form id="fileUpload" name="fileUpload" enctype="multipart/form-data" method="POST" action="inc/uploadFiles.php" target="_blank">
<input type="hidden" name="projectId" value="<?php echo $projectId;?>">
<input type="hidden" name="uploadFolder" value="<?php echo $folder;?>">
<input type="hidden" name="folderTitle" value="<?php echo $folderTitle;?>">
<input type="file" id="file" name="files[]" multiple="multiple"/>
<input type="submit" value="Upload">
</form>
<button onclick="dSubmit('fileUpload' , 'inc/uploadFiles.php')">test</button>
<div class="12u 12u$(medium)">
<table>
<?php
$fileArray = array();
foreach ($objects as $object) {
// Load into a new array
array_push($fileArray, $object['Key']);
}
foreach ($fileArray as $file) {
$noPrefixFileName = str_replace("$passedPrefix","",$file);
if($noPrefixFileName!=null)
{
$urlFilename = urlencode($noPrefixFileName);
echo "<tr><td>" . $noPrefixFileName . "</td><td><a onclick=\"fileRequest.php?id=$projectId&folder=$folder&req=$urlFilename\" target='_blank'><i class='fa fa-cloud-download' aria-hidden='true'></a></td><td><i class='fa fa-eye' aria-hidden='true'></td></tr>";
}
}
?>
</table>
</div>
</div>
uploadFiles.php (PHP script that handles the upload, works when POST not through AJAX)
<?php
require $_SERVER['DOCUMENT_ROOT'] . '/../vendor/bucketScripts/start.php';
$err = 0;
$projectId = $_POST['projectId'];
$uploadFolder = $_POST['uploadFolder'];
$path = $_SERVER['DOCUMENT_ROOT'] . '/../tmp/'; // include AWS email parser
$bucketPath = "../../../tmp/";
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
// Loop $_FILES to exeicute all files
foreach ($_FILES['files']['name'] as $f => $name) {
if ($_FILES['files']['error'][$f] == 4) {
continue; // Skip file if any error found
}
if ($_FILES['files']['error'][$f] == 0) {
// No error found! Move uploaded files
if(move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name))
$fileName = $_FILES["files"]["name"][$f];
// echo "<br>Key: " . "Projects/$projectId/$uploadFolder/$fileName";
// echo "<br>Source: " . "$bucketPath$fileName";
try {
$s3->putObject([
'Bucket' => $config['s3']['bucket'],
'Key' => "Projects/$projectId/$uploadFolder/$fileName",
'SourceFile' => "$bucketPath$fileName",
'ACL' => 'public-read',
]);
} catch (S3Exception $e) {
$err = 1;
}
unlink($path.$name); // Housekeeping
}
}
}
$returnData = array(
"infoMsg" => "user message",
"color" => "orange",
);
echo json_encode($returnData);
?>

Answer 1

you got this error because there is a PHP error response that treated by the browser as json content and it's not.
you can find out that error response through the chrome developer tools
press F12 to open the developer tools
select Network tab
select XHR filter
select the request that you make
on the right side you can find the response tab which will content the raw response
by the way i think your problem is your code try to iterate through $_FILES['files']['name'] which is string :)

Answer 2

Hope It's helpful..!
Your files array becomes like:-
$_FILES['files'][0]['name']
$_FILES['files'][1]['name']
When you do multiple file upload.