Done with image media uploads to cloudinary

Author: Programming-Sai

env_skeleton

@@ -33,11 +33,12 @@ GOOGLE_ANALYTICS_PRIVATE_KEY=
 
 
 
+CLOUDINARY_CLOUD_NAME=
 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
-NEXT_PUBLIC_CLOUDINARY_API_KEY=
+CLOUDINARY_API_KEY=
 CLOUDINARY_API_SECRET=
 CLOUDINARY_URL=
-
+NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=
 
 
 

next.config.js

@@ -8,6 +8,7 @@ const nextConfig = {
       "avatars.githubusercontent.com",
       "scontent.facc6-1.fna.fbcdn.net",
       "media.licdn.com",
+      "res.cloudinary.com", 
     ],
   },
   // output: "export",

src/app/admin/editor/page.jsx

@@ -165,34 +165,47 @@ const Editor = () => {
     return updatedContent;
   };
 
+
+  const dataURLtoFile = (dataUrl) => {
+    const arr = dataUrl.split(",");
+    const mime = arr[0].match(/:(.*?);/)[1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], `upload-${Date.now()}`, { type: mime });
+  };
+  
+
 
   const processMediaUploads = async (content) => {
     const base64Images = extractBase64Images(content);
     const base64Map = {};
 
-    // Upload each base64 image using your new endpoint
+    // For each base64 image, convert to a File and upload it via handleImageUpload
     for (let base64 of base64Images) {
       try {
-        const res = await fetch("/api/uploadMedia", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ base64, folder: "blog_media" }),
-        });
-        const data = await res.json();
-        if (!res.ok) throw new Error(data.error);
-        const url = data.url; // URL returned from the endpoint
-        base64Map[base64] = url; // Store the mapping for replacement
-        
-        // Optionally update your local media array (if you need to track it)
-        setMedia((prev) => [...prev, url]);
+        // Convert the base64 string to a File object
+        const file = dataURLtoFile(base64);
+        // Upload the file using the refactored handleImageUpload function
+        const { url, publicId } = await handleImageUpload(file, "blog_media");
+        // Store the mapping from base64 to Cloudinary URL so you can replace it in the content
+        base64Map[base64] = url;
+  
+        // Optionally update your local media state array
+        setMedia((prev) => [...prev, { url, publicId }]);
       } catch (error) {
         console.error("Upload failed:", error);
       }
     }
 
+    // Replace each base64 string in your content with its uploaded URL
     return replaceBase64WithUrls(content, base64Map);
   };
 
