feat: s3 avatar uploads

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);
     }