I cannot get my PHP image uploader to accept user files and place them into my "user uploads" folder. It always echos the "Cannot upload file-type!" error message, even though every image I have tested the uploader with has been a .jpg/jpeg file. It's very frustrating as I've spend 3 days on this using multiple tutorials and I have also built a successful PHP uploader in the past. I appreciate any help fixing this issue.
PHP: (webpage: server.php)
if(isset($_POST["testUploadBtn"])) {
$file = $_FILES["myTestPhoto"];
$fileName = $_FILES["myTestPhoto"]["name"];
$fileTmpName = $_FILES["myTestPhoto"]["tmp_name"];
$fileSize = $_FILES["myTestPhoto"]["size"];
$fileError = $_FILES["myTestPhoto"]["error"];
$fileType = $_FILES["myTestPhoto"]["type"];
//explode elements that make up file (file name and extension)
$fileExt = explode(".", $fileName);
//convert all file-extensions to lowercase
$fileActualExt = strtolower(end($fileExt));
//restrict allowed uploadable file types
$allowed = array("jpg", "jpeg", "png");
//Check file-type is allowed
if (in_array($fileActualExt, $allowed)) {
//Check for upload error
if ($fileError ===0) {
//Check for valid file-size
if ($fileSize < 1000000) {
//Create new unique filename using microseconds
$fileNameNew = uniqid("", true).'.'.$fileActualExt;
//Destination for uploaded file
$fileDestination = "useruploads/".$fileNameNew;
//Function to uploads file
move_uploaded_file($fileTmpName, $fileDestination);
header("testlog.php");
} else {
echo "File too big- try again!";
}
} else {
echo "Error uploading file- try again!";
}
} else {
echo "Cannot upload file-type!";
}
}
HTML form: (webpage: testlog.php)
<form id="testForm" method="POST" action="server.php" enctype="multipart/form-data"> <p>
<h1>Test form</h1>
<!--If msg variable is not empty- display message -->
<?php if(!empty($msg)): ?>
<div class="alert <?php echo $css_class; ?>">
<?php echo $msg;?>
</div>
<?php endif; ?>
<hr>
<b><i class="fas fa-user-alt"></i> Full name:</b>
<br>
<div class='helpBox'></div>
<br>
<div class="form-group row">
<div class="col-xs-4">
<small><div class='alert alert-info' role='alert'>First and last name minimum</div></small>
<input class="form-control" type="text" id="testName" name="myTestName" size="40" maxlength="50" placeholder="required*" required/>
</div>
</div>
<hr>
<b>Profile photo:</b>
<br>
<div class='helpBox'></div>
<div class="row">
<small><div class='alert alert-info col-xs-4' role='alert'>jpg/jpeg files only</div></small>
</div>
<div class="form-group row">
<div class="col-xs-3">
<div class="custom-file">
<input type="file" class="custom-file-input" name="mytestPhoto" id="testPhoto">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
</div>
</div>
<hr>
<br>
<button name="testUploadBtn" id="testUploadBtn" onclick="return confirm('Create new profile?');" type="submit" class="btn btn-primary">Create Profile <i class='far fa-edit'></i></button>
<br>
<br>
</form>
<script>
//Display choosen file name in upload form
$(document).on('change', '.custom-file-input', function (event) {
$(this).next('.custom-file-label').html(event.target.files[0].name);
})
</script>
(Also using Bootstrap v4.4.1 and jQuery v3.4.1)