Fixed the image upload problem and moved the resource routes from the resources+ folder as the react router doesn't support this.

app/routes/resources.file.$fileId.tsx

@@ -0,0 +1,29 @@
+import { type LoaderFunctionArgs } from 'react-router'
+import invariant from 'tiny-invariant'
+import { drizzleClient } from '~/db.server'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+	invariant(params.fileId, 'File ID is required')
+
+	// Keep it as a string - your ID column is PgText, not an integer
+	const image = await drizzleClient.query.profileImage.findFirst({
+		where: (profileImage, { eq }) =>
+			eq(profileImage.id, params.fileId as string),
+	})
+
+	if (!image || !image.blob) {
+		throw new Response('Not found', { status: 404 })
+	}
+
+	// Convert Buffer to Uint8Array
+	const body = new Uint8Array(image.blob)
+
+	return new Response(body, {
+		headers: {
+			'Content-Type': image.contentType || 'image/jpeg',
+			'Content-Length': body.byteLength.toString(),
+			'Content-Disposition': `inline; filename="profile-${params.fileId}"`,
+			'Cache-Control': 'public, max-age=31536000, immutable',
+		},
+	})
+}

app/routes/settings.profile.photo.tsx

@@ -93,23 +93,27 @@ export async function action({ request }: ActionFunctionArgs) {
   // Query user profile
   const previousProfileWithImage = await drizzleClient.query.profile.findFirst({
     where: (profile, { eq }) => eq(profile.userId, userId),
-    with: {
-      profileImage: true,
-    },
+    with: { profileImage: true },
   });
 
-  // Insert new profile image
-  await drizzleClient.insert(profileImage).values({
-    blob: Buffer.from(await photoFile.arrayBuffer()),
-    contentType: photoFile.type,
-    profileId: previousProfileWithImage?.id,
-  });
+  // Store the old image ID before inserting new one
+  const oldImageId = previousProfileWithImage?.profileImage?.id;
+
+  // Insert new profile image and get the new ID back
+  const [newImage] = await drizzleClient
+    .insert(profileImage)
+    .values({
+      blob: Buffer.from(await photoFile.arrayBuffer()),
+      contentType: photoFile.type,
+      profileId: previousProfileWithImage?.id,
+    })
+    .returning();
 
-  // If an old profile image exists, delete it
-  if (previousProfileWithImage?.profileImage?.id) {
+  // Delete the OLD image (not the new one)
+  if (oldImageId && oldImageId !== newImage.id) {
     await drizzleClient
       .delete(profileImage)
-      .where(eq(profileImage.id, previousProfileWithImage.profileImage.id));
+      .where(eq(profileImage.id, oldImageId));
   }
 
   return redirect("/settings/profile");

app/routes/settings.profile.tsx

@@ -176,7 +176,7 @@ export default function EditUserProfilePage() {
               <Link
                 preventScrollReset
                 to="photo"
-                className="border-night-700 bg-night-500 absolute -right-3 top-3 flex h-4 w-4 items-center justify-center rounded-full border-4 p-5 pointer-events-none"
+                className="border-night-700 bg-night-500 absolute -right-3 top-3 flex h-4 w-4 items-center justify-center rounded-full border-4 p-5 pointer-events-auto"
                 title="Change profile photo"
                 aria-label="Change profile photo"
               >