Uploading a file to Database using xml request

Question

So here is what I am trying to do:

1. I do not have a form. I only have a couple of input fields and the button that leads to some js code.

2. After the validation has been completed with js - then the .submit-form button appears.

3. If pressed - it collects the values from all the input fields.

4. I then send an xml request. I pass the variables into the PHP script using the POST method.

5. I also want to pass the image as a file and then save all the data with the image into my database.

6. If I try to get all the values using $_POST - it works great. But if I try the image using this:

   $image = file_get_contents($_FILES[$image_post]["temp_name"]);
   

   it fails and says: file_get_contents(): Filename cannot be empty;

$('.submit-form').click(function() {
        const xhr = new XMLHttpRequest();

        xhr.onload = function() {
            const serverResponse = document.getElementById("data-comments");
            serverResponse.innerHTML = this.responseText;
            $(".comments").css("display","block");
        };

        xhr.open("POST", "js/admin/post_product.php");
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        
        //finding the child elements for each of the shops
        $(".shops").children().each(function (){
            //Source
            adress = "#"+this.id+" "+"."+"SourceClass";
            item = $(adress);
            id = "#"+item.attr("id");
            value = $(id).val();
            var source = ""
            source = source.concat("&Source"+id.slice(-1)+"="+value);

            //Link
            //In this part I am finding the id of the element 
            adress = "#"+this.id+" "+"."+"LinkClass";
            item = $(adress);
            id = "#"+item.attr("id");
            value = $(id).val();
            var link = "";
            //creating the part of the ajaxRequest
            link = link.concat("&Link"+id.slice(-1)+"="+value);

            //Price
            //In this part I am finding the id of the element 
            adress = "#"+this.id+" "+"."+"PriceClass";
            item = $(adress);
            id = "#"+item.attr("id");
            value = $(id).val();
            var price = "";
            //creating the part of the ajaxRequest
            price = price.concat("&Price"+id.slice(-1)+"="+value);

            //Image
            //In this part I am finding the id of the element 
            adress = "#"+this.id+" "+"."+"ImageClass";
            item = $(adress);
            id = "#"+item.attr("id");
            value = $(id).val();
            var image = "";
            //creating the part of the ajaxRequest
            image = image.concat("&Price"+id.slice(-1)+"="+value);

            ajaxRequest = ajaxRequest.concat(source,link,price,image);
        });
        
        xhr.send(ajaxRequest);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Also, the database is phpmyadmin and is using blob datatype for image. Can someone recommend me how to add the image to the $_FILES properly? Because I believe this is what the mistake is. Also, all my code is made using this method and I really would not want to change everything just for the picture uploading.

Thank you!!