Use UUIDs for addressing logos

Author: mphasize

app/components/sidebar-admin.tsx

@@ -78,7 +78,7 @@ export function SidebarAdmin() {
                 >
                   {activeProgram?.logo ? (
                     <img
-                      src={`/view/logo/${activeProgram.logo.id}.svg`}
+                      src={`/view/logo/${activeProgram.logo.uuid}.svg`}
                       alt=""
                       role="presentation"
                       className="w-8 aspect-square"
@@ -141,7 +141,7 @@ export function SidebarAdmin() {
                     <Link to={`/org/program/${program.id}/batch`}>
                       {program.logo ? (
                         <img
-                          src={`/view/logo/${program.logo.id}.svg`}
+                          src={`/view/logo/${program.logo.uuid}.svg`}
                           alt=""
                           role="presentation"
                           className="size-5 ml-1 aspect-square"

app/root.tsx

@@ -44,7 +44,7 @@ export default function App() {
 
 export function ErrorBoundary() {
   const error = useRouteError();
-  console.error(error);
+  //console.error(error);
   let errorInfo;
 
   if (isRouteErrorResponse(error)) {

app/routes/org.program.$programId.settings.tsx

@@ -142,11 +142,12 @@ export default function ProgramSettings() {
             encType="multipart/form-data"
             className="grid grid-cols-2 gap-8 max-w-[505px]"
           >
+            {/* @todo implement a preview -> save workflow for changing the logo */}
             <div>
               <div className="border rounded-lg aspect-square max-w-[200px] bg-white flex justify-center items-center">
                 {program.logo ? (
                   <img
-                    src={`/view/logo/${program.logo.id}.svg`}
+                    src={`/view/logo/${program.logo.uuid}.svg`}
                     alt=""
                     role="presentation"
                   />

app/routes/org.program.$programId.settings.upload.tsx

@@ -1,4 +1,5 @@
 import type { ActionFunction } from "@remix-run/node";
+import { randomUUID } from "node:crypto";
 import {
   json,
   unstable_createMemoryUploadHandler,
@@ -57,9 +58,11 @@ export const action: ActionFunction = async ({ request, params }) => {
         programId: Number(params.programId),
       },
       update: {
+        uuid: randomUUID(),
         contentType: programLogo.type,
       },
       create: {
+        uuid: randomUUID(),
         contentType: programLogo.type,
         program: {
           connect: { id: Number(params.programId) },

app/routes/org.program._index.tsx

@@ -80,7 +80,7 @@ export default function OrgIndex() {
                 >
                   {program.logo && (
                     <img
-                      src={`/view/logo/${program.logo.id}.svg`}
+                      src={`/view/logo/${program.logo.uuid}.svg`}
                       alt=""
                       role="presentation"
                       className="w-8 aspect-square"

app/routes/view.logo.$logoId[.svg].ts renamed to app/routes/view.logo.$logoUuid[.svg].ts

@@ -4,10 +4,9 @@ import { prisma } from "~/lib/prisma.server";
 import { readProgramLogo } from "~/lib/program.server";
 
 export const loader: LoaderFunction = async ({ params }) => {
-	// @todo use UUID instead of ID (make it harder to guess and reveal internals)
 	const logo = await prisma.programLogo.findUnique({
 		where: {
-			id: Number(params.logoId),
+			uuid: params.logoUuid,
 		},
 	});
 

prisma/migrations/20250515201218_logo_uuid/migration.sql

@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[uuid]` on the table `program_logos` will be added. If there are existing duplicate values, this will fail.
+  - Added the required column `uuid` to the `program_logos` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "program_logos" ADD COLUMN     "uuid" UUID NOT NULL DEFAULT gen_random_uuid ();
+
+-- CreateIndex
+CREATE UNIQUE INDEX "program_logos_uuid_key" ON "program_logos"("uuid");

prisma/migrations/20250515201917_logo_uuid_remove_default/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "program_logos" ALTER COLUMN "uuid" DROP DEFAULT;

prisma/schema.prisma

@@ -92,6 +92,7 @@ model Program {
 
 model ProgramLogo {
   id            Int       @id @default(autoincrement())
+  uuid          String    @unique @db.Uuid  
   contentType   String    @db.VarChar(64)
   updatedAt     DateTime  @updatedAt    
   program       Program   @relation(fields: [programId], references: [id])