Add cloudinary service for media

Author: alphacoder-mp3

README.md

@@ -22,5 +22,4 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
 
 Features to be added on priority:
 
-1. Cloudinary or any other media service for media upload and storing the data instead of storing it on our own server
-2. User to add images in the notes apart from profile
+1. User to add images in the notes apart from profile

app/actions/update-profile-pic.ts

@@ -3,11 +3,11 @@
 import prisma from '@/lib/db';
 import { revalidatePath } from 'next/cache';
 
-export async function updateProfilePic(userId: string, filename: string) {
+export async function updateProfilePic(userId: string, profilePicUrl: string) {
   try {
-    const updatedUser = await prisma.user.update({
+    await prisma.user.update({
       where: { id: userId },
-      data: { profilePic: filename },
+      data: { profilePic: profilePicUrl },
     });
     revalidatePath('/profile');
     return { success: true };

app/api/upload/route.ts

@@ -1,6 +1,7 @@
-import { writeFile, mkdir } from 'fs/promises';
+import { writeFile, mkdir, unlink } from 'fs/promises';
 import { NextRequest, NextResponse } from 'next/server';
 import path from 'path';
+import cloudinary from '@/lib/cloudinary';
 
 export async function POST(request: NextRequest) {
   try {
@@ -21,9 +22,18 @@ export async function POST(request: NextRequest) {
     // Create the uploads directory if it doesn't exist
     await mkdir(uploadDir, { recursive: true });
 
+    // Temporarily store the file
     await writeFile(filepath, buffer);
 
-    return NextResponse.json({ success: true, filename });
+    // Upload to Cloudinary
+    const result = await cloudinary.uploader.upload(filepath, {
+      folder: 'profile-pictures',
+    });
+
+    // Delete the temporary file
+    await unlink(filepath);
+
+    return NextResponse.json({ success: true, filename: result.secure_url });
   } catch (error) {
     console.error('Upload error:', error);
     return NextResponse.json({

app/layout.tsx

@@ -4,14 +4,23 @@ import './globals.css';
 import { ThemeProvider } from 'next-themes';
 import { ModeToggle } from '@/components/mode-toggle';
 import { Toaster } from '@/components/ui/toaster';
+// import { useServerSession } from '@/lib/useServerSession';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'YOUR NOTES',
-  description: 'Generated by us',
+  description: 'Generated by you',
 };
 
+// export async function generateMetadata(): Promise<Metadata> {
+//   const { user } = await useServerSession();
+
+//   return {
+//     title: user.username,
+//   };
+// }
+
 export default async function RootLayout({
   children,
 }: Readonly<{

app/profile/page.tsx

@@ -18,17 +18,22 @@ export default async function ProfilePage() {
 
   return (
     <div className="flex flex-col items-center justify-center p-10">
-      <h1>Profile</h1>
+      <h1 className="m-4">Profile</h1>
       {UserDetails?.profilePic && (
-        <Image
-          src={`/uploads/${UserDetails.profilePic}`}
-          alt="Profile Picture"
-          width={200}
-          height={200}
-        />
+        <div className="rounded-full border-violet-600 border-8 overflow-hidden w-40 h-40 mb-4">
+          <Image
+            src={UserDetails.profilePic}
+            alt="Profile Picture"
+            className="w-full h-full object-cover"
+            layout="lazy"
+            height={200}
+            width={200}
+          />
+        </div>
       )}
+
       <ProfilePicUpload userId={user.id} />
-      <p>Username: {user.username}</p>
+      <p className="p-4">Username: {user.username}</p>
       <p>
         Name: {UserDetails?.firstName} {UserDetails?.lastName}
       </p>

components/create-todo.tsx

@@ -13,7 +13,7 @@ export default function CreateTodo({
   const { toast } = useToast();
 
   async function action(formData: FormData) {
-    const res = await createTodo(formData, user.id);
+    const res = await createTodo(formData, user.id, '');
     formRef.current?.reset();
     toast({
       title: res.error ? 'Uh oh! Something went wrong.' : 'success',

components/profile-pic-upload.tsx

@@ -3,16 +3,18 @@
 import { useState } from 'react';
 import { updateProfilePic } from '@/app/actions/update-profile-pic';
 import { useToast } from '@/components/ui/use-toast';
+import { Button } from '@/components/ui/button';
 
 export default function ProfilePicUpload({ userId }: { userId: string }) {
   const [file, setFile] = useState<File | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+
   const { toast } = useToast();
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setError(null);
     if (!file) return;
+    setLoading(true);
 
     const formData = new FormData();
     formData.append('file', file);
@@ -31,6 +33,7 @@ export default function ProfilePicUpload({ userId }: { userId: string }) {
 
       if (data.success) {
         console.log('File uploaded successfully:', data.filename);
+        setFile(null);
         const result = await updateProfilePic(userId, data.filename);
         console.log('Update profile pic result:', result);
         if (result.success) {
@@ -45,24 +48,36 @@ export default function ProfilePicUpload({ userId }: { userId: string }) {
       }
     } catch (err) {
       console.error('Error:', err);
-      setError(
-        err instanceof Error ? err.message : 'An unknown error occurred'
-      );
+      toast({
+        title: err instanceof Error ? err.message : 'An unknown error occurred',
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit} className="space-y-4">
       <input
         type="file"
         accept="image/*"
         onChange={e => setFile(e.target.files?.[0] || null)}
-        className="cursor-pointer rounded  border border-sky-600"
+        className="cursor-pointer block w-full text-sm text-gray-500
+                   file:mr-4 file:py-2 file:px-4
+                   file:rounded-full file:border-0
+                   file:text-sm file:font-semibold
+                   file:bg-violet-50 file:text-violet-700
+                   hover:file:bg-violet-100"
       />
-      <button type="submit" disabled={!file}>
-        Upload Profile Picture
-      </button>
-      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <Button
+        type="submit"
+        disabled={!file || loading}
+        className="w-full bg-violet-600 text-white py-4 rounded-lg
+                   hover:bg-violet-700 disabled:opacity-50"
+      >
+        {loading ? 'Uploading...' : 'Upload Profile Picture'}
+      </Button>
     </form>
   );
 }

components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

lib/cloudinary.ts

@@ -0,0 +1,10 @@
+// lib/cloudinary.ts
+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,
+});
+
+export default cloudinary;

next.config.mjs

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+        pathname: '**',
+      },
+    ],
+  },
+};
 
 export default nextConfig;

package-lock.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-toast": "^1.2.1",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
+    "cloudinary": "^2.4.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.414.0",
     "next": "14.2.5",