Uploading Image with Bio to PHP via AJAX jQuery - php

Question

I want to upload User images via AJAX to PHP Database. I tried multiple tutorials and other examples but nothing worked for my code. The codes work when used without AJAX but since I don't wish my users to see the upload page and stay on the same page that's why the thought of adding AJAX to the code. So have been trying this code for the past few hours but nothing worked in my favor. The files are not getting uploaded nor the data in the database is getting updated.
file: test.php
<script>
function triggerClick(e) { document.querySelector('#profileImage').click(); }
function displayImage(e) { if (e.files[0]) {
var reader = new FileReader();
reader.onload = function(e){
document.querySelector('#profileDisplay').setAttribute('src', e.target.result);
}
reader.readAsDataURL(e.files[0]); } }
$(document).on('click',"#UploadImage", function(){
var fd = new FormData();
var profileImage = $('#profileImage')[0].files[0];
//fd.append('profileImage',profileImage);
var bio = document.getElementById( "bio" ).value;
$.ajax({
url:"include/Upload.php",
method:"POST",
data: fd,
contentType: false,
processData: false,
success:function(data){
alert(data);
if(data == "Login Successful") {
}
else {
alert(data);
}
}
})
});
</script>
File : Upload .php
<?php
session_start();
include('connection.php');
$msg = "";
$msg_class = "";
$Username = $_SESSION['Username'];
//echo var_dump($Username);
$conn = mysqli_connect("localhost", "root", "1234567890", "test");
$Status = stripslashes($_POST['bio']);
echo var_dump($Status);
$profileImageName = $Username. '-' . time() . '-' . $_FILES['profileImage']['name'];
echo var_dump($profileImageName);
$target_dir = "../UserImages/";
$target_file = $target_dir . basename($profileImageName);
if($_FILES['profileImage']['size'] > 200000) {
$msg = "Image size should not be greated than 200Kb";
$msg_class = "alert-danger";
}
// check if file exists
if(file_exists($target_file)) {
$msg = "File already exists";
$msg_class = "alert-danger";
}
// Upload image only if no errors
if (empty($error)) {
if(move_uploaded_file($_FILES["profileImage"]["tmp_name"], $target_file)) {
$sql = "UPDATE users_login SET Image='$profileImageName', Status='$Status' WHERE Username='$Username'";
echo var_dump($sql);
//header("location: profiles.php")
if(mysqli_query($conn, $sql)){
session_start();
$query="select * from $dbtable WHERE Username = '".$Username."' ";
echo $query;
$result2=#mysqli_query($connection,$query);
$row=mysqli_fetch_assoc($result2);
$_SESSION['ProfileImage']= $row['Image'];
print_r($_SESSION['ProfileImage']);
$_SESSION['Status']= $row['Status'];
$msg = "Image uploaded and saved in the Database";
$msg_class = "alert-success";
} else {
$msg = "There was an error in the database";
$msg_class = "alert-danger";
}
} else {
$error = "There was an error uploading the file";
$msg = "alert-danger";
}
}
?>

Answer 1

Removing those comments // worked and had to add another append line for bio and it worked. It wasn't working yesterday that's why I commented // on it. It's working properly now! Here's my new code that made it work...
var fd = new FormData();
var profileImage = $('#profileImage')[0].files[0];
fd.append('profileImage',profileImage);
var bio = document.getElementById( "bio" ).value;
fd.append('bio', bio);
Credits to: Ken Lee & charlietfl for their comments.