upload image option (#64)

apps/web/package.json

@@ -18,8 +18,10 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.4.0",
+    "@aws-sdk/client-s3": "^3.637.0",
     "@aws-sdk/client-sesv2": "^3.535.0",
     "@aws-sdk/client-sns": "^3.540.0",
+    "@aws-sdk/s3-request-presigner": "^3.637.0",
     "@hono/swagger-ui": "^0.2.1",
     "@hono/zod-openapi": "^0.10.0",
     "@hookform/resolvers": "^3.3.4",

apps/web/src/app/(dashboard)/campaigns/[campaignId]/edit/page.tsx

@@ -40,6 +40,8 @@ const sendSchema = z.object({
   confirmation: z.string(),
 });
 
+const IMAGE_SIZE_LIMIT = 10 * 1024 * 1024;
+
 export default function EditCampaignPage({
   params,
 }: {
@@ -79,7 +81,11 @@ export default function EditCampaignPage({
   return <CampaignEditor campaign={campaign} />;
 }
 
-function CampaignEditor({ campaign }: { campaign: Campaign }) {
+function CampaignEditor({
+  campaign,
+}: {
+  campaign: Campaign & { imageUploadSupported: boolean };
+}) {
   const contactBooksQuery = api.contacts.getContactBooks.useQuery();
   const utils = api.useUtils();
 
@@ -100,6 +106,7 @@ function CampaignEditor({ campaign }: { campaign: Campaign }) {
     },
   });
   const sendCampaignMutation = api.campaign.sendCampaign.useMutation();
+  const getUploadUrl = api.campaign.generateImagePresignedUrl.useMutation();
 
   const sendForm = useForm<z.infer<typeof sendSchema>>({
     resolver: zodResolver(sendSchema),
@@ -143,6 +150,33 @@ function CampaignEditor({ campaign }: { campaign: Campaign }) {
     );
   }
 
+  const handleFileChange = async (file: File) => {
+    if (file.size > IMAGE_SIZE_LIMIT) {
+      throw new Error(
+        `File should be less than ${IMAGE_SIZE_LIMIT / 1024 / 1024}MB`
+      );
+    }
+
+    console.log("file type: ", file.type);
+
+    const { uploadUrl, imageUrl } = await getUploadUrl.mutateAsync({
+      name: file.name,
+      type: file.type,
+      campaignId: campaign.id,
+    });
+
+    const response = await fetch(uploadUrl, {
+      method: "PUT",
+      body: file,
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to upload file");
+    }
+
+    return imageUrl;
+  };
+
   const confirmation = sendForm.watch("confirmation");
 
   return (
@@ -339,6 +373,9 @@ function CampaignEditor({ campaign }: { campaign: Campaign }) {
             deboucedUpdateCampaign();
           }}
           variables={["email", "firstName", "lastName"]}
+          uploadImage={
+            campaign.imageUploadSupported ? handleFileChange : undefined
+          }
         />
       </div>
     </div>

apps/web/src/env.js

@@ -49,6 +49,10 @@ export const env = createEnv({
       .string()
       .default("false")
       .transform((str) => str === "true"), // Converts string "true" to boolean true
+    S3_COMPATIBLE_ACCESS_KEY: z.string().optional(),
+    S3_COMPATIBLE_SECRET_KEY: z.string().optional(),
+    S3_COMPATIBLE_API_URL: z.string().optional(),
+    S3_COMPATIBLE_PUBLIC_URL: z.string().optional(),
   },
 
   /**
@@ -88,6 +92,10 @@ export const env = createEnv({
     REDIS_URL: process.env.REDIS_URL,
     FROM_EMAIL: process.env.FROM_EMAIL,
     ENABLE_PRISMA_CLIENT: process.env.ENABLE_PRISMA_CLIENT, // Add this line
+    S3_COMPATIBLE_ACCESS_KEY: process.env.S3_COMPATIBLE_ACCESS_KEY,
+    S3_COMPATIBLE_SECRET_KEY: process.env.S3_COMPATIBLE_SECRET_KEY,
+    S3_COMPATIBLE_API_URL: process.env.S3_COMPATIBLE_API_URL,
+    S3_COMPATIBLE_PUBLIC_URL: process.env.S3_COMPATIBLE_PUBLIC_URL,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

apps/web/src/server/api/routers/campaign.ts

@@ -1,17 +1,24 @@
 import { Prisma } from "@prisma/client";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
+import { env } from "~/env";
 import {
   teamProcedure,
   createTRPCRouter,
   campaignProcedure,
   publicProcedure,
 } from "~/server/api/trpc";
+import { nanoid } from "~/server/nanoid";
 import {
   sendCampaign,
   subscribeContact,
 } from "~/server/service/campaign-service";
 import { validateDomainFromEmail } from "~/server/service/domain-service";
+import {
+  DEFAULT_BUCKET,
+  getDocumentUploadUrl,
+  isStorageConfigured,
+} from "~/server/service/storage-service";
 
 export const campaignRouter = createTRPCRouter({
   getCampaigns: teamProcedure
@@ -137,13 +144,19 @@ export const campaignRouter = createTRPCRouter({
       });
     }
 
+    const imageUploadSupported = isStorageConfigured();
+
     if (campaign?.contactBookId) {
       const contactBook = await db.contactBook.findUnique({
         where: { id: campaign.contactBookId },
       });
-      return { ...campaign, contactBook };
+      return { ...campaign, contactBook, imageUploadSupported };
     }
-    return { ...campaign, contactBook: null };
+    return {
+      ...campaign,
+      contactBook: null,
+      imageUploadSupported,
+    };
   }),
 
   sendCampaign: campaignProcedure.mutation(
@@ -180,4 +193,25 @@ export const campaignRouter = createTRPCRouter({
       return newCampaign;
     }
   ),
+
+  generateImagePresignedUrl: campaignProcedure
+    .input(
+      z.object({
+        name: z.string(),
+        type: z.string(),
+      })
+    )
+    .mutation(async ({ ctx: { team }, input }) => {
+      const extension = input.name.split(".").pop();
+      const randomName = `${nanoid()}.${extension}`;
+
+      const url = await getDocumentUploadUrl(
+        `${team.id}/${randomName}`,
+        input.type
+      );
+
+      const imageUrl = `${env.S3_COMPATIBLE_PUBLIC_URL}/${DEFAULT_BUCKET}/${team.id}/${randomName}`;
+
+      return { uploadUrl: url, imageUrl };
+    }),
 });

apps/web/src/server/nanoid.ts

@@ -4,3 +4,8 @@ export const smallNanoid = customAlphabet(
   "1234567890abcdefghijklmnopqrstuvwxyz",
   10
 );
+
+export const nanoid = customAlphabet(
+  "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
+  21
+);

apps/web/src/server/service/storage-service.ts

@@ -0,0 +1,63 @@
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { env } from "~/env";
+
+let S3: S3Client | null = null;
+export const DEFAULT_BUCKET = "unsend";
+
+export const isStorageConfigured = () =>
+  !!(
+    env.S3_COMPATIBLE_ACCESS_KEY &&
+    env.S3_COMPATIBLE_API_URL &&
+    env.S3_COMPATIBLE_PUBLIC_URL &&
+    env.S3_COMPATIBLE_SECRET_KEY
+  );
+
+const getClient = () => {
+  if (
+    !S3 &&
+    env.S3_COMPATIBLE_ACCESS_KEY &&
+    env.S3_COMPATIBLE_API_URL &&
+    env.S3_COMPATIBLE_PUBLIC_URL &&
+    env.S3_COMPATIBLE_SECRET_KEY
+  ) {
+    S3 = new S3Client({
+      region: "auto",
+      endpoint: env.S3_COMPATIBLE_API_URL,
+      credentials: {
+        accessKeyId: env.S3_COMPATIBLE_ACCESS_KEY,
+        secretAccessKey: env.S3_COMPATIBLE_SECRET_KEY,
+      },
+      forcePathStyle: true, // needed for minio
+    });
+  }
+
+  return S3;
+};
+
+export const getDocumentUploadUrl = async (
+  key: string,
+  fileType: string,
+  bucket: string = DEFAULT_BUCKET
+) => {
+  const s3Client = getClient();
+
+  if (!s3Client) {
+    throw new Error("R2 is not configured");
+  }
+
+  const url = await getSignedUrl(
+    s3Client,
+    new PutObjectCommand({
+      Bucket: bucket,
+      Key: key,
+      ContentType: fileType,
+    }),
+    {
+      expiresIn: 3600,
+      signableHeaders: new Set(["content-type"]),
+    }
+  );
+
+  return url;
+};