36 lines
1.1 KiB
React
36 lines
1.1 KiB
React
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;
|