From 113cd4b8fd576db36319d8b68a515f52c9c318d9 Mon Sep 17 00:00:00 2001
From: Dhiru <dhiru@alljobguider.in>
Date: Wed, 1 Jan 2025 23:30:55 +0530
Subject: [PATCH] Implement image upload functionality using Cloudinary in
 ImageButton component

---
 src/app/documents/[documentId]/toolbar.tsx | 27 ++++++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/app/documents/[documentId]/toolbar.tsx b/src/app/documents/[documentId]/toolbar.tsx
index 744b244..63f69a2 100644
--- a/src/app/documents/[documentId]/toolbar.tsx
+++ b/src/app/documents/[documentId]/toolbar.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import axios from 'axios';
+
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 import { useEditorStore } from "@/store/use-editor-store";
@@ -269,7 +271,7 @@ const AlignButton = () => {
   );
 };
 
-const ImageButton = () => {
+const ImageButton = async () => {
   const { editor } = useEditorStore();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [imageUrl, setImageUrl] = useState("");
@@ -285,12 +287,27 @@ const ImageButton = () => {
     input.type = "file";
     input.accept = "image/*";
 
-    input.onchange = (e) => {
+    input.onchange = async (e) => {
       const file = (e.target as HTMLInputElement).files?.[0];
-
       if (file) {
-        const imageUrl = URL.createObjectURL(file);
-        onChange(imageUrl);
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("upload_preset", `${process.env.CLOUDINARY_UPLOAD_PRESET}`); // Cloudinary upload preset must be un-signed
+
+        try {
+          const responseFromCloudinary = await axios.post(
+            `https://api.cloudinary.com/v1_1/${process.env.CLOUDINARY_ENDPOINT}/image/upload`,
+            formData,
+            {
+              headers: {
+                "Content-Type": "multipart/form-data",
+              },
+            }
+          );
+          onChange(responseFromCloudinary.data.secure_url);
+        } catch (error) {
+          console.error("Image upload failed:", error);
+        }
       }
     };