I have following HTML code:
<div class="row mb-3">
                                                    <label for="profilePicture" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <div class="d-flex">
                                                            <?php if (isset($profile_image)) { ?>
                                                                <img id="profileImage" src="<?php echo BASE_URL; ?>assets/images/users/profile.jpg" class="flex-shrink-0 avatar-lg img-thumbnail" alt="Profile">
                                                            <?php } else { ?>
                                                                <img id="profileImage" src="<?php echo BASE_URL; ?>assets/images/users/profile.jpg" class="flex-shrink-0 avatar-lg img-thumbnail" alt="Profile">
                                                            <?php } ?>
                                                            <div class="w-100 ps-3">
                                                                <div class="text-body-secondary font-monospace text-break small" id="fileName"></div>
                                                                <div class="text-body-secondary font-monospace small" id="fileSize"></div>
                                                                <div class="text-body-secondary font-monospace small" id="fileType"></div>
                                                            </div>
                                                        </div>
                                                        <div class="pt-2">
                                                            <div id="profileProgress" class="progress mb-2 d-none" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="height: 5px">
                                                                <div id="profileProgressStatus" class="progress-bar progress-bar-striped progress-bar-animated"></div>
                                                            </div>
                                                            <input class="d-none" type="file" name="profile_picture" id="profilePicture" onchange="fileSelected();" />
                                                            <label for="profilePicture" class="btn btn-primary btn-sm pb-0 px-1 me-2" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Upload Your Profile Picture">
                                                                <i class="dripicons-upload"></i>
                                                            </label>
                                                            <button id="deleteProfilePicture" class="btn btn-danger btn-sm pb-0 px-1" type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete Current Profile Picture" title="Delete Current Profile Picture"><i class="dripicons-trash"></i></button>
                                                        </div>
                                                    </div>
                                                </div>

And following JavaScript code:
var deleteProfilePictureBtn = document.getElementById('deleteProfilePicture');
        deleteProfilePictureBtn.addEventListener("click", function() {
            document.getElementById('profileImage').src = "<?php echo BASE_URL; ?>assets/images/users/profile.jpg";
            document.getElementById('profilePicture').value = "";
            document.getElementById('fileName').innerHTML = "";
            document.getElementById('fileSize').innerHTML = "";
            document.getElementById('fileType').innerHTML = "";
        });

        function fileSelected() {
            var file = document.getElementById('profilePicture').files[0];

            if (file) {
                var fileSize = 0;
                var filename = file.name;
                var fileType = /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)$/i;
                if (!fileType.exec(filename)) {
                    alert("Please select valid image file!");
                    document.getElementById('profilePicture').value = '';
                    return false;
                } else {
                    if (file.size > 1024 * 1024) {
                        fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                    } else {
                        fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                        document.getElementById('fileName').innerHTML = '<b>Name:</b> ' + filename;
                        document.getElementById('fileSize').innerHTML = '<b>Size:</b> ' + fileSize;
                        document.getElementById('fileType').innerHTML = '<b>Type:</b> ' + file.type;
                    }
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('profileImage').src = e.target.result;
                    };

                    reader.readAsDataURL(document.getElementById('profilePicture').files[0]);
                }
            }
        }

        //Need to add this code for sending the data
        function updateProfile() {
            var fd = new FormData();
            fd.append("profilePicture", document.getElementById('profilePicture').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadComplete, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "<?php echo BASE_URL; ?>ajax/update-profile.php");
            xhr.send(fd);
        }

        function uploadProgress(evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                document.getElementById('profileProgressStatus').style.width = percentComplete.toString() + '%';
                document.getElementById("profileProgress").classList.remove("d-none");
            } else {
                document.getElementById('profileProgressStatus').innerHTML = 'Unable to compute progress!';
            }
        }

        function uploadComplete(evt) {
            alert(evt.target.responseText);
        }
        function uploadFailed(evt) {
            alert("There was an error attempting to upload the file.");
        }
        function uploadCanceled(evt) {
            alert("The upload has been canceled by the user or the browser dropped the connection.");
        }

Now, I want you to write PHP code (update-profile.php) to handle server side part to upload image.