So, I need to upload the captured image and while submitting the form it throws the error that the index is not found but it is already present though.
The error caused is
Notice: Undefined index: photoStore in /Applications/XAMPP/xamppfiles/htdocs/ttgym/Files/dashboard/admin/edit_mem_submit.php on line 3
Could not save image! check file permission.
edit_member.php file
<?php
require '../../include/db_conn.php';
page_protect();
if (isset($_POST['name'])) {
$memid = $_POST['name']; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edit Member</title>
<link rel="stylesheet" href="../../css/style.css" id="style-resource-5">
<script type="text/javascript" src="../../js/Script.js"></script>
<link rel="stylesheet" href="../../css/dashMain.css">
<link rel="stylesheet" type="text/css" href="../../css/entypo.css">
<link href="a1style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
#button1
{
width:126px;
}
#boxxe
{
width:230px;
}
.page-container .sidebar-menu #main-menu li#hassubopen > a {
background-color: #2b303a;
color: #ffffff;
}
.img{
width: 200;
height: 200px;
}
</style>
</head>
<body class="page-body page-fade" onload="collapseSidebar()">
<!-- <div><section> -->
<div class="page-container sidebar-collapsed" id="navbarcollapse">
<div class="sidebar-menu">
<header class="logo-env">
<!-- logo -->
<div class="logo">
<a href="main.php">
<img src="../../images/logo.png" alt="" width="192" height="80" />
</a>
</div>
<!-- logo collapse icon -->
<div class="sidebar-collapse" onclick="collapseSidebar()">
<a href="#" class="sidebar-collapse-icon with-animation"><!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
<i class="entypo-menu"></i>
</a>
</div>
</header>
<?php include 'nav.php'; ?>
</div>
<div class="main-content">
<div class="row">
<!-- Profile Info and Notifications -->
<div class="col-md-6 col-sm-8 clearfix">
</div>
<!-- Raw Links -->
<div class="col-md-6 col-sm-4 clearfix hidden-xs">
<ul class="list-inline links-list pull-right">
<li>Welcome, <?php echo $_SESSION['username']; ?>
</li>
<li>
<a href="logout.php">
Log Out <i class="entypo-logout right"></i>
</a>
</li>
</ul>
</div>
</div>
<h3>Edit Member Details</h3>
<hr/>
<?php
$query = "SELECT * FROM users u
INNER JOIN address a ON u.userid=a.id
INNER JOIN health_status h ON u.userid=h.uid
WHERE userid='$memid'";
//echo $query;
$result = mysqli_query($con, $query);
$sno = 1;
$name = '';
$gender = '';
if (mysqli_affected_rows($con) == 1) {
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
// echo $row['image'];
$name = $row['username'];
$image = $row['image'];
$gender = $row['gender'];
$mobile = $row['mobile'];
$email = $row['email'];
$dob = $row['dob'];
$jdate = $row['joining_date'];
$streetname = $row['streetName'];
$city = $row['city'];
$zipcode = $row['zipcode'];
$height = $row['height'];
$weight = $row['weight'];
$remarks = $row['remarks'];
}
} else {
echo "<html><head><script>alert('Change Unsuccessful');</script></head></html>";
echo mysqli_error($con);
}
?>
<div class="a1-container a1-small a1-padding-32" style="margin-top:2px; margin-bottom:2px;">
<div class="a1-card-8 a1-light-gray" style="width:600px; margin:0 auto;">
<div class="a1-container a1-dark-gray a1-center">
<h6>EDIT MEMBER PROFILE</h6>
</div>
<form id="form1" name="form1" method="post" enctype="multipart/form-data" class="a1-container" action="edit_mem_submit.php">
<table width="100%" border="0" align="center">
<tr>
<td height="35"><table width="100%" border="0" align="center">
<tr>
<td height="35">User ID:</td>
<td height="35"><input id="boxxe" type="text" name="uid" readonly required value=<?php echo $memid; ?>></td>
</tr>
<tr>
<td height="35">NAME:</td>
<td height="35"><input id="boxxe" type="text" name="uname" value='<?php echo $name; ?>'></td>
</tr>
<tr>
<td height="35">OLD IMAGE:</td>
<td height="35">
<!-- id="showImage" -->
<img class="boxx" src="<?php echo $image; ?>" width="200" height="200" alt=""><br>
</td>
<!-- <td><br></td> -->
</tr>
<tr>
<td height="35">NEW IMAGE:</td>
<td height="35"><br><div id="showImage" class="d-none"><br></td>
<!-- <td><br></td> -->
</tr>
<tr>
<td height="35">CAPTURE IMAGE</td>
<td><button class="btn btn-warning text-white" id="accesscamera" data-toggle="modal" data-target="#photoModal">
Capture Photo
</button></td>
<!-- <td><button class="btn btn-danger text-white" id="closecamera">
Stop camera
</button></td> -->
</tr>
<tr>
<td height="35">GENDER:</td>
<td height="35"><select id="boxxe" name="gender" id="gender" required>
<option <?php if ($gender == 'Male') {
echo 'selected';
} ?> value="Male">Male</option>
<option <?php if ($gender == 'Female') {
echo 'selected';
} ?> value="Female">Female</option>
</select></td><br>
</tr>
<tr>
<td height="35">MOBILE:</td>
<td height="35"><input id="boxxe" type="number" name="phone" maxlength="10" value=<?php echo $mobile; ?>></td>
</tr>
<tr>
<td height="35">EMAIL:</td>
<td height="35"><input id="boxxe" type="email" name="email" required value=<?php echo $email; ?>></td>
</tr>
<tr>
<td height="35">DATE OF BIRTH:</td>
<td height="35"><input type="date" id="boxxe" name="dob" value=<?php echo $dob; ?>></td>
</tr>
<tr>
<td height="35">JOINING DATE:</td>
<td height="35"><input type="date" id="boxxe" name="jdate" value=<?php echo $jdate; ?>></td>
</tr>
<tr>
<td height="35">STREET NAME:</td>
<td height="35"><input type="text" id="boxxe" name="stname" value='<?php echo $streetname; ?>'></td>
</tr>
<tr>
<td height="35">ZIPCODE:</td>
<td height="35"><input type="text" id="boxxe" name="zipcode" value='<?php echo $zipcode; ?>'></td>
</tr>
<tr>
<td height="35">HEIGHT:</td>
<td height="35"><input type="text" id="boxxe" name="height" value=<?php echo $height; ?>></td>
</tr>
<tr>
<td height="35">WEIGHT:</td>
<td height="35"><input type="text" id="boxxe" name="weight" value=<?php echo $weight; ?>></td>
</tr>
<br>
<tr>
<tr>
<td height="35"> </td>
<td height="35"><input class="a1-btn a1-blue" type="submit" name="submit" id="submit" value="UPDATE" >
<input class="a1-btn a1-blue" type="reset" name="reset" id="reset" value="Reset"></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
</div>
<!-- </section> -->
<!-- Modal -->
<div class="modal fade" id="photoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Capture Photo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<div id="my_camera" class="d-block mx-auto rounded overflow-hidden"></div>
</div>
<div id="results" class="d-none"></div>
<form method="post" id="photoForm">
<input type="hidden" id="photoStore" name="photoStore" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning mx-auto text-white" id="takephoto">Capture Photo</button>
<button type="button" class="btn btn-warning mx-auto text-white d-none" id="retakephoto">Retake</button>
<button type="submit" class="btn btn-warning mx-auto text-white d-none" id="uploadphoto" form="photoForm">Upload</button>
</div>
</div>
</div>
</div>
<?php include 'footer.php'; ?>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script src="./plugin/sweetalert/sweetalert.min.js"></script>
<script src="./plugin/webcamjs/webcam.min.js"></script>
<script src="main.js"></script>
</body>
</html>
<?php
} else {
}
?>
main.js file
$(document).ready(function() {
Webcam.set({
width: 240,
height: 160,
image_format: 'jpeg',
jpeg_quality: 90
});
$('#accesscamera').on('click', function(e) {
e.preventDefault();
Webcam.reset();
Webcam.on('error', function(e) {
console.log(e);
$('#photoModal').modal('hide');
swal({
title: 'Warning',
text: 'Please give permission to access your webcam',
icon: 'warning'
});
});
Webcam.attach('#my_camera');
});
$('#takephoto').on('click', take_snapshot);
$('#retakephoto').on('click', function(e) {
e.preventDefault();
$('#my_camera').addClass('d-block');
$('#my_camera').removeClass('d-none');
$('#results').addClass('d-none');
$('#takephoto').addClass('d-block');
$('#takephoto').removeClass('d-none');
$('#retakephoto').addClass('d-none');
$('#retakephoto').removeClass('d-block');
$('#uploadphoto').addClass('d-none');
$('#uploadphoto').removeClass('d-block');
});
$('#photoForm').on('submit', function() {
// e.preventDefault();
$.ajax({
url: 'photoUpload.php',
type: 'POST',
data: new FormData(this),
contentType: false,
processData: false,
success: function(data) {
if(data == 'success') {
Webcam.reset();
// document.getElementById("showImage").src=""
$('#my_camera').addClass('d-block');
$('#my_camera').removeClass('d-none');
$('#results').addClass('d-none');
$('#takephoto').addClass('d-block');
$('#takephoto').removeClass('d-none');
$('#retakephoto').addClass('d-none');
$('#retakephoto').removeClass('d-block');
$('#uploadphoto').addClass('d-none');
$('#uploadphoto').removeClass('d-block');
$('#photoModal').modal('hide');
swal({
title: 'Success',
text: 'Photo uploaded successfully',
icon: 'success',
buttons: false,
closeOnClickOutside: false,
closeOnEsc: false,
timer: 2000
})
}
else {
swal({
title: 'Error',
text: 'Something went wrong',
icon: 'error'
})
}
}
})
})
})
function take_snapshot()
{
//take snapshot and get image data
Webcam.snap(function(data_uri) {
//display result image
// $('#results').html('<img src="' + data_uri + '" class="d-block mx-auto rounded"/>');
$('#showImage').html('<img name="imgStore" id="imgStore" width="320" height="240" src="' + data_uri + '" class="d-block mx-auto rounded"/>');
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
// console.log(raw_image_data);
$('#photoStore').val(raw_image_data);
console.log($('#photoStore').val());
});
Webcam.reset();
$('#my_camera').removeClass('d-block');
$('#my_camera').addClass('d-none');
$('#results').removeClass('d-none');
$('#showImage').removeClass('d-none');
$('#takephoto').removeClass('d-block');
$('#takephoto').addClass('d-none');
$('#retakephoto').removeClass('d-none');
$('#retakephoto').addClass('d-block');
$('#uploadphoto').removeClass('d-none');
$('#uploadphoto').addClass('d-block');
$('#photoModal').modal('hide');
}
edit_mem_submit.php file
<?php
echo $_POST['uname'];
$encoded_data = $_POST['photoStore'];
$binary_data = base64_decode($encoded_data);
$photoname = uniqid() . '.jpeg';
$result = file_put_contents('uploads/' . $photoname, $binary_data);
if ($result) {
$fileName = 'uploads/' . $photoname;
insertDetails('cools');
} else {
echo die('Could not save image! check file permission.');
}
function insertDetails($fileName)
{
require '../../include/db_conn.php';
page_protect();
$uid = $_POST['uid'];
$uname = $_POST['uname'];
$gender = $_POST['gender'];
$mobile = $_POST['phone'];
$email = $_POST['email'];
$dob = $_POST['dob'];
$jdate = $_POST['jdate'];
$stname = $_POST['stname'];
// $state=$_POST['state'];
$city = $_POST['city'];
$zipcode = $_POST['zipcode'];
$height = $_POST['height'];
$weight = $_POST['weight'];
$remarks = $_POST['remarks'];
$query1 =
"update users set username='" .
$uname .
"',gender='" .
$gender .
"',mobile='" .
$mobile .
"',email='" .
$email .
"',dob='" .
$dob .
"',joining_date='" .
$jdate .
"' where userid='" .
$uid .
"'";
if (mysqli_query($con, $query1)) {
$query2 =
"update address set streetName='" .
$stname .
"',city='" .
$city .
"',zipcode='" .
$zipcode .
"' where id='" .
$uid .
"'";
if (mysqli_query($con, $query2)) {
$query3 =
"update health_status set height='" .
$height .
"',weight='" .
$weight .
"',remarks='" .
$remarks .
"' where uid='" .
$uid .
"'";
if (mysqli_query($con, $query3)) {
echo "<html><head><script>alert('Member Update Successfully');</script></head></html>";
echo "<meta http-equiv='refresh' content='0; url=view_mem.php'>";
} else {
echo "<html><head><script>alert('ERROR! Update Opertaion Unsucessfull');</script></head></html>";
echo 'error' . mysqli_error($con);
}
} else {
echo "<html><head><script>alert('ERROR! Update Opertaion Unsucessfull');</script></head></html>";
echo 'error' . mysqli_error($con);
}
} else {
echo "<html><head><script>alert('ERROR! Update Opertaion Unsucessfull');</script></head></html>";
echo 'error' . mysqli_error($con);
}
}
?>
edit_member.php file is called with a member ID and when I capture the image and the image is captured and I also tried to print the data value in console and it prints fine. But when it comes to submission it causes the error that the index is undefined
