I have uploaded the image and crop it with croppie, the image successfully updates the database and successfully enters the directory.
but the new image overwrites the old image with the same name, it was intentionally done. but the image displayed again by php remains the old image (the image has been overwritten with the new one)
Initially there was no problem but when I didn't open the project for more than 2 week there was a problem like the one above
HTML tag
<div class="col-sm-3">
<h4>Profile Picture</h4>
<hr>
<form action="" id="form" method="post">
<label class="cabinet center-block">
<figure><img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
<figcaption><i class="fa fa-camera"></i></figcaption>
</figure>
<input type="file" class="item-img file center-block" name="file_photo"/>
</label>
</form>
</div>
JS with CROPPIE
<script type="text/javascript">
// Start upload preview image
$(".gambar").attr("src", "../profile/pictures/img/<?=$profile['profile']?>");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Desculpe, seu navegador não suporta o FileReader API.");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 230,
height: 230,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 270, height: 270}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
//$('#cropImagePop').modal('hide');
$.ajax({
url: "../lib/proses/upload.php",
type: "POST",
data: {"image":resp},
success: function (data) {
html = '<img src="' + resp + '" />';
$("#upload-image-i").html(html);
$('#cropImagePop').modal('hide');
swal.fire(
'Berhasil !',
'Profile berhasil diubah',
'success'
)
}
});
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
</script>
Upload Process
<?php
session_start();
require "../koneksi.php";
$username = $_SESSION['username'];
$croped_image = $_POST['image'];
list($type, $croped_image) = explode(';', $croped_image);
list(, $croped_image) = explode(',', $croped_image);
$croped_image = base64_decode($croped_image);
$image_name = $username.'.png';
// insert name to database
$sql = "UPDATE users SET profile = '$image_name' WHERE username = '$username'";
$query = mysqli_query($conn, $sql);
// upload cropped image to server
file_put_contents('../../profile/pictures/img/'.$image_name, $croped_image);
?>
I want the newly uploaded image to appear to replace the old image in the file that displays the image (ex. index file, etc.)
