Meilleure façon de stocker des images dans l'application Web MERN stack

Une option consiste à télécharger l'image sur Cloudinary côté client et enregistrez l'URL renvoyée dans MongoDB avec votre propre API. Cloudinary ne se contente pas d'héberger vos images, il gère également la manipulation et l'optimisation des images, etc.

En gros, ce que vous devrez faire, c'est :

1. Créez un compte Cloudinary
2. Allez dans Paramètres > Télécharger
3. Ajouter un "préréglage de téléchargement" avec le "mode non signé" pour permettre le téléchargement non signé vers Cloudinary

Ensuite, votre fonction de téléchargement peut ressembler à ceci :

async function uploadImage(file) { // file from <input type="file"> 
  const data = new FormData();
  data.append("file", file);
  data.append("upload_preset", NAME_OF_UPLOAD_PRESET);

  const res = await fetch(
    `https://api.cloudinary.com/v1_1/${YOUR_ID}/image/upload`,
    {
      method: "POST",
      body: data,
    }
  );
  const img = await res.json();
  // Post `img.secure_url` to your server and save to MongoDB
}