creation backend fonction import img cloudinary

frontend/src/components/ImageUploaderCloudinary.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+const CLOUD_NAME = "dh5qgexjo";
+const UPLOAD_PRESET = "preset_articles"; // crée-le dans Cloudinary si ce n’est pas encore fait
+const FOLDER = "articles-octopus";
+
+const ImageUploaderCloudinary = ({ onUploadSuccess }) => {
+  const handleUpload = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("upload_preset", UPLOAD_PRESET);
+    formData.append("folder", FOLDER);
+
+    const res = await fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = await res.json();
+
+    if (data.secure_url) {
+      const transformedUrl = data.secure_url.replace("/upload/", "/upload/f_webp,w_800/");
+      onUploadSuccess(transformedUrl); // ← Ici on t'envoie l’URL optimisée
+    } else {
+      alert("❌ Erreur lors de l'upload");
+    }
+  };
+
+  return <input type="file" accept="image/*" onChange={handleUpload} />;
+};
+
+export default ImageUploaderCloudinary;