Image Blob not adding to the mySQL Database

So I tried so many times and tried changing things and still not working, It still add and throw null here’s the code of the HTML, PHP and also JS (just incase needed). I already tried to do some of the methods on github and stack overflow and still doesn’t work. I hope someone can help me with this issue I really appreciate it thank you

          <!-- 8 avatar/profile picture -->       
          <div class="tab">
            <div class="file-upload">
                Profile Picture:
                <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Select Picture</button>
                <p style="font-size: 10px;">Please upload a decent photo, This will go under verification.</p>   
                <div class="image-upload-wrap">
                        <input id='avatar' class="file-upload-input" type='file' name="avatar" onchange="readURL(this);" accept=".png, .jpg, .jpeg" />
                      <div class="drag-text">
                          <h3>Upload a Photo</h3>
                      </div>
                  </div>
                  <div class="file-upload-content">
                        <img class="file-upload-image" src="#" alt="your image" />
                            <div class="image-title-wrap">
                                <button type="button" onclick="removeUpload()" class="remove-image"><i class="fas fa-trash-alt"></i></button>
                            <br/>
                            </div>
                  </div>
                  <script src="./assets/js/add_photo.js"></script>
            </div>                        
          </div>   

//Profile Picture
$avatar = $_FILES['avatar']['tmp_name'];
$avatar_name = $_FILES['avatar']['name'];
$xavatar = base64_encode(file_get_contents(addslashes($avatar)));   

//I did not include other data since it is unrelated to this topic
$sql = "INSERT INTO users_tb(user_avatar)VALUES('$xavatar')";
$statement = $conn->prepare($sql);
$statement->execute([
':user_avatar' => $xavatar
]);

//avatar
function readURL(input) {
if (input.files && input.files[0]) {

  var areader = new FileReader();

  areader.onload = function(e) {
    $('.image-upload-wrap').hide();

    $('.file-upload-image').attr('src', e.target.result);
    $('.file-upload-content').show();
    // <span class="image-title">Uploaded Image</span>
    //$('.image-title').html(input.files[0].name);
  };

  areader.readAsDataURL(input.files[0]);

} else {
  removeUpload();
}
}

function removeUpload() {
$('.file-upload-input').replaceWith($('.file-upload-input').clone());
$('.file-upload-content').hide();
$('.image-upload-wrap').show();
}
$('.image-upload-wrap').bind('dragover', function () {
      $('.image-upload-wrap').addClass('image-dropping');
  });
  $('.image-upload-wrap').bind('dragleave', function () {
      $('.image-upload-wrap').removeClass('image-dropping');
});

Answer

try this : get the $_FILE variable without base64encode function ( you have to use it when you take it from your database )

$avatar = file_get_contents($_FILES['avatar']['tmp_name']);    

Surprised that there is no sql error !? it seems to me that it should be like this :

$sql = "INSERT INTO users_tb(user_avatar)VALUES(:user_avatar)";
    $statement = $conn->prepare($sql);
    $statement->execute([
    ':user_avatar' => $xavatar
    ]);    

you must assign the value of user_avatar only during the execute statment