the image remains the same after being updated and uploaded with new images

Question

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.)

Answer 1

Have you checked your browser cache? Maybe try adding a random param to image path, like myimage.jpg?c=[randomNumber], this will force the browser to download the image again.