Updated - Profile - Profile photo

- updated profile photo handling after uploadthing done

app/[locale]/(routes)/profile/components/ProfilePhotoForm.tsx

@@ -9,6 +9,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { FileUploaderDropzone } from "@/components/ui/file-uploader-dropzone";
 
 import useAvatarStore from "@/store/useAvatarStore";
+import axios from "axios";
 
 interface ProfileFormProps {
   data: Users;
@@ -25,17 +26,24 @@ export function ProfilePhotoForm({ data }: ProfileFormProps) {
     setAvatar(data.avatar);
   }, [data.avatar, toast]);
 
-  const handleUploadSuccess = (newAvatar: string) => {
+  const handleUploadSuccess = async (newAvatar: string) => {
     try {
       setAvatar(newAvatar);
       setAvatarStore(newAvatar);
+      await axios.put("/api/profile/updateProfilePhoto", { avatar: newAvatar });
       toast({
         title: "Profile photo updated.",
         description: "Your profile photo has been updated.",
         duration: 5000,
       });
     } catch (e) {
       console.log(e);
+      toast({
+        variant: "default",
+        title: "Error updating profile photo.",
+        description: "There was an error updating your profile photo.",
+        duration: 5000,
+      });
     } finally {
       router.refresh();
     }

app/api/profile/updateProfilePhoto/route.ts

@@ -0,0 +1,52 @@
+import { authOptions } from "@/lib/auth";
+import { prismadb } from "@/lib/prisma";
+import { getServerSession } from "next-auth";
+import { NextResponse } from "next/server";
+
+export async function PUT(req: Request) {
+  const session = await getServerSession(authOptions);
+
+  if (!session) {
+    return NextResponse.json(
+      { message: "Unauthorized" },
+      {
+        status: 401,
+      }
+    );
+  }
+
+  const body = await req.json();
+
+  if (!body.avatar) {
+    return NextResponse.json(
+      { message: "No avatar provided" },
+      {
+        status: 400,
+      }
+    );
+  }
+
+  try {
+    await prismadb.users.update({
+      where: {
+        id: session.user.id,
+      },
+      data: {
+        avatar: body.avatar,
+      },
+    });
+    console.log("Profile photo updated");
+    return NextResponse.json(
+      { message: "Profile photo updated" },
+      { status: 200 }
+    );
+  } catch (e) {
+    console.log(e);
+    return NextResponse.json(
+      { message: "Error updating profile photo" },
+      {
+        status: 500,
+      }
+    );
+  }
+}

app/api/uploadthing/core.ts

@@ -64,20 +64,7 @@ export const ourFileRouter = {
       // Whatever is returned here is accessible in onUploadComplete as `metadata`
       return { userId: user.id };
     })
-    .onUploadComplete(async ({ metadata, file }) => {
-      // This code RUNS ON YOUR SERVER after upload
-      console.log("Upload complete for userId:", metadata.userId);
-      console.log("file url", file.url);
-      //TODO: save file.url to database
-      await prismadb.users.update({
-        data: {
-          avatar: file.url,
-        },
-        where: {
-          id: metadata.userId,
-        },
-      });
-    }),
+    .onUploadComplete(async ({ metadata, file }) => {}),
 
   //FileRoute for documents
   pdfUploader: f({ pdf: { maxFileSize: "64MB", maxFileCount: 1 } })