Image Read, upload with JS as Blob in Database and show on page

<?php

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "test";

// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

if(isset($_POST['image']) && $_POST['image']=='upload')
{
    $image = $_POST['string'] ;
    $sql = "INSERT INTO  image (name, image)
    VALUES ('image_name','".$image."')";

    if ($conn->query($sql) === TRUE) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }

}

?>

<HTML>
<HEAD>
<TITLE>Read image in JS</TITLE>
<style>
   #inputTextToSave {
        width:512px; 
        height:256px;
      }

      #holder { 
        border: 10px dashed #ccc; 
        width: 300px; 
        height: 300px; 
      }

      #holder.hover { 
        border: 10px dashed #333; 
      }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</HEAD>
<BODY>
<table>

      <tr>
        <td colspan="3">Binary data:</td>
      </tr>

      <tr>
        <td colspan="3">
          <textarea id="inputTextToSave"></textarea>
        </td>
      </tr>

      <tr>
        <td>Filename to Save As:</td>
        <td><input id="inputFileNameToSaveAs" /></td>
        <td><button onclick="saveImage()">Save file</button></td>
      </tr>

      <tr>
        <td>Select a File to Load:</td>
        <td><input type="file" id="fileToLoad" /></td>
          <td><button onclick="loadImage()">Load file</button></td>
      </tr>

      <tr>
        <td colspan="3" id="imagePreview">
        </td>
      </tr>

    </table>

<script>
var contentType = '';

      function destroyClickedElement(event) {
        document.body.removeChild(event.target);
      }

      window.loadImage = function() {
        var file = document.getElementById("fileToLoad").files[0];

        var reader = new FileReader();
        reader.onload = function(event) {
          var data = event.target.result;
          document.getElementById("inputTextToSave").value = data;

          var imagePreview = document.getElementById("imagePreview");
          imagePreview.innerHTML = '';

          var dataURLReader = new FileReader();
          dataURLReader.onload = function(event) {
            // Parse image properties
            var dataURL = event.target.result;
            $.post( "image_read_in_js.php", 
                { 
                    "image": "upload",
                    "string":dataURL 
                 },
                function( data ) {
              console.log( data);
            }, "json");
            contentType = dataURL.split(",")[0].split(":")[1].split(";")[0];

            var image = new Image();
            image.src = dataURL;
            image.onload = function() {
              console.log("Image type: " + contentType);
              console.log("Image width: " + this.width);
              console.log("Image height: " + this.height);
              imagePreview.appendChild(this);
            };
          };
          dataURLReader.readAsDataURL(file);


        };
        reader.readAsBinaryString(file);
      }
  
</script>

<div style="border: solid 1px;">
<?php
$sql = "SELECT * FROM image";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo '<img src="' .$row['image'] . '" />';
    }
} else {
    echo "0 results";
}

?>
</div>
</BODY>
</HTML>