[Résolu] Uploader plusieurs images avec multer

Bonjour à tous,
je viens vers vous car je sèche...

Sur une page html j'ai 2 input de type 'file' ("bigFile" et "smallFile") qui ne sont pas dans un formulaire et un bouton qui appelle une fonction ("ajout()").

Voici ma fonction (les inputs ont été déclarés plus haut dans mon fichier) :

function ajout() {
    if (bigFile.value || smallFile.value) {
        const head3 = {
            method: 'POST',
            body: JSON.stringify({'imageUrl1': bigFile.value, 'imageUrl2': smallFile.value}),
            headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionStorage.token}`}
        }
        fetch('http://localhost:4000/api/caroussel/', head3)
            .then(reponse => {
                if (reponse.status == 200) {
                    alert('Nouvelles images ajoutées avec succès !')
                }
                else {
                    return reponse.json({message: "Erreur"});
                }
            })
            .catch(e => {
                console.log("ça n'a pas marché...")
            })
    }
}

Le back-end reçoit bien la requête mais j'ai un souci avec multer. Voici le code du middleware :

const multer = require('multer');
const MIME_TYPES = {
    'image/jpg': 'jpg',
    'image/jpeg': 'jpg',
    'image/png': 'png',
    'image/bmp': 'bmp',
    'image/webp': 'webp',
    'image/tiff': 'tiff',
    'image/gif': 'gif'
};
const storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, 'images');
    },
    filename: (req, file, callback) => {
        const name = file.originalname.split(' ').join('_').split('.')[0];
        const extension = MIME_TYPES[file.mimetype];
        callback(null, name + Date.now() + '.' + extension);
    }
});
module.exports = multer({storage}).single('image');

A la sortie je me retrouve avec le chemin initial des images et non les fichiers renommés et rien ne s'upload.

Je me demande si le problème ne viendrait pas du fait que multer reçoit des 'String' au lieu de 'file' mais je ne suis pas sûr.
Qu'en pensez-vous ?

Je confirme que ce code n'est pas de moi. Je l'ai récupéré lors de ma formation openclassrooms. J'ai utilisé ce code dans plusieurs de mes précédents projets et il fonctionnait nickel.
La première différence avec mes projets précédents c'est qu'aujourd'hui je veux uploader 2 images de 2 input différents (qui ne sont pas dans un formulaire).

J'ai corrigé une première erreur. Je récupérai la valeur des input au lieu de récupérer les files.
Je crois qu'il faut procéder étape par étape car il y a quelques que chose que je n'ai pas compris apparemment (sinon je ne serais pas là ! mdr).

Voici ce que contient mon fichier .js côté front :

const bigFile = document.getElementById('bigFile').files[0];
const smallFile = document.getElementById('smallFile').files[0];

function ajout() {
    if (bigFile || smallFile) {
        if (!bigFile) {
            alert('Vous devez charger 2 fichiers image');
        }
        if (!smallFile) {
            alert('Vous devez charger 2 fichiers image');
        }

        const head3 = {
            method: 'POST',
            body: JSON.stringify({'imageUrl1': bigFile, 'imageUrl2': smallFile}),
            headers: {'Content-Type': 'application/json', 'Authorization': `Bearer ${sessionStorage.token}`}
        }
        
        fetch('http://localhost:4000/api/caroussel/', head3)
            .then(reponse => {
                if (reponse.status == 200) {
                    alert('Nouvelles images ajoutées avec succès !')
                }
                else {
                    return reponse.json({message: "Ne fonctionne pas"});
                }
            })
            .catch(e => {
                console.log("ça n'a pas marché...")
            })
    }
}

Côté client la requête échoue puisque je reçois un "ça n'a pas marché" dans la console.
La première question que je me pose. Est-ce que je me trompe dans ma façon d'envoyer mes 2 fichiers au backend ? Je ne suis pas convaincu que ma déclaration du body dans 'head3' soit bonne.
Une chose est sûre c'est que quand je demande au controller de m'afficher le body j'ai :

{ imageUrl1: {}, imageUrl2: {} }

Les imageUrl sont vides...
Y'a un passage par multer avant d'arriver au controller. Mais avant d'incriminer multer, faudrait que je sois sûr qu'il reçoit bien les fichiers...

En tout cas, merci d'avance pour votre aide.

Pour contourner l'erreur, dans mon fichier app.js j'ai modifié

app.use(express.json());

en

app.use(express.json({limit: '5mb'}));

Du coup j'ai une autre erreur :

SyntaxError: Unexpected token '-', "#" is not valid JSON

De plus en plus obscur pour moi...

J'ai trouvé la solution.
En fait, il fallait bien utiliser un formData. Par contre, du coup, il ne faut plus mettre "Content-Type: application/json" dans les headers. C'est ça qui me renvoyait les messages "Payload To Large" et "unexpected token...". Le navigateur s'occupe de transmettre le bon header c'est pour ça qu'il n'est pas nécessaire de remplacer le Content-Type par autre chose.
Egalement, à la dernière ligne du middleware multer, il faut remplacer "single('image')" par "any('image')".

C'est peut-être basique pour beaucoup mais perso ça m'a fait perdre beaucoup de temps. Comme quoi il reste toujours quelques chose à apprendre...

En espérant que mes déboires (et leur solution) servent à d'autres.
Modifié par Vahia (21 Jan 2023 - 18:25)