Cloudinary upload

.env.example

@@ -24,7 +24,7 @@ NEXT_PUBLIC_SUPABASE_URL="http://localhost:54321"
 SUPABASE_ANON_KEY="123"
 
 NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
-NEXT_PUBLIC_CLOUDINARY_API_KEY="<Your API Key>"
+CLOUDINARY_API_KEY="<Your API Key>"
 CLOUDINARY_API_SECRET="<Your API Secret>"
 
 NEXT_PUBLIC_POSTHOG_KEY=123

apps/sovoli.com/src/app/(dashboard)/new/actions/newNoteAction.ts

@@ -2,7 +2,8 @@
 
 import { redirect, unauthorized } from "next/navigation";
 import { withZod } from "@rvf/zod";
-import { db, inArray, schema } from "@sovoli/db";
+import { db, schema } from "@sovoli/db";
+import { KnowledgeMediaAssetPlacement } from "@sovoli/db/schema";
 
 import { auth } from "~/core/auth";
 import { slugify } from "~/utils/slugify";
@@ -57,17 +58,14 @@ export async function newNoteAction(
   }
 
   if (result.data.assets) {
-    await db
-      .update(schema.MediaAsset)
-      .set({
+    const knowledgeAssets = result.data.assets.map((asset) => {
+      return {
         knowledgeId: createdKnowledge.id,
-      })
-      .where(
-        inArray(
-          schema.MediaAsset.id,
-          result.data.assets.map((asset) => asset.id),
-        ),
-      );
+        mediaAssetId: asset.id,
+        placement: KnowledgeMediaAssetPlacement.cover,
+      };
+    });
+    await db.insert(schema.KnowledgeMediaAsset).values(knowledgeAssets);
   }
 
   redirect(`/${session.user?.username}/${createdKnowledge.slug}`);

apps/sovoli.com/src/app/[username]/[slug]/components/KnowledgeGallry.tsx

@@ -45,7 +45,7 @@ export function KnowledgeGallery() {
                 />
               ) : (
                 <CldImage
-                  src={`${image.bucket}/${image.path}`}
+                  src={`${image.bucket}/${image.id}`}
                   alt={image.name ?? `${knowledge.title} image`}
                   className="object-contain"
                   fill

apps/sovoli.com/src/app/api/assets/route.ts

@@ -3,13 +3,17 @@ import { NextResponse } from "next/server";
 import { createId } from "@paralleldrive/cuid2";
 import { db, schema } from "@sovoli/db";
 import { MediaAssetHost } from "@sovoli/db/schema";
-import { createClient } from "@supabase/supabase-js";
+import { v2 as cloudinary } from "cloudinary";
 
 import { auth } from "~/core/auth";
 import { env } from "~/env";
 import { createSignedUrlRequestBodySchema } from "./schema";
 
-const supabase = createClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY);
+cloudinary.config({
+  cloud_name: env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+  api_key: env.CLOUDINARY_API_KEY,
+  api_secret: env.CLOUDINARY_API_SECRET,
+});
 
 export const POST = async (
   req: NextRequest,
@@ -37,24 +41,24 @@ export const POST = async (
           { status: 400 },
         );
       }
-      const newFilename = `${id}.${fileExt}`;
 
-      const { data, error } = await supabase.storage
-        .from(env.SUPABASE_MEDIA_BUCKET)
-        .createSignedUploadUrl(newFilename);
-
-      if (error) {
-        return NextResponse.json({ message: error.message }, { status: 500 });
-      }
+      const timestamp = Math.round(new Date().getTime() / 1000);
+      const signature = cloudinary.utils.api_sign_request(
+        {
+          timestamp: timestamp,
+          public_id: id,
+          folder: env.SUPABASE_MEDIA_BUCKET,
+        },
+        env.CLOUDINARY_API_SECRET,
+      );
 
       const [createdMedia] = await db
         .insert(schema.MediaAsset)
         .values({
           id,
           uploadedUserId: user.id,
-          host: MediaAssetHost.Supabase,
+          host: MediaAssetHost.Cloudinary,
           bucket: env.SUPABASE_MEDIA_BUCKET,
-          path: data.path,
           mimeType: body.type,
         })
         .returning();
