feat: s3 avatar uploads

.env.example

@@ -5,6 +5,15 @@ EMAIL_FROM=
 EMAIL_URL=
 EMAIL_TOKEN=
 
+NEXT_PUBLIC_STORAGE_URL=
+NEXT_PUBLIC_AVATAR_BUCKET_NAME=
+
+S3_REGION=
+S3_ENDPOINT=
+S3_ENDPOINT=
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+
 BETTER_AUTH_SECRET=
 BETTER_AUTH_URL=
 

apps/web/package.json

@@ -14,6 +14,8 @@
     "with-env": "dotenv -e ../../.env --"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.802.0",
+    "@aws-sdk/s3-presigned-post": "^3.802.0",
     "@headlessui/react": "^2.2.0",
     "@hookform/resolvers": "^3.3.4",
     "@kan/api": "workspace:*",
@@ -26,9 +28,12 @@
     "@trpc/next": "^11.0.0-rc.660",
     "@trpc/react-query": "catalog:",
     "@trpc/server": "catalog:",
+    "@types/uuid": "^10.0.0",
+    "aws-sdk": "^2.1692.0",
     "date-fns": "^4.1.0",
     "geist": "^1.3.1",
     "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
     "next": "^14.2.15",
     "nextjs-cors": "^2.2.0",
     "react": "catalog:react18",

apps/web/src/components/UserMenu.tsx

@@ -6,6 +6,7 @@ import { Fragment } from "react";
 import { authClient } from "@kan/auth";
 
 import { useTheme } from "~/providers/theme";
