What I need is that the images will be uploaded to a specific "user_id" found in the "userprofile" table. I have a bunch of codes taken from the other online source. Here are the following codes:
index.php
<?php
session_start();
include('database/dbconfig.php');
?>
<html>
<head>
<title>Make Price Range Slider using JQuery with PHP Ajax</title>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="croppie.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="croppie.css" />
<style>
.navbar-custom {
color: #FFFFFF;
background-color: #B7E772;
}
.navbar .navbar-toggler .icon-bar {
background: black !important;
}
.shadw {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<div class="container-fluid" style="margin-top:-31px;background-color:#E8FFC7;">
<div class="container">
<div class="jumbotron jumbotron-fluid" style="margin-bottom:-31px;background-color:#E8FFC7;">
<img class="img-fluid img-responsive" src="../images/LRrepository-header-banner.png" alt="">
</div>
</div>
</div>
<nav class="navbar navbar-custom shadw">
<div class="container-fluid">
<button type="button" class="navbar-toggle navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="../index.php"><span style="color:#000000;">HOME</span></a></li>
<li><a href="#"><span style="color:#000000;">Update Profile Photo</span></a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</li>
</ul>
<!--
</div>
</div>
</nav>
<div class="container">
<a href="../profile.php"><button type="button" class="btn btn-success">PROFILE</button></a>
<br />
<!--
<br />
<br />
<div class="panel panel-default">
<div class="panel-heading">Select Profile Photo</div>
<div class="panel-body" align="center">
<input type="file" name="upload_image" id="upload_image" />
<br />
<div id="uploaded_image"></div>
</div>
</div>
</div>
</body>
</html>
<?php
$query = "SELECT * FROM `userprofile` WHERE `user__email` = '".$_SESSION['username']."' ";
$query_run = mysqli_query($connection,$query);
if(mysqli_num_rows($query_run))
{
while($row = mysqli_fetch_array($query_run))
{
?>
<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload & Crop Image</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<!--
<input type="hidden" name="profile_id" value="<?php echo $row['user_id']?>">
<button name="upload_photo" class="btn btn-primary crop_image">Crop & Upload Image</button>
<!--
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<?php
}
}
else
{
$_SESSION ['status'] = "Not Yet Logged In!";
session_destroy();
$_SESSION = array();
header("location:login.php");
}
?>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:200,
height:200,
type:'circle'
},
boundary:{
width:300,
height:300
}
});
$('#upload_image').on('change', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
$('#uploadimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
});
</script>
And the codes inside upload.php
<?php
session_start();
include('database/dbconfig.php');
if(isset($_POST["image"]))
{
$data = $_POST["image"];
$query = "UPDATE `userprofile` SET `user_photo`='$data'";
$query_run = mysqli_query($connection, $query);
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$imageName = time() . '.png';
file_put_contents($imageName, $data);
echo '<img src="'.$imageName.'" class="img-thumbnail"/>';
}
?>
What I have tried:
I can't find the perfect solution to this problem. I hope that you could help me with this. Thanks!
Submit an article or tip