migrate to tigris for image storage

Author: kentcdodds

.env.example

@@ -19,3 +19,9 @@ GITHUB_TOKEN="MOCK_GITHUB_TOKEN"
 # set this to false to prevent search engines from indexing the website
 # default to allow indexing for seo safety
 ALLOW_INDEXING="true"
+
+# Tigris Object Storage (S3-compatible) Configuration
+STORAGE_ACCESS_KEY="mock-access-key"
+STORAGE_SECRET_KEY="mock-secret-key"
+STORAGE_BUCKET="my-app-bucket"
+STORAGE_ENDPOINT="https://my-app-storage.example.com"

.gitignore

@@ -14,6 +14,7 @@ node_modules
 /playwright-report/
 /playwright/.cache/
 /tests/fixtures/email/
+/tests/fixtures/uploaded/
 /coverage
 
 /other/cache.db

app/routes/resources+/note-images.$imageId.tsx

@@ -1,22 +1,14 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { prisma } from '#app/utils/db.server.ts'
+import { getImageUrl } from '#app/utils/storage.server.ts'
 import { type Route } from './+types/note-images.$imageId.ts'
 
 export async function loader({ params }: Route.LoaderArgs) {
 	invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
-	const image = await prisma.noteImage.findUnique({
+	const noteImage = await prisma.noteImage.findUnique({
 		where: { id: params.imageId },
-		select: { contentType: true, blob: true },
-	})
-
-	invariantResponse(image, 'Not found', { status: 404 })
-
-	return new Response(image.blob, {
-		headers: {
-			'Content-Type': image.contentType,
-			'Content-Length': Buffer.byteLength(image.blob).toString(),
-			'Content-Disposition': `inline; filename="${params.imageId}"`,
-			'Cache-Control': 'public, max-age=31536000, immutable',
-		},
+		select: { storageKey: true },
 	})
+	invariantResponse(noteImage, 'Note image not found', { status: 404 })
+	return fetch(getImageUrl(noteImage.storageKey))
 }

app/routes/resources+/user-images.$imageId.tsx

@@ -1,22 +1,14 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { prisma } from '#app/utils/db.server.ts'
+import { getImageUrl } from '#app/utils/storage.server.ts'
 import { type Route } from './+types/user-images.$imageId.ts'
 
 export async function loader({ params }: Route.LoaderArgs) {
 	invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
-	const image = await prisma.userImage.findUnique({
+	const userImage = await prisma.userImage.findUnique({
 		where: { id: params.imageId },
-		select: { contentType: true, blob: true },
-	})
-
-	invariantResponse(image, 'Not found', { status: 404 })
-
-	return new Response(image.blob, {
-		headers: {
-			'Content-Type': image.contentType,
-			'Content-Length': Buffer.byteLength(image.blob).toString(),
-			'Content-Disposition': `inline; filename="${params.imageId}"`,
-			'Cache-Control': 'public, max-age=31536000, immutable',
-		},
+		select: { storageKey: true },
 	})
+	invariantResponse(userImage, 'User image not found', { status: 404 })
+	return fetch(getImageUrl(userImage.storageKey))
 }

app/routes/settings+/profile.photo.tsx

@@ -18,6 +18,7 @@ import {
 	useDoubleCheck,
 	useIsPending,
 } from '#app/utils/misc.tsx'
+import { uploadProfileImage } from '#app/utils/storage.server.ts'
 import { type Route } from './+types/profile.photo.ts'
 import { type BreadcrumbHandle } from './profile.tsx'
 
@@ -79,7 +80,7 @@ export async function action({ request }: Route.ActionArgs) {
 				intent: data.intent,
 				image: {
 					contentType: data.photoFile.type,
-					blob: Buffer.from(await data.photoFile.arrayBuffer()),
+					storageKey: await uploadProfileImage(userId, data.photoFile),
 				},
 			}
 		}),

app/routes/users+/$username.test.tsx

@@ -26,6 +26,7 @@ test('The user profile when not logged in as self', async () => {
 			path: '/users/:username',
 			Component: UsernameRoute,
 			loader,
+			HydrateFallback: () => <div>Loading...</div>,
 		},
 	])
 
@@ -70,6 +71,7 @@ test('The user profile when logged in as self', async () => {
 				args.request.headers.set('cookie', cookieHeader)
 				return rootLoader({ ...args, context: args.context })
 			},
+			HydrateFallback: () => <div>Loading...</div>,
 			children: [
 				{
 					path: 'users/:username',
@@ -85,7 +87,7 @@ test('The user profile when logged in as self', async () => {
 	])
 
 	const routeUrl = `/users/${user.username}`
-	await render(<App initialEntries={[routeUrl]} />)
+	render(<App initialEntries={[routeUrl]} />)
 
 	await screen.findByRole('heading', { level: 1, name: user.name! })
 	await screen.findByRole('img', { name: user.name! })

app/routes/users+/$username_+/__note-editor.server.tsx

@@ -6,6 +6,7 @@ import { z } from 'zod'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { uploadHandler } from '#app/utils/file-uploads.server.ts'
+import { uploadNoteImage } from '#app/utils/storage.server.ts'
 import {
 	MAX_UPLOAD_SIZE,
 	NoteEditorSchema,
@@ -48,16 +49,18 @@ export async function action({ request }: ActionFunctionArgs) {
 				})
 			}
 		}).transform(async ({ images = [], ...data }) => {
+			const noteId = data.id ?? cuid()
 			return {
 				...data,
+				id: noteId,
 				imageUpdates: await Promise.all(
 					images.filter(imageHasId).map(async (i) => {
 						if (imageHasFile(i)) {
 							return {
 								id: i.id,
 								altText: i.altText,
 								contentType: i.file.type,
-								blob: Buffer.from(await i.file.arrayBuffer()),
+								storageKey: await uploadNoteImage(userId, noteId, i.file),
 							}
 						} else {
 							return {
@@ -75,7 +78,7 @@ export async function action({ request }: ActionFunctionArgs) {
 							return {
 								altText: image.altText,
 								contentType: image.file.type,
-								blob: Buffer.from(await image.file.arrayBuffer()),
+								storageKey: await uploadNoteImage(userId, noteId, image.file),
 							}
 						}),
 				),
@@ -101,8 +104,9 @@ export async function action({ request }: ActionFunctionArgs) {
 
 	const updatedNote = await prisma.note.upsert({
 		select: { id: true, owner: { select: { username: true } } },
-		where: { id: noteId ?? '__new_note__' },
+		where: { id: noteId },
 		create: {
+			id: noteId,
 			ownerId: userId,
 			title,
 			content,
@@ -115,7 +119,11 @@ export async function action({ request }: ActionFunctionArgs) {
 				deleteMany: { id: { notIn: imageUpdates.map((i) => i.id) } },
 				updateMany: imageUpdates.map((updates) => ({
 					where: { id: updates.id },
-					data: { ...updates, id: updates.blob ? cuid() : updates.id },
+					data: {
+						...updates,
+						// If the image is new, we need to generate a new ID to bust the cache.
+						id: updates.storageKey ? cuid() : updates.id,
+					},
 				})),
 				create: newImages,
 			},

app/utils/auth.server.ts

@@ -8,6 +8,7 @@ import { prisma } from './db.server.ts'
 import { combineHeaders, downloadFile } from './misc.tsx'
 import { type ProviderUser } from './providers/provider.ts'
 import { authSessionStorage } from './session.server.ts'
+import { uploadProfileImage } from './storage.server.ts'
 
 export const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30
 export const getSessionExpirationDate = () =>
@@ -160,21 +161,37 @@ export async function signupWithConnection({
 	providerName: Connection['providerName']
 	imageUrl?: string
 }) {
-	const session = await prisma.session.create({
+	const user = await prisma.user.create({
 		data: {
-			expirationDate: getSessionExpirationDate(),
-			user: {
-				create: {
-					email: email.toLowerCase(),
-					username: username.toLowerCase(),
-					name,
-					roles: { connect: { name: 'user' } },
-					connections: { create: { providerId, providerName } },
-					image: imageUrl
-						? { create: await downloadFile(imageUrl) }
-						: undefined,
+			email: email.toLowerCase(),
+			username: username.toLowerCase(),
+			name,
+			roles: { connect: { name: 'user' } },
+			connections: { create: { providerId, providerName } },
+		},
+		select: { id: true },
+	})
+
+	if (imageUrl) {
+		const imageFile = await downloadFile(imageUrl)
+		await prisma.user.update({
+			where: { id: user.id },
+			data: {
+				image: {
+					create: {
+						contentType: imageFile.type,
+						storageKey: await uploadProfileImage(user.id, imageFile),
+					},
 				},
 			},
+		})
+	}
+
+	// Create and return the session
+	const session = await prisma.session.create({
+		data: {
+			expirationDate: getSessionExpirationDate(),
+			userId: user.id,
 		},
 		select: { id: true, expirationDate: true },
 	})

app/utils/env.server.ts

@@ -17,6 +17,12 @@ const schema = z.object({
 	GITHUB_CLIENT_SECRET: z.string().default('MOCK_GITHUB_CLIENT_SECRET'),
 	GITHUB_TOKEN: z.string().default('MOCK_GITHUB_TOKEN'),
 	ALLOW_INDEXING: z.enum(['true', 'false']).optional(),
+
+	// Tigris Object Storage Configuration
+	STORAGE_ACCESS_KEY: z.string(),
+	STORAGE_SECRET_KEY: z.string(),
+	STORAGE_BUCKET: z.string(),
+	STORAGE_ENDPOINT: z.string().url(),
 })
 
 declare global {

app/utils/misc.tsx

@@ -281,8 +281,11 @@ export async function downloadFile(url: string, retries: number = 0) {
 			throw new Error(`Failed to fetch image with status ${response.status}`)
 		}
 		const contentType = response.headers.get('content-type') ?? 'image/jpg'
-		const blob = Buffer.from(await response.arrayBuffer())
-		return { contentType, blob }
+		const arrayBuffer = await response.arrayBuffer()
+		const file = new File([arrayBuffer], 'downloaded-file', {
+			type: contentType,
+		})
+		return file
 	} catch (e) {
 		if (retries > MAX_RETRIES) throw e
 		return downloadFile(url, retries + 1)