+import { getAvatarUrl } from "~/utils/helpers";
 
 interface UserMenuProps {
   imageUrl: string | undefined;
@@ -31,8 +32,7 @@ export default function UserMenu({
     router.push("/login");
   };
 
-  // const avatarUrl = imageUrl ? getPublicUrl(imageUrl) : null;
-  const avatarUrl = "";
+  const avatarUrl = imageUrl ? getAvatarUrl(imageUrl) : null;
 
   return (
     <Menu as="div" className="relative inline-block w-full text-left">

apps/web/src/env.ts

@@ -18,6 +18,10 @@ export const env = createEnv({
     STRIPE_SECRET_KEY: z.string().optional(),
     GOOGLE_CLIENT_ID: z.string(),
     GOOGLE_CLIENT_SECRET: z.string(),
+    S3_ACCESS_KEY_ID: z.string(),
+    S3_SECRET_ACCESS_KEY: z.string(),
+    S3_REGION: z.string(),
+    S3_ENDPOINT: z.string(),
   },
 
   /**
@@ -27,6 +31,9 @@ export const env = createEnv({
   client: {
     NEXT_PUBLIC_KAN_ENV: z.string(),
     NEXT_PUBLIC_UMAMI_ID: z.string().optional(),
+    NEXT_PUBLIC_BASE_URL: z.string(),
+    NEXT_PUBLIC_STORAGE_URL: z.string(),
+    NEXT_PUBLIC_AVATAR_BUCKET_NAME: z.string(),
   },
   /**
    * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
@@ -35,6 +42,9 @@ export const env = createEnv({
     NEXT_PUBLIC_KAN_ENV: process.env.NEXT_PUBLIC_KAN_ENV,
     NODE_ENV: process.env.NODE_ENV,
     NEXT_PUBLIC_UMAMI_ID: process.env.NEXT_PUBLIC_UMAMI_ID,
+    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
+    NEXT_PUBLIC_STORAGE_URL: process.env.NEXT_PUBLIC_STORAGE_URL,
+    NEXT_PUBLIC_AVATAR_BUCKET_NAME: process.env.NEXT_PUBLIC_AVATAR_BUCKET_NAME,
   },
   skipValidation:
     !!process.env.CI || process.env.npm_lifecycle_event === "lint",

apps/web/src/pages/api/upload/image.ts

@@ -0,0 +1,52 @@
+import type { NextRequest } from "next/server";
+import { S3Client } from "@aws-sdk/client-s3";
+import { createPresignedPost } from "@aws-sdk/s3-presigned-post";
+
+import { env } from "~/env";
+
+export default async function POST(req: NextRequest) {
+  if (req.method !== "POST") {
+    return new Response(JSON.stringify({ error: "Method not allowed" }), {
+      status: 405,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  try {
+    const { filename, contentType } = await req.json();
+
+    const client = new S3Client({
+      forcePathStyle: true,
+      region: env.S3_REGION,
+      endpoint: env.S3_ENDPOINT,
+      credentials: {
+        accessKeyId: env.S3_ACCESS_KEY_ID,
+        secretAccessKey: env.S3_SECRET_ACCESS_KEY,
+      },
+    });
+    const signedUrl = await createPresignedPost(client, {
+      Bucket: env.NEXT_PUBLIC_AVATAR_BUCKET_NAME ?? "",
+      Key: filename,
+
+      Conditions: [
+        ["content-length-range", 0, 10485760], // up to 10 MB
+        ["starts-with", "$Content-Type", contentType],
+      ],
+      Fields: {
+        acl: "public-read",
+        "Content-Type": contentType,
+      },
+      Expires: 600,
+    });
+
+    const { url, fields } = signedUrl;
+
+    return Response.json({ url, fields });
+  } catch (error) {
+    return Response.json({ error: (error as Error).message });
+  }
+}
+
+export const runtime = "edge";
+export const preferredRegion = "lhr1";
+export const dynamic = "force-dynamic";

apps/web/src/utils/helpers.ts

@@ -1,3 +1,5 @@
+import { env } from "~/env";
+
 export const formatToArray = (
   value: string | string[] | undefined,
 ): string[] => {
@@ -42,3 +44,7 @@ export const formatMemberDisplayName = (
 
   return localPart.replace(/[_-]/g, ".");
 };
+
+export const getAvatarUrl = (key: string) => {
+  return `${env.NEXT_PUBLIC_STORAGE_URL}/${env.NEXT_PUBLIC_AVATAR_BUCKET_NAME}/${key}`;
+};

apps/web/src/views/board/components/Filters.tsx

@@ -10,7 +10,11 @@ import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
 import LabelIcon from "~/components/LabelIcon";
-import { formatMemberDisplayName, formatToArray } from "~/utils/helpers";
+import {
+  formatMemberDisplayName,
+  formatToArray,
+  getAvatarUrl,
+} from "~/utils/helpers";
 
 interface Member {
   publicId: string;
@@ -65,7 +69,9 @@ const Filters = ({
       <Avatar
         size="xs"
         name={member.user?.name ?? ""}
-        imageUrl={member.user?.image ? "" : undefined}
+        imageUrl={
+          member.user?.image ? getAvatarUrl(member.user.image) : undefined
+        }
         email={member.user?.email ?? ""}
       />
     ),

apps/web/src/views/board/components/NewCardForm.tsx

@@ -18,7 +18,7 @@ import Toggle from "~/components/Toggle";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
-import { formatMemberDisplayName } from "~/utils/helpers";
+import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
 
 type NewCardFormInput = NewCardInput & {
   isCreateAnotherEnabled: boolean;
@@ -155,7 +155,9 @@ export function NewCardForm({
         <Avatar
           size="xs"
           name={member.user.name ?? ""}
-          imageUrl={member.user.image ? "" : undefined}
+          imageUrl={
+            member.user.image ? getAvatarUrl(member.user.image) : undefined
+          }
           email={member.user.email ?? ""}
         />
       ),

apps/web/src/views/card/index.tsx

@@ -14,7 +14,7 @@ import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
-import { formatMemberDisplayName } from "~/utils/helpers";
+import { formatMemberDisplayName, getAvatarUrl } from "~/utils/helpers";
 import { DeleteLabelConfirmation } from "../../components/DeleteLabelConfirmation";
 import ActivityList from "./components/ActivityList";
 import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
@@ -92,7 +92,7 @@ export default function CardPage() {
           member.user.email ?? null,
         ),
         imageUrl: member.user.image
-          ? getPublicUrl(member.user.image)
+          ? getAvatarUrl(member.user.image)
           : undefined,
         selected: isSelected ?? false,
         leftIcon: (
@@ -100,7 +100,7 @@ export default function CardPage() {
             size="xs"
             name={member.user.name ?? ""}
             imageUrl={
-              member.user.image ? getPublicUrl(member.user.image) : undefined
+              member.user.image ? getAvatarUrl(member.user.image) : undefined
             }
             email={member.user.email ?? ""}
           />

apps/web/src/views/members/index.tsx

@@ -10,7 +10,11 @@ import { PageHead } from "~/components/PageHead";
 import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
-import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
+import {
+  getAvatarUrl,
+  getInitialsFromName,
+  inferInitialsFromEmail,
+} from "~/utils/helpers";
 import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation";
 import { InviteMemberForm } from "./components/InviteMemberForm";
 
@@ -57,7 +61,7 @@ export default function MembersPage() {
                 <Avatar
                   name={memberName ?? ""}
                   email={memberEmail ?? ""}
-                  imageUrl={memberImage ? "" : undefined}
+                  imageUrl={memberImage ? getAvatarUrl(memberImage) : undefined}
                 />
               )}
             </div>

apps/web/src/views/settings/components/Avatar.tsx

@@ -1,8 +1,10 @@
 import Image from "next/image";
 import { useState } from "react";
 
+import { env } from "~/env";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";
+import { getAvatarUrl } from "~/utils/helpers";
 
 export default function Avatar({
   userId,
@@ -38,41 +40,68 @@ export default function Avatar({
     },
   });
 
-  const avatarUrl = userImage ? "" : undefined;
+  const avatarUrl = userImage ? getAvatarUrl(userImage) : undefined;
 
   const uploadAvatar = async (event: React.ChangeEvent<HTMLInputElement>) => {
     try {
-      setUploading(true);
+      event.preventDefault();
 
-      if (!event.target.files || event.target.files.length === 0) {
-        throw new Error("You must select an image to upload.");
-      }
+      const file = event.target.files?.[0];
 
-      if (!userId) {
-        throw new Error("User ID is required.");
-      }
-
-      const file = event.target.files[0];
-
-      if (!file) {
-        throw new Error("No file selected.");
+      if (!file || !userId) {
+        return showPopup({
+          header: "Error uploading profile image",
+          message: "Please select a file to upload.",
+          icon: "error",
+        });
       }
 
       const fileExt = file.name.split(".").pop();
       const fileName = `${userId}/avatar.${fileExt}`;
-      const filePath = `${fileName}`;
 
-      // const { error: uploadError } = await supabase.storage
-      //   .from("avatars")
-      //   .upload(filePath, file, { upsert: true });
+      setUploading(true);
 
-      // if (uploadError) {
-      //   throw uploadError;
-      // }
+      const response = await fetch(
+        env.NEXT_PUBLIC_BASE_URL + "/api/upload/image",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ filename: fileName, contentType: file.type }),
+        },
+      );
 
-      updateUser.mutate({ image: filePath });
+      if (!response.ok) throw new Error("Failed to get pre-signed URL");
+
+      const { url, fields } = (await response.json()) as {
+        url: string;
+        fields: Record<string, string>;
+      };
+
+      const formData = new FormData();
+      Object.entries(fields).forEach(([key, value]) => {
+        formData.append(key, value);
+      });
+      formData.append("file", file);
+
+      const uploadResponse = await fetch(url, {
+        method: "POST",
+        body: formData,
+      });
+
+      if (!uploadResponse.ok) throw new Error("Failed to upload profile image");
+
+      updateUser.mutate({
+        image: fileName,
+      });
     } catch (error) {
       console.error(error);
+      showPopup({
+        header: "Error uploading profile image",
+        message: "Please try again later, or contact customer support.",
+        icon: "error",
+      });
     } finally {
       setUploading(false);
     }

turbo.json

@@ -56,6 +56,11 @@
     "NEXT_PUBLIC_KAN_ENV",
     "STRIPE_SECRET_KEY",
     "STRIPE_WEBHOOK_SECRET",
+    "NEXT_PUBLIC_S3_AVATAR_BUCKET_NAME",
+    "S3_REGION",
+    "S3_ACCESS_KEY_ID",
+    "S3_SECRET_ACCESS_KEY",
+    "S3_ENDPOINT",
     "PORT"
   ],
   "globalPassThroughEnv": [