Send data with images using fetch api but array of files is empty php

Question

my intention is to try pass a json to php using fetch api, all the data from the json pases except the data from the files and i used var dump to check the data that i was reciveing, why cant i not get the files data? post data: i did not copy all the inpust of the form

<form method="post" id='almacenInfo' enctype="multipart/form-data" name='almacenInfo'>
                            <label for="NombreInput">Nombre de producto</label>
                            <input type="text" class="form-control" id="NombreInput" placeholder="Nombre">
                        <div id='content_files'>
                            <button type="button" class="subir_archivos fa fa-upload">
                                <input id="upload_input" type="file" name="archivos" filename="name" accepted=".png,.jpg,.jpeg,.svg">
                            </button>
                        </div>
                        <div class="modal-footer">
                            <button type='submit' class="btn btn-primary">Save changes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </form>

var img = []
form.addEventListener('submit', function(e){
    e.preventDefault();
    let data = {
        opcion: form.getAttribute('modalTipo'),
        idProducto: form.getAttribute('idProducto'),
        nombre: document.getElementById('NombreInput').value,
        precio: document.getElementById('PrecioInput').value,
        cantidad: document.getElementById('CantidadInput').value,
        categoria: document.getElementById('EtiquetasInput').value,
        descripcion: document.getElementById('descripcionInput').value,
        img: img
    };
    console.log(data);
    fetchData(data);
     
});

document.getElementById('upload_input').addEventListener('change', function(e){
    if (this.files.length > 0) {
        let fileName = this.files[0].name;
        let exists = false;
        img.forEach(i => {
            if (i.name == fileName) {
                exists = true;
            }
        });
        console.log(exists);
        if (exists) {
            console.log('ya existe esta imagen');
        } else{
            
            document.getElementById('content_files').append(fileName) ;
            img.push(this.files[0]);
        }
    }
})

<?php
   include_once('./conexion.php');
    include_once('./apis/apiAlmacen.php');
    
    $json = file_get_contents('php://input');
    $obj = json_decode($json,true);

    var_dump($obj);
?>

json in front end when i do a console log of data :

var dump of $obj in backend:

Answer 1

I think you get null because the value img is a binary file when you read it with php read ,

So try to use FormData() to create the correct Json full example