Why does this Code to store an Image in my database not work?

Question

so I'm trying now for hours to store an Image in my Database, but I just don't get it. Currently I'm trying to get the image via file upload from the user, then store in the database as a BLOB. So practically storing the binary data of the image in the database.

<form action="editor.php" class="createBlogForm" autocomplete="off">
                    <input type="text" name="title" placeholder="Title" class="title">
                
                <?php include 'editor.html'; ?>
            </div>
            <div id="catAndSave">
                <select name="categoriesOnCreate" class="categoriesOnCreate">
                    <option value="option1">Option 1</option>
                    <option value="option2" selected="selected">Anderes</option>
                </select>
                <div id="coverImageDiv">
                    <label for="inputTag">
                        Select Cover Photo <br/>
                        <i class="fa fa-2x fa-camera"></i>
                        <input id="inputTag" type="file" name="image"/>
                        <br/>
                        <span id="imageName"></span>
                    </label>
                </div>
                  <script>
                    let input = document.getElementById("inputTag");
                    let imageName = document.getElementById("imageName")
            
                    input.addEventListener("change", ()=>{
                        let inputImage = document.querySelector("input[type=file]").files[0];
            
                        imageName.innerText = inputImage.name;
                    })
                </script>
                <button type="submit" class="blogSave" onclick="save();">Save</button>
                </form>

So this is my form, I know very unstructured and things, but it doesn't have to be.

When you click on the button this Code should be executed:

<script>
                function save(){
                    var xmlhttp = new XMLHttpRequest();
                    var content = document.getElementsByClassName('content')[0].innerHTML;
                    var title = document.getElementsByClassName('title')[0].value;
                    var category = document.getElementsByClassName('categoriesOnCreate')[0].value;
                    var data = new FormData();
                    data.append("content", content);
                    data.append("title", title);
                    data.append("category", category);
                    const queryString = window.location.search;
                    const urlParams = new URLSearchParams(queryString);
                    const id = urlParams.get('id');
                    xmlhttp.open("POST","editor.php?id=" + id ,true);
                    xmlhttp.send(data);
                    window.location = "http://192.168.56.104/sodablog/editor.php";
                };
            </script>

Doesn't quite work tho, because it never executes this, because i wrote in my form: action="editor.php". But that's not the point and doesn't matter, cause that's not the problem.

The problem is that PHP doesn't get my file to upload it. Here:

<?php
    ini_set('display_errors', '1');
    ini_set('display_startup_errors', '1');
    error_reporting(E_ALL);
    session_start();
    include 'dbconnect.php';

    $content = $_POST['content'];
    $title = $_POST['title'];
    $category = $_POST['category'];

    date_default_timezone_set('Europe/Rome');
    $date = date("YmdHis"); 

  
    $status = 'error'; 
    if(!empty($_FILES["image"]["name"])) { 
        // Get file info 
        $fileName = basename($_FILES["image"]["name"]); 
        $fileType = pathinfo($fileName, PATHINFO_EXTENSION); 
         
        // Allow certain file formats 
        $allowTypes = array('jpg','png','jpeg','gif'); 
        if(in_array($fileType, $allowTypes)){ 
            $image = $_FILES['image']['tmp_name']; 
            $imgContent = addslashes(file_get_contents($image));
         
            // Insert image content into database 
            $insert = $db->query("INSERT INTO `blog_posts`(`coverImage`) VALUES ('$imgContent');");
             
            if($insert){ 
                $status = 'success'; 
                $statusMsg = "File uploaded successfully."; 
            }else{ 
                $statusMsg = "File upload failed, please try again."; 
            }  
        }else{ 
            $statusMsg = 'Sorry, only JPG, JPEG, PNG, & GIF files are allowed to upload.'; 
        } 
    }else{ 
        $statusMsg = 'Please select an image file to upload.'; 
    } 

 
// Display status message 
echo $statusMsg;

    $sql = "INSERT INTO `blog_posts`(`created_at`, `last_updated_at`, `content`, `title`, `category`) 
    VALUES('$date', '$date', '$content', '$title', '$category');";
    $execution = mysqli_query($conn, $sql) or die("Fehler");
?>

For testing you could just here give these lines:

$content = $_POST['content'];
    $title = $_POST['title'];
    $category = $_POST['category'];

a value so no error appears because of these.

But I still get the error: Please select an image file to upload.

I'm new to PHP and JavaScript and Web-development in general, so sorry for the chaotic code.

Answer 1

You are not sending your image from your frontend to your backend.

function save(){
...    
var image = document.getElementById('inputTag').value;
...
var data = new FormData();
...
data.append(image.name,image.files[0]);
...