Gestion des envois des images entre frontend et backend

Bonjour,

je suis débutant en JS et React. Je suis sur un projet pour le moment géré en local sur mon PC.

Je cherche à envoyer une image depuis un formulaire du frontend pour quelle soit enregistrée dans le backend dans le dossier backend/controllers/images et que le lien soit stocké dans ma base de donnée SQL.

Quelqu'un pour me mettre sur la bonne voie ? Merci d'avance

Bonjour !

Côté front avec React, il va falloir que tu créer un formulaire (un object FormData), que tu vas envoyer à un script de ton back.
Et c'est ton back qui, en recevant le fichier, va faire le travail de le copier dans le bon répertoire et de le stocker en base.

En quoi est codé ton back ?

Bonjour,

Merci pour ta réponse.

J'utilise JS pour le backend

J'ai créé un formData que j'envoi avec Fetch au back mais ca ne fonctionne toujours pas.

J'ai un doute si c'est bien ce que je dois récupérer du formulaire pour l'image : C:\fakepath\photo test.jpg.

Je joins mon code pour le formulaire et pour la requête fetch.

J'espère que quelqu'un pourra m'aider à trouver mon erreur.

Pièce jointe 628836 Pièce jointe 628837

Et côté back, tu utilises multer ?
Tu as regardé avec les outils de dev du navigateur ce que contenait la requête envoyée, si il y avait l'image ou non ?

Ah si, il manque un truc à ton front, à rajouter aux options de ton fetch :

Code:

---

1 2 3

headers: { "Content-Type": "multipart/form-data" }

---

Oui dans le back, j'utilise Multer

Dans outil Network pour la requête, j'ai les infos ci dessous.

Pièce jointe 628843

Et en ajoutant le content-type dans les options du fetch ?
(S'il n'est pas là, clairement tu n'auras pas le fichier)

J'ai ajouté : 'Content-Type': 'form-data' mais j'ai toujours un problème. La photo n'est pas enregistrée dans le backend.

Je me demande si le problème ne vient pas également du back.

Je pense que je ne gère pas correctement l'enregistrement de l'image dans le back.

Une idée ? Merci d'avance pour votre aide

Pièce jointe 628847 Pièce jointe 628846

Ah, j'ai trouvé le problème, mais a priori toi aussi.

C'était bien au niveau du front, au moment d'ajouter l'image au FormData.

Il ne faut passer input.value en argument (qui est la valeur en string de ton fichier), mais input.files[0].