Bonjour tout le monde !

Je voudrai que dans ce formulaire, l'admin puisse ajouter un livre, avec diverses informations comme l'image. En AJAX ce serait mieux pour avoir le confort de lecture sans rechargement de la page...mais c'est galère ^^'.

J'ai mis un console.log dans events.js pour savoir si je récupérais bien le nom du fichier à envoyer, et j'obtiens ces messages d'erreur :

- Uncaught TypeError: Illegal invocation

- Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation

Vous auriez des idées sur la cause ?

Je continue de chercher de mon côté.

///////////////////////////////////////////////////////////////////////////////////////////////////////// admin.phtml

<h2>Formulaire d'ajout de livre</h2>
<div id="return"></div>
<form id="addBook" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Métadonnées</legend>
        <label for="title_book">Titre : </label>
        <input type="text" id="title_book" name="title_book")/>
        <label for="author_book">Auteur :</label>
        <input type="text" id="author_book" name="author_book"/>
        <label for="description_book">Description :</label>
        <textarea id="description_book" name="description_book" rows="5" cols="33"></textarea>
        <label for="inStock_book">Quantité :</label>
        <input type="number" min="0" id="inStock_book" name="inStock_book"/>
        <label for="img_book">Image :</label>
        <input type="file" id="img_book" name="img_book"/>
    </fieldset>
    <button type="submit">Ajouter nouveau livre</button>
</form>

///////////////////////////////////////////////////////////////////////////////////////////////////////// main.js

if(document.getElementById("addBook"))
    {
        document.getElementById("addBook").addEventListener("submit", onSubmitAddBook)
    }

///////////////////////////////////////////////////////////////////////////////////////////////////////// events.js

function onSubmitAddBook(e)
{
    // stop propagation 
    e.preventDefault()
    // input values
    const title = document.getElementById("title_book").value
    const author = document.getElementById("author_book").value
    const description = document.getElementById("description_book").value
    const inStock = document.getElementById("inStock_book").value
    const img = $('#img_book')[0].files[0];
    console.log($('#img_book')[0].files[0]);
    // ajax request 
    $.post  
    (
        "ajaxPost.php",
        {action: "addBook", title :title, author :author, description :description, inStock :inStock, img :img},
        // response
        function(data) 
        {
            // error messages
            if(data !== "success")
            {
                $("#return").html(data)
            }
            // new form
            else
            {
                getOneBookByTitle(title)
            }
        },
    ) 
    // reinitialize form
    document.getElementById("title_book").value = ""
    document.getElementById("author_book").value = ""
    document.getElementById("return").innerHTML = ""
}