@@ -67,10 +71,12 @@ export const POST = async (
       }
 
       return NextResponse.json({
-        signedUrl: data.signedUrl,
+        signature,
+        timestamp,
         id: createdMedia.id,
-        url: `${env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/${env.SUPABASE_MEDIA_BUCKET}/${createdMedia.path}`,
-        path: createdMedia.path,
+        cloudName: env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+        apiKey: env.CLOUDINARY_API_KEY,
+        folder: env.SUPABASE_MEDIA_BUCKET,
       });
     } catch (error) {
       return NextResponse.json({ message: error }, { status: 500 });

apps/sovoli.com/src/env.ts

@@ -10,6 +10,7 @@ export const env = createEnv({
       .default("development"),
     PORT: z.string().optional(),
     VERCEL_PROJECT_PRODUCTION_URL: z.string().optional(),
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: z.string().min(1),
   },
   /**
    * Specify your server-side environment variables schema here.
@@ -22,6 +23,8 @@ export const env = createEnv({
     SUPABASE_MEDIA_BUCKET: z.string().min(1),
     SUPABASE_URL: z.string().min(1),
     SUPABASE_ANON_KEY: z.string().min(1),
+    CLOUDINARY_API_SECRET: z.string().min(1),
+    CLOUDINARY_API_KEY: z.string().min(1),
   },
 
   /**
@@ -43,6 +46,8 @@ export const env = createEnv({
     VERCEL_PROJECT_PRODUCTION_URL: process.env.VERCEL_PROJECT_PRODUCTION_URL,
     NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
     NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME:
+      process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
   },
   skipValidation:
     !!process.env.CI || process.env.npm_lifecycle_event === "lint",

apps/sovoli.com/src/hooks/useAssetFileUpload.ts

@@ -1,13 +1,23 @@
 import { useCallback, useState } from "react";
 
 export interface UploadedAsset {
+  id: string;
   url: string;
+}
+
+interface SignedUploadResponse {
   id: string;
+  signature: string;
+  timestamp: number;
+  cloudName: string;
+  apiKey: string;
+  folder: string;
 }
 
-interface UploadResponse extends UploadedAsset {
-  signedUrl: string;
-  path: string;
+interface CloudinaryUploadResponse {
+  asset_id: string;
+  public_id: string;
+  url: string;
 }
 
 export interface UseAssetFileUploadProps {
@@ -33,34 +43,57 @@ export const useAssetFileUpload = ({
           method: "POST",
           body: JSON.stringify({ fileName: file.name, type: file.type }),
         });
+        if (!signedUrlResponse.ok) {
+          throw new Error("Failed to get signed url");
+        }
+
         const signedUrlResponseBody =
-          (await signedUrlResponse.json()) as UploadResponse;
+          (await signedUrlResponse.json()) as SignedUploadResponse;
 
-        const uploadResponse = await fetch(signedUrlResponseBody.signedUrl, {
-          method: "PUT",
-          headers: {
-            "Content-Type": file.type,
+        const formData = new FormData();
+        formData.append("file", file);
+        formData.append("api_key", signedUrlResponseBody.apiKey);
+        formData.append(
+          "timestamp",
+          signedUrlResponseBody.timestamp.toString(),
+        );
+        formData.append("signature", signedUrlResponseBody.signature);
+        formData.append("public_id", signedUrlResponseBody.id);
+        formData.append("folder", signedUrlResponseBody.folder);
+
+        const uploadResponse = await fetch(
+          `https://api.cloudinary.com/v1_1/${signedUrlResponseBody.cloudName}/auto/upload`,
+          {
+            method: "POST",
+            body: formData,
           },
-          body: file,
-        });
+        );
 
         if (!uploadResponse.ok) {
           throw new Error("Failed to upload file");
         }
 
+        const uploadResponseBody =
+          (await uploadResponse.json()) as CloudinaryUploadResponse;
+
+        const uploadedAsset: UploadedAsset = {
+          id: signedUrlResponseBody.id,
+          url: uploadResponseBody.url,
+        };
+
         setFiles((current) =>
           current.map((f) =>
             f.file === file
               ? {
                   ...f,
                   status: "success",
-                  uploadedAsset: signedUrlResponseBody,
+                  uploadedAsset: uploadedAsset,
                 }
               : f,
           ),
         );
 
-        onFileUploaded(signedUrlResponseBody);
+        onFileUploaded(uploadedAsset);
       } catch (error) {
         console.error("Error uploading file:", error);
         setFiles((current) =>

turbo.json

@@ -69,7 +69,10 @@
     "OTEL_EXPORTER_OTLP_LOGS_ENDPOINT",
     "OTEL_EXPORTER_OTLP_HEADERS", 
     "NEXT_PUBLIC_POSTHOG_KEY",
-    "NEXT_PUBLIC_POSTHOG_HOST"
+    "NEXT_PUBLIC_POSTHOG_HOST",
+    "NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME",
+    "CLOUDINARY_API_KEY",
+    "CLOUDINARY_API_SECRET"
   ],
   "ui": "tui"
 }