+  
 
 
   const autoSaveDraft = async () => {
@@ -253,6 +266,8 @@ const Editor = () => {
       draft,
       keywords: Array.isArray(keywords) ? keywords : keywords.split(","),
       description,
+      media, // ✅ Store media in local storage
+
     };
 
     setPreviewData(blogData);
@@ -321,66 +336,6 @@ const Editor = () => {
 
 
 
-  const saveBlog = async () => {
-    const isUnique = await fetchSlugUniqueness(slug); // ✅ Ensure uniqueness before saving
-  
-    if (!isUnique) {
-      alert(`Title: ${title} is not unique. Choose another one.`);
-      return;
-    }
-  
-    // ✅ Process sanitization & YouTube fix only once at save time
-    let cleanContent = DOMPurify.sanitize(blogContent, {
-      FORBID_TAGS: ["script"],
-      ADD_TAGS: ["iframe", "style"],
-      ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "src", "width", "height", "title"],
-    });
-  
-    // ✅ Fix YouTube Shorts without clearing iframes
-    const tempDiv = document.createElement("div");
-    tempDiv.innerHTML = cleanContent;
-  
-    tempDiv.querySelectorAll("iframe").forEach((iframe) => {
-      let src = iframe.src;
-      if (src.includes("youtube.com/shorts/")) {
-        src = src.replace("youtube.com/shorts/", "youtube.com/embed/");
-      }
-      iframe.src = src; // ✅ Apply fixed URL
-    });
-  
-    const processedContent = tempDiv.innerHTML; // ✅ Final sanitized + fixed content
-  
-    console.log("AFTER CONTENT: ", processedContent);
-    
-    // ✅ Update state before saving so iframes don't disappear
-    setBlogContent(processedContent);
-  
-    const blogData = {
-      image,
-      title,
-      slug,
-      category,
-      blogContent: processedContent, // ✅ Use sanitized content
-      readingTime,
-      date,
-      draft,
-      keywords: typeof keywords === "string"
-        ? keywords.split(",").map((keyword) => keyword.trim())
-        : keywords,
-      description,
-    };
-  
-    setPreviewData(blogData);
-    setSaved(true);
-  
-    setTimeout(() => {
-      setSaved(false);
-    }, 5000);
-    localStorage.removeItem("previewData");
-  };
-
-
-
 
   useEffect(() => {
     const savedData = previewData; // Automatically handled by the useLocalStorage hook
@@ -456,18 +411,15 @@ const Editor = () => {
   // const [localStorageAutoSaveDuration, setLocalStorageAutoSaveDuration] = useLocalStorage("autoSaveDuration", "");
 
 
-  useEffect(() => {
-    console.log("AutoSave status:", autoSave?'active':'deactivated');
-    console.log("AutoSave Duration:", autoSaveDuration );
-  }, [autoSave]);
+  
 
   useEffect(() => {
     let interval;
     setLocalStorageAutoSave(autoSave);
     if (autoSave) {
-      console.log("Starting Auto Save...");
+      // console.log("Starting Auto Save...");
       interval = setInterval(async () => {
-        console.log("Calling Auto save");
+        // console.log("Calling Auto save");
         await autoSaveDraft();
       }, autoSaveDuration);
     }
@@ -519,7 +471,7 @@ const Editor = () => {
           />
         </div>
         <div className={styles.imgContainer}>
-          <ImageUploader image={image} setImage={setImage} />
+          <ImageUploader image={image} setImage={setImage} media={media} setMedia={setMedia} />
           {image && (
             <div
               className={styles.close}

src/app/api/deleteMedia/route.js

@@ -0,0 +1,36 @@
+import { NextResponse } from "next/server";
+import cloudinary from "cloudinary";
+
+ 
+
+cloudinary.v2.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME, // not NEXT_PUBLIC_*
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+  // secure: true,
+});
+export async function POST(request) {
+  try {
+    const { publicId } = await request.json();
+
+    if (!publicId) {
+      return NextResponse.json({ message: "publicId is required" }, { status: 400 });
+    }
+
+    // Delete the image using the publicId
+    const result = await cloudinary.v2.uploader.destroy(publicId, { invalidate: true });
+
+    // Optionally, you might want to check if the deletion was successful
+    if (result.result !== "ok") {
+      return NextResponse.json({ message: "Image deletion failed", result }, { status: 500 });
+    }
+
+    return NextResponse.json({ message: "Image deleted successfully", result }, { status: 200 });
+  } catch (error) {
+    console.error("Error deleting image:", error);
+    return NextResponse.json(
+      { message: "Something went terribly wrong" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/uploadMedia/route.js

@@ -1,33 +1,36 @@
 import { v2 as cloudinary } from "cloudinary";
 import { NextResponse } from "next/server";
 
-
 cloudinary.config({
-    cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
-    api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
-    api_secret: process.env.CLOUDINARY_API_SECRET,
-    secure: true,
-  });
-  
-  export async function POST(req) {
-    try {
-      const { base64, folder = "blog_media" } = await req.json();
-      if (!base64) {
-        return NextResponse.json({ error: "No image provided" }, { status: 400 });
-      }
-  
-      // Generate a unique public_id based on timestamp
-      const publicId = `upload-${Date.now()}`;
-  
-      const uploadedImage = await cloudinary.uploader.upload(base64, {
-        folder,
-        public_id: publicId, // Ensure unique filename
-        resource_type: "image",
-      });
-  
-      return NextResponse.json({ url: uploadedImage.secure_url }, { status: 200 });
-    } catch (error) {
-      console.error("Upload error:", error);
-      return NextResponse.json({ error: error.message }, { status: 500 });
+  cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+  secure: true,
+});
+
+export async function POST(req) {
+  try {
+    console.log("Received API Call: /api/uploadMedia");
+
+    const { base64, folder = "blog_media" } = await req.json();
+    if (!base64) {
+      return NextResponse.json({ error: "No image provided" }, { status: 400 });
     }
-  }
+
+    // Generate a unique public_id (optional)
+    const publicId = `upload-${Date.now()}`;
+
+    // Upload the image using unsigned upload preset
+    const uploadedImage = await cloudinary.uploader.upload(base64, {
+      folder,
+      public_id: publicId,
+      resource_type: "image",
+      upload_preset: process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET, // Use your preset here
+    });
+
+    return NextResponse.json({ url: uploadedImage.secure_url }, { status: 200 });
+  } catch (error) {
+    console.error("Upload error:", error);
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

src/components/imageuploader/ImageUploader.jsx

@@ -8,28 +8,90 @@ import Image from "next/image";
 import { handleImageUpload, handleImageDelete } from "@/utils/imageHandler";
 
 
-const ImageUploader = ({ image, setImage }) => {
+const ImageUploader = ({ image, setImage, media, setMedia }) => {
   const [uploading, setUploading] = useState(false);
 
 
 
-  const onDrop = (acceptedFiles) => {
-    if (acceptedFiles && acceptedFiles[0]) {
-      
-      console.log("File Received: ", acceptedFiles, acceptedFiles[0]); 
-
-      const selectedImage = acceptedFiles[0];
+  const convertFileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
       const reader = new FileReader();
-      reader.onloadend = () => {
-        const imageUrl = reader.result; // Base64 string
-        setImage(imageUrl);
-      };
-      reader.readAsDataURL(selectedImage);
-    }
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = (error) => reject(error);
+  
+      console.log("Reading File:", file);
+  
+      if (!(file instanceof File)) {
+        reject(new Error("Invalid file type"));
+        return;
+      }
+  
+      reader.readAsDataURL(file);
+    });
   };
+  
+
+  const onDrop = async (acceptedFiles) => {
+    if (!acceptedFiles || acceptedFiles.length === 0) {
+      console.error("No files received.");
+      return;
+    }
+  
+    setUploading(true);
+    const selectedFile = acceptedFiles[0];
+  
+    console.log("Received File:", selectedFile);
+    console.log("File Type:", typeof selectedFile);
+    console.log("File Instance Check:", selectedFile instanceof File); // Should be true
+    console.log("Blob Instance Check:", selectedFile instanceof Blob); // Should also be true
+  
+    try {
 
+      if (image && media && media.length > 0) {
+        // Find the media object for the currently displayed image
+        const currentMedia = media.find((item) => item.url === image);
+        if (currentMedia) {
+          console.log("Deleting current image:", currentMedia);
+          await handleImageDelete(currentMedia.publicId);
+          // Remove it from the media array and clear the image state
+          setMedia((prev) =>
+            prev.filter((item) => item.publicId !== currentMedia.publicId)
+          );
+          setImage(null);
+        }
+      }
 
 
+      // ✅ Confirm the file is valid
+      if (!(selectedFile instanceof File)) {
+        throw new Error("Selected file is not a valid File object.");
+      }
+  
+      const base64 = await convertFileToBase64(selectedFile);
+      console.log("Base64 Conversion Success:", base64.slice(0, 50) + "..."); // Log first 50 chars to confirm
+  
+      if (!base64) {
+        console.error("Failed to convert file to base64.");
+        return;
+      }
+
+      
+      // ✅ Upload to Cloudinary
+      const { url: newImageUrl, publicId: newPublicId } = await handleImageUpload(selectedFile, "thumbnails");
+      console.log("Upload Success:", newImageUrl);
+  
+      setImage(newImageUrl);
+      setMedia((prev) => [...prev, { url: newImageUrl, publicId: newPublicId }]);
+
+      // setMedia((prev) => [...prev, newImageUrl]);
+    } catch (error) {
+      console.error("Upload failed:", error);
+    } finally {
+      setUploading(false);
+    }
+  };
+  
+ 
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });