Adding 'stage 1' of avatar refactor, wip

apps/api/lib/validations/user.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+import { avatarSchema } from "@calcom/features/profile/server/avatar";
 import { checkUsername } from "@calcom/lib/server/checkUsername";
 import { _UserModel as User } from "@calcom/prisma/zod";
 import { iso8601 } from "@calcom/prisma/zod-utils";
@@ -100,6 +101,7 @@ const schemaUserEditParams = z.object({
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
+  avatar: avatarSchema.optional(),
   defaultScheduleId: z
     .number()
     .refine((id: number) => id > 0)

apps/api/pages/api/users/[userId]/_patch.ts

@@ -1,5 +1,7 @@
+import type { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 
+import { uploadAvatar } from "@calcom/features/profile/server/avatar";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
@@ -56,6 +58,9 @@ import { schemaUserEditBodyParams, schemaUserReadPublic } from "~/lib/validation
  *               hideBranding:
  *                 description: Remove branding from the user's calendar page
  *                 type: boolean
+ *               avatar:
+ *                 desciption: Set the users' profile avatar
+ *                 type: string
  *               theme:
  *                 description: Default theme for the user. Acceptable values are one of [DARK, LIGHT]
  *                 type: string
@@ -75,6 +80,7 @@ import { schemaUserEditBodyParams, schemaUserReadPublic } from "~/lib/validation
  *                  brandColor: #555555
  *                  darkBrandColor: #111111
  *                  timeZone: EUROPE/PARIS
+ *                  avatar: data:image/png:base64,...
  *                  theme: LIGHT
  *                  timeFormat: TWELVE
  *                  locale: FR
@@ -114,11 +120,25 @@ export async function patchHandler(req: NextApiRequest) {
       message: "Bad request: Invalid default schedule id",
     });
   }
-  const data = await prisma.user.update({
+
+  const data: Prisma.UserUpdateInput = body;
+
+  const avatarUploadResult = await uploadAvatar(query.userId, body.avatar);
+  if (avatarUploadResult) {
+    data.avatarUrl = avatarUploadResult[0];
+    data.avatar = avatarUploadResult[1];
+  }
+  // if the body.avatar is not uploaded, write it to avatarUrl
+  else if (typeof body.avatar !== "undefined") {
+    // either null or a URL
+    data.avatarUrl = body.avatar;
+  }
+
+  const userCreatedResult = await prisma.user.update({
     where: { id: query.userId },
-    data: body,
+    data,
   });
-  const user = schemaUserReadPublic.parse(data);
+  const user = schemaUserReadPublic.parse(userCreatedResult);
   return { user };
 }
 

apps/web/pages/api/avatar/[uuid].ts

@@ -0,0 +1,67 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+const querySchema = z.object({
+  uuid: z.string().transform((objectKey) => objectKey.split(".")[0]),
+});
+
+const handleValidationError = (res: NextApiResponse, error: z.ZodError): void => {
+  const errors = error.errors.map((err) => ({
+    path: err.path.join("."),
+    errorCode: `error.validation.${err.code}`,
+  }));
+
+  res.status(400).json({
+    message: "VALIDATION_ERROR",
+    errors,
+  });
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const result = querySchema.safeParse(req.query);
+  if (!result.success) {
+    return handleValidationError(res, result.error);
+  }
+
+  const { uuid: id } = result.data;
+
+  let img;
+  try {
+    const { data, reference } = await prisma.image.findUniqueOrThrow({
+      where: {
+        id,
+      },
+      select: {
+        data: true,
+        reference: true,
+      },
+    });
+    // Just so other image types (if we have them) aren't resolved by this endpoint.
+    // negligable overhead, also this is cached.
+    if (!reference.startsWith("user_avatar")) {
+      throw new Error("Not Found");
+    }
+    img = data;
+  } catch (e) {
+    // If anything goes wrong or avatar is not found, use default avatar
+    res.writeHead(302, {
+      Location: AVATAR_FALLBACK,
+    });
+
+    res.end();
+    return;
+  }
+
+  const decoded = img.toString().replace("data:image/png;base64,", "").replace("data:image/jpeg;base64,", "");
+  const imageResp = Buffer.from(decoded, "base64");
+
+  res.writeHead(200, {
+    "Content-Type": "image/png",
+    "Content-Length": imageResp.length,
+  });
+
+  res.end(imageResp);
+}

packages/features/profile/server/avatar.ts

@@ -0,0 +1,37 @@
+import { z } from "zod";
+
+import { resizeBase64Image } from "@calcom/lib/server/resizeBase64Image";
+import prisma from "@calcom/prisma";
+
+const base64Image = z.custom<string>((val: unknown) => {
+  return typeof val === "string" ? /^data:image\/png;base64,/.test(val) : false;
+});
+
+// either a data:image/png;base64,<base64> or a URL
+export const avatarSchema = z.union([z.string().url(), base64Image]).nullable();
+
+export async function uploadAvatar(
+  userId: number,
+  avatar?: string | null
+): Promise<[string, string] | undefined> {
+  const result = base64Image.safeParse(avatar);
+  if (!result.success) return;
+
+  const resizedAvatar = await resizeBase64Image(result.data);
+
+  // At this point we write the avatar to the images
+  const { id } = await prisma.image.upsert({
+    where: {
+      reference: `user_avatar:${userId}`,
+    },
+    create: {
+      reference: `user_avatar:${userId}`,
+      data: resizedAvatar,
+    },
+    update: {
+      data: resizedAvatar,
+    },
+  });
+
+  return [`/api/avatar/${id}.png`, resizedAvatar];
+}

packages/prisma/migrations/20231020015837_add_images_table/migration.sql

@@ -0,0 +1,14 @@
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "avatarUrl" TEXT;
+
+-- CreateTable
+CREATE TABLE "images" (
+    "id" TEXT NOT NULL,
+    "data" TEXT NOT NULL,
+    "reference" TEXT NOT NULL,
+
+    CONSTRAINT "images_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "images_reference_key" ON "images"("reference");

packages/prisma/schema.prisma

@@ -183,6 +183,7 @@ model User {
   password            String?
   bio                 String?
   avatar              String?
+  avatarUrl           String?
   timeZone            String               @default("Europe/London")
   weekStart           String               @default("Sunday")
   // DEPRECATED - TO BE REMOVED
@@ -996,3 +997,12 @@ model TempOrgRedirect {
 
   @@unique([from, type, fromOrgId])
 }
+
+model Image {
+  id        String @id @default(uuid())
+  data      String
+  // e.g. user:233 - allows future cleanup
+  reference String @unique
+
+  @@map(name: "images")
+}

packages/trpc/server/routers/loggedInViewer/updateProfile.handler.ts

@@ -4,11 +4,11 @@ import type { GetServerSidePropsContext, NextApiResponse } from "next";
 import stripe from "@calcom/app-store/stripepayment/lib/server";
 import { getPremiumPlanProductId } from "@calcom/app-store/stripepayment/lib/utils";
 import { passwordResetRequest } from "@calcom/features/auth/lib/passwordResetRequest";
+import { uploadAvatar } from "@calcom/features/profile/server/avatar";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import logger from "@calcom/lib/logger";
 import { getTranslation } from "@calcom/lib/server";
 import { checkUsername } from "@calcom/lib/server/checkUsername";
-import { resizeBase64Image } from "@calcom/lib/server/resizeBase64Image";
 import slugify from "@calcom/lib/slugify";
 import { updateWebUser as syncServicesUpdateWebUser } from "@calcom/lib/sync/SyncServiceManager";
 import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts";
@@ -61,12 +61,10 @@ export const updateProfileHandler = async ({ ctx, input }: UpdateProfileOptions)
       }
     }
   }
-  if (input.avatar) {
-    data.avatar = await resizeBase64Image(input.avatar);
-  }
-  if (input.avatar === null) {
-    data.avatar = null;
-  }
+
+  const avatarUploadResult = await uploadAvatar(user.id, input.avatar);
+  data.avatarUrl = avatarUploadResult?.[0];
+  data.avatar = avatarUploadResult?.[1];
 
   if (isPremiumUsername) {
     const stripeCustomerId = userMetadata?.stripeCustomerId;

packages/trpc/server/routers/viewer/organizations/updateUser.handler.ts

@@ -1,5 +1,5 @@
+import { uploadAvatar } from "@calcom/features/profile/server/avatar";
 import { isOrganisationAdmin, isOrganisationOwner } from "@calcom/lib/server/queries/organisations";
-import { resizeBase64Image } from "@calcom/lib/server/resizeBase64Image";
 import { prisma } from "@calcom/prisma";
 import { MembershipRole } from "@calcom/prisma/enums";
 import type { TrpcSessionUser } from "@calcom/trpc/server/trpc";
@@ -19,7 +19,7 @@ export const updateUserHandler = async ({ ctx, input }: UpdateUserOptions) => {
   const { user } = ctx;
   const { id: userId, organizationId } = user;
   if (!organizationId)
-    throw new TRPCError({ code: "UNAUTHORIZED", message: "You must be a memeber of an organizaiton" });
+    throw new TRPCError({ code: "UNAUTHORIZED", message: "You must be a member of an organization" });
 
   if (!(await isOrganisationAdmin(userId, organizationId))) throw new TRPCError({ code: "UNAUTHORIZED" });
 
@@ -40,10 +40,7 @@ export const updateUserHandler = async ({ ctx, input }: UpdateUserOptions) => {
   if (!requestedMember)
     throw new TRPCError({ code: "UNAUTHORIZED", message: "User does not belong to your organization" });
 
-  let avatar = input.avatar;
-  if (input.avatar) {
-    avatar = await resizeBase64Image(input.avatar);
-  }
+  const avatarUploadResult = await uploadAvatar(input.userId, input.avatar);
 
   // Update user
   await prisma.$transaction([
@@ -56,7 +53,8 @@ export const updateUserHandler = async ({ ctx, input }: UpdateUserOptions) => {
         email: input.email,
         name: input.name,
         timeZone: input.timeZone,
-        avatar,
+        avatarUrl: avatarUploadResult?.[0],
+        avatar: avatarUploadResult?.[1],
       },
     }),
     prisma.membership.update({