feat: cloudinary support for uploads (#48)

Co-authored-by: moonlitgrace <[email protected]>

.env.example

@@ -8,6 +8,11 @@ DATABASE_URL=
 # SECRET
 SECRET_KEY=
 
-# ADMIN CREDENTIALS
+# ADMIN CREDS
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
+
+# CLOUDNINARY CREDS
+CLOUDINARY_CLOUD_NAME=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=

.env.local.example

@@ -4,3 +4,8 @@ SECRET_KEY=
 # ADMIN CREDENTIALS
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
+
+# CLOUDNINARY CREDS
+CLOUDINARY_CLOUD_NAME=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=

actions/admin.ts

@@ -1,8 +1,7 @@
+import { validateFile } from '@/lib/utils';
 import { AdminBlogFormState, AdminBlogSchema } from '@/zod_schemas/admin';
 
 export default async function adminBlogSubmit(state: AdminBlogFormState, formData: FormData) {
-  console.log(state);
-
   const validatedFields = AdminBlogSchema.safeParse({
     id: formData.get('id') ? Number(formData.get('id')) : undefined,
     title: formData.get('title'),
@@ -18,6 +17,27 @@ export default async function adminBlogSubmit(state: AdminBlogFormState, formDat
   }
 
   try {
+    let coverImage = formData.get('cover') as File;
+    // coverImage returns invalid File object if nothing is selected
+    if (validateFile(coverImage)) {
+      const imageData = new FormData();
+      imageData.append('file', coverImage);
+
+      const imgRes = await fetch('/api/cloudinary', {
+        method: 'POST',
+        body: imageData,
+      });
+
+      if (!imgRes.ok) {
+        const imgResErr = await imgRes.json();
+        console.error('Image upload failed:', imgResErr);
+        return { message: imgResErr };
+      }
+
+      const data = await imgRes.json();
+      validatedFields.data.cover = data.url;
+    }
+
     const res = await fetch('/api/blog', {
       method: 'POST',
       body: JSON.stringify(validatedFields.data),

app/api/cloudinary/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse } from 'next/server';
+import cloudinary from '@/lib/cloudinary';
+import { validateFile } from '@/lib/utils';
+
+export async function POST(req: Request) {
+  try {
+    const formData = await req.formData();
+    const file = formData.get('file') as File;
+
+    if (!validateFile(file)) {
+      return NextResponse.json({ message: 'No file provided' }, { status: 400 });
+    }
+
+    const buffer = await file.arrayBuffer();
+    const base64String = Buffer.from(buffer).toString('base64');
+    const base64Image = `data:${file.type};base64,${base64String}`;
+
+    const uploadRes = await cloudinary.uploader.upload(base64Image);
+
+    return NextResponse.json({ url: uploadRes.url });
+  } catch (error) {
+    if (error instanceof Error)
+      return NextResponse.json({ message: error.message }, { status: 500 });
+  }
+}

components/admin/AdminBlogForm.tsx

@@ -21,6 +21,7 @@ type Props = {
 export default function AdminBlogForm({ id, title = '', tag = '', content = '', cover }: Props) {
   const [state, action] = useFormState(adminBlogSubmit, undefined);
   const [contentState, setContentState] = useState(content);
+
   const router = useRouter();
 
   useEffect(() => {
@@ -38,6 +39,9 @@ export default function AdminBlogForm({ id, title = '', tag = '', content = '',
       <form className="flex flex-col gap-3" action={action}>
         {/* hidden fields */}
         <input type="hidden" name="id" value={id?.toString() || ''} />
+        {/* This will send if submit form with preview tab open */}
+        {/* because then there will be no input with name attr */}
+        <input type="hidden" name="content" value={contentState} />
 
         <div className="grid w-full items-center gap-1.5">
           <Input
@@ -74,7 +78,7 @@ export default function AdminBlogForm({ id, title = '', tag = '', content = '',
             <TabsContent value="content">
               <Textarea
                 className="h-40"
-                placeholder="Type content here."
+                placeholder="Type content here..."
                 id="content"
                 name="content"
                 value={contentState}
@@ -93,7 +97,9 @@ export default function AdminBlogForm({ id, title = '', tag = '', content = '',
           </Tabs>
         </div>
         <div className="flex gap-3">
-          <Button variant="secondary">Draft</Button>
+          <Button type="button" variant="secondary">
+            Draft
+          </Button>
           <SubmitButton />
         </div>
       </form>

environment.d.ts

@@ -4,5 +4,8 @@ namespace NodeJS {
     SECRET_KEY: string;
     ADMIN_USERNAME: string;
     ADMIN_PASSWORD: string;
+    CLOUDINARY_CLOUD_NAME: string;
+    CLOUDINARY_API_KEY: string;
+    CLOUDINARY_API_SECRET: string;
   }
 }

lib/cloudinary.ts

@@ -0,0 +1,10 @@
+import { v2 as cloudinary } from 'cloudinary';
+
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+  api_key: process.env.CLOUDINARY_API_KEY,
+  api_secret: process.env.CLOUDINARY_API_SECRET,
+  secure: true,
+});
+
+export default cloudinary;

lib/utils.ts

@@ -17,3 +17,7 @@ export function formatDate(dateStr: Date) {
 export function escapeText(text: string) {
   return text.toLowerCase().replace(/[^\w]+/g, '-');
 }
+
+export function validateFile(file: File) {
+  return file instanceof File && file.name !== '' && file.size > 0;
+}