move to images instead of files again

exercises/01.schema/01.problem.init/app/routes/resources+/files.$fileId.tsx → exercises/01.schema/01.problem.init/app/routes/resources+/images.$imageId.tsx

@@ -5,13 +5,14 @@ import { db } from '~/utils/db.server.ts'
 import { invariantResponse } from '~/utils/misc.ts'
 
 export async function loader({ params }: DataFunctionArgs) {
-	invariantResponse(params.fileId, 'Invalid file ID')
+	invariantResponse(params.imageId, 'Invalid image ID')
 	const image = db.image.findFirst({
-		where: { id: { equals: params.fileId } },
+		where: { id: { equals: params.imageId } },
 	})
 	invariantResponse(image, 'Image not found', { status: 404 })
 
 	const { filepath, contentType } = image
+	const fileStat = await fs.promises.stat(filepath)
 	const body = new PassThrough()
 	const stream = fs.createReadStream(filepath)
 	stream.on('open', () => stream.pipe(body))
@@ -21,6 +22,7 @@ export async function loader({ params }: DataFunctionArgs) {
 		status: 200,
 		headers: {
 			'Content-Type': contentType,
+			'Content-Length': fileStat.size.toString(),
 			'Content-Disposition': `inline; filename="${params.imageId}"`,
 			'Cache-Control': 'public, max-age=31536000, immutable',
 		},

exercises/01.schema/01.problem.init/app/routes/users+/$username_+/notes.$noteId.tsx

@@ -54,9 +54,9 @@ export default function NoteRoute() {
 				<ul className="flex flex-wrap gap-5 py-5">
 					{data.note.images.map(image => (
 						<li key={image.id}>
-							<a href={`/resources/files/${image.id}`}>
+							<a href={`/resources/images/${image.id}`}>
 								<img
-									src={`/resources/files/${image.id}`}
+									src={`/resources/images/${image.id}`}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
 								/>

exercises/01.schema/01.problem.init/app/routes/users+/$username_+/notes.$noteId_.edit.tsx

@@ -205,7 +205,7 @@ function ImageChooser({
 	const fields = useFieldset(ref, config)
 	const existingImage = Boolean(fields.id.defaultValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		existingImage ? `/resources/files/${fields.id.defaultValue}` : null,
+		existingImage ? `/resources/images/${fields.id.defaultValue}` : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.defaultValue ?? '')
 

exercises/01.schema/01.problem.init/app/utils/misc.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge'
 import userFallback from '~/assets/user.png'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/files/${imageId}` : userFallback
+	return imageId ? `/resources/images/${imageId}` : userFallback
 }
 
 export function getErrorMessage(error: unknown) {

exercises/01.schema/01.solution.init/app/routes/resources+/files.$fileId.tsx → exercises/01.schema/01.solution.init/app/routes/resources+/images.$imageId.tsx

@@ -5,13 +5,14 @@ import { db } from '~/utils/db.server.ts'
 import { invariantResponse } from '~/utils/misc.ts'
 
 export async function loader({ params }: DataFunctionArgs) {
-	invariantResponse(params.fileId, 'Invalid file ID')
+	invariantResponse(params.imageId, 'Invalid image ID')
 	const image = db.image.findFirst({
-		where: { id: { equals: params.fileId } },
+		where: { id: { equals: params.imageId } },
 	})
 	invariantResponse(image, 'Image not found', { status: 404 })
 
 	const { filepath, contentType } = image
+	const fileStat = await fs.promises.stat(filepath)
 	const body = new PassThrough()
 	const stream = fs.createReadStream(filepath)
 	stream.on('open', () => stream.pipe(body))
@@ -21,6 +22,7 @@ export async function loader({ params }: DataFunctionArgs) {
 		status: 200,
 		headers: {
 			'Content-Type': contentType,
+			'Content-Length': fileStat.size.toString(),
 			'Content-Disposition': `inline; filename="${params.imageId}"`,
 			'Cache-Control': 'public, max-age=31536000, immutable',
 		},

exercises/01.schema/01.solution.init/app/routes/users+/$username_+/notes.$noteId.tsx

@@ -54,9 +54,9 @@ export default function NoteRoute() {
 				<ul className="flex flex-wrap gap-5 py-5">
 					{data.note.images.map(image => (
 						<li key={image.id}>
-							<a href={`/resources/files/${image.id}`}>
+							<a href={`/resources/images/${image.id}`}>
 								<img
-									src={`/resources/files/${image.id}`}
+									src={`/resources/images/${image.id}`}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
 								/>

exercises/01.schema/01.solution.init/app/routes/users+/$username_+/notes.$noteId_.edit.tsx

@@ -205,7 +205,7 @@ function ImageChooser({
 	const fields = useFieldset(ref, config)
 	const existingImage = Boolean(fields.id.defaultValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		existingImage ? `/resources/files/${fields.id.defaultValue}` : null,
+		existingImage ? `/resources/images/${fields.id.defaultValue}` : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.defaultValue ?? '')
 

exercises/01.schema/01.solution.init/app/utils/misc.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge'
 import userFallback from '~/assets/user.png'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/files/${imageId}` : userFallback
+	return imageId ? `/resources/images/${imageId}` : userFallback
 }
 
 export function getErrorMessage(error: unknown) {

exercises/02.relationships/01.problem.one-to-many/app/routes/resources+/files.$fileId.tsx → exercises/02.relationships/01.problem.one-to-many/app/routes/resources+/images.$imageId.tsx

@@ -5,13 +5,14 @@ import { db } from '~/utils/db.server.ts'
 import { invariantResponse } from '~/utils/misc.ts'
 
 export async function loader({ params }: DataFunctionArgs) {
-	invariantResponse(params.fileId, 'Invalid file ID')
+	invariantResponse(params.imageId, 'Invalid image ID')
 	const image = db.image.findFirst({
-		where: { id: { equals: params.fileId } },
+		where: { id: { equals: params.imageId } },
 	})
 	invariantResponse(image, 'Image not found', { status: 404 })
 
 	const { filepath, contentType } = image
+	const fileStat = await fs.promises.stat(filepath)
 	const body = new PassThrough()
 	const stream = fs.createReadStream(filepath)
 	stream.on('open', () => stream.pipe(body))
@@ -21,6 +22,7 @@ export async function loader({ params }: DataFunctionArgs) {
 		status: 200,
 		headers: {
 			'Content-Type': contentType,
+			'Content-Length': fileStat.size.toString(),
 			'Content-Disposition': `inline; filename="${params.imageId}"`,
 			'Cache-Control': 'public, max-age=31536000, immutable',
 		},

exercises/02.relationships/01.problem.one-to-many/app/routes/users+/$username_+/notes.$noteId.tsx

@@ -54,9 +54,9 @@ export default function NoteRoute() {
 				<ul className="flex flex-wrap gap-5 py-5">
 					{data.note.images.map(image => (
 						<li key={image.id}>
-							<a href={`/resources/files/${image.id}`}>
+							<a href={`/resources/images/${image.id}`}>
 								<img
-									src={`/resources/files/${image.id}`}
+									src={`/resources/images/${image.id}`}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
 								/>

exercises/02.relationships/01.problem.one-to-many/app/routes/users+/$username_+/notes.$noteId_.edit.tsx

@@ -205,7 +205,7 @@ function ImageChooser({
 	const fields = useFieldset(ref, config)
 	const existingImage = Boolean(fields.id.defaultValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		existingImage ? `/resources/files/${fields.id.defaultValue}` : null,
+		existingImage ? `/resources/images/${fields.id.defaultValue}` : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.defaultValue ?? '')
 

exercises/02.relationships/01.problem.one-to-many/app/utils/misc.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge'
 import userFallback from '~/assets/user.png'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/files/${imageId}` : userFallback
+	return imageId ? `/resources/images/${imageId}` : userFallback
 }
 
 export function getErrorMessage(error: unknown) {

exercises/02.relationships/01.solution.one-to-many/app/routes/resources+/files.$fileId.tsx → exercises/02.relationships/01.solution.one-to-many/app/routes/resources+/images.$imageId.tsx

@@ -5,13 +5,14 @@ import { db } from '~/utils/db.server.ts'
 import { invariantResponse } from '~/utils/misc.ts'
 
 export async function loader({ params }: DataFunctionArgs) {
-	invariantResponse(params.fileId, 'Invalid file ID')
+	invariantResponse(params.imageId, 'Invalid image ID')
 	const image = db.image.findFirst({
-		where: { id: { equals: params.fileId } },
+		where: { id: { equals: params.imageId } },
 	})
 	invariantResponse(image, 'Image not found', { status: 404 })
 
 	const { filepath, contentType } = image
+	const fileStat = await fs.promises.stat(filepath)
 	const body = new PassThrough()
 	const stream = fs.createReadStream(filepath)
 	stream.on('open', () => stream.pipe(body))
@@ -21,6 +22,7 @@ export async function loader({ params }: DataFunctionArgs) {
 		status: 200,
 		headers: {
 			'Content-Type': contentType,
+			'Content-Length': fileStat.size.toString(),
 			'Content-Disposition': `inline; filename="${params.imageId}"`,
 			'Cache-Control': 'public, max-age=31536000, immutable',
 		},

exercises/02.relationships/01.solution.one-to-many/app/routes/users+/$username_+/notes.$noteId.tsx

@@ -54,9 +54,9 @@ export default function NoteRoute() {
 				<ul className="flex flex-wrap gap-5 py-5">
 					{data.note.images.map(image => (
 						<li key={image.id}>
-							<a href={`/resources/files/${image.id}`}>
+							<a href={`/resources/images/${image.id}`}>
 								<img
-									src={`/resources/files/${image.id}`}
+									src={`/resources/images/${image.id}`}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
 								/>

exercises/02.relationships/01.solution.one-to-many/app/routes/users+/$username_+/notes.$noteId_.edit.tsx

@@ -205,7 +205,7 @@ function ImageChooser({
 	const fields = useFieldset(ref, config)
 	const existingImage = Boolean(fields.id.defaultValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		existingImage ? `/resources/files/${fields.id.defaultValue}` : null,
+		existingImage ? `/resources/images/${fields.id.defaultValue}` : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.defaultValue ?? '')
 

exercises/02.relationships/01.solution.one-to-many/app/utils/misc.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge'
 import userFallback from '~/assets/user.png'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/files/${imageId}` : userFallback
+	return imageId ? `/resources/images/${imageId}` : userFallback
 }
 
 export function getErrorMessage(error: unknown) {

exercises/02.relationships/02.problem.one-to-one/app/routes/resources+/images.$imageId.tsx

@@ -0,0 +1,30 @@
+import { Response, type DataFunctionArgs } from '@remix-run/node'
+import fs from 'node:fs'
+import { PassThrough } from 'node:stream'
+import { db } from '~/utils/db.server.ts'
+import { invariantResponse } from '~/utils/misc.ts'
+
+export async function loader({ params }: DataFunctionArgs) {
+	invariantResponse(params.imageId, 'Invalid image ID')
+	const image = db.image.findFirst({
+		where: { id: { equals: params.imageId } },
+	})
+	invariantResponse(image, 'Image not found', { status: 404 })
+
+	const { filepath, contentType } = image
+	const fileStat = await fs.promises.stat(filepath)
+	const body = new PassThrough()
+	const stream = fs.createReadStream(filepath)
+	stream.on('open', () => stream.pipe(body))
+	stream.on('error', err => body.end(err))
+	stream.on('end', () => body.end())
+	return new Response(body, {
+		status: 200,
+		headers: {
+			'Content-Type': contentType,
+			'Content-Length': fileStat.size.toString(),
+			'Content-Disposition': `inline; filename="${params.imageId}"`,
+			'Cache-Control': 'public, max-age=31536000, immutable',
+		},
+	})
+}

exercises/02.relationships/02.problem.one-to-one/app/routes/users+/$username_+/notes.$noteId.tsx

@@ -54,9 +54,9 @@ export default function NoteRoute() {
 				<ul className="flex flex-wrap gap-5 py-5">
 					{data.note.images.map(image => (
 						<li key={image.id}>
-							<a href={`/resources/files/${image.id}`}>
+							<a href={`/resources/images/${image.id}`}>
 								<img
-									src={`/resources/files/${image.id}`}
+									src={`/resources/images/${image.id}`}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
 								/>

exercises/02.relationships/02.problem.one-to-one/app/routes/users+/$username_+/notes.$noteId_.edit.tsx

@@ -205,7 +205,7 @@ function ImageChooser({
 	const fields = useFieldset(ref, config)
 	const existingImage = Boolean(fields.id.defaultValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		existingImage ? `/resources/files/${fields.id.defaultValue}` : null,
+		existingImage ? `/resources/images/${fields.id.defaultValue}` : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.defaultValue ?? '')
 

exercises/02.relationships/02.problem.one-to-one/app/utils/misc.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge'
 import userFallback from '~/assets/user.png'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/files/${imageId}` : userFallback
+	return imageId ? `/resources/images/${imageId}` : userFallback
 }
 
 export function getErrorMessage(error: unknown) {

exercises/02.relationships/02.solution.one-to-one/app/routes/resources+/images.$imageId.tsx

@@ -0,0 +1,30 @@
+import { Response, type DataFunctionArgs } from '@remix-run/node'
+import fs from 'node:fs'
+import { PassThrough } from 'node:stream'
+import { db } from '~/utils/db.server.ts'
+import { invariantResponse } from '~/utils/misc.ts'
+
+export async function loader({ params }: DataFunctionArgs) {
+	invariantResponse(params.imageId, 'Invalid image ID')
+	const image = db.image.findFirst({
+		where: { id: { equals: params.imageId } },
+	})
+	invariantResponse(image, 'Image not found', { status: 404 })
+
+	const { filepath, contentType } = image
+	const fileStat = await fs.promises.stat(filepath)
+	const body = new PassThrough()
+	const stream = fs.createReadStream(filepath)
+	stream.on('open', () => stream.pipe(body))
+	stream.on('error', err => body.end(err))
+	stream.on('end', () => body.end())
+	return new Response(body, {
+		status: 200,
+		headers: {
+			'Content-Type': contentType,
+			'Content-Length': fileStat.size.toString(),
+			'Content-Disposition': `inline; filename="${params.imageId}"`,
+			'Cache-Control': 'public, max-age=31536000, immutable',
+		},
+	})
+}

exercises/02.relationships/02.solution.one-to-one/app/routes/users+/$username_+/notes.$noteId.tsx

@@ -54,9 +54,9 @@ export default function NoteRoute() {
 				<ul className="flex flex-wrap gap-5 py-5">
 					{data.note.images.map(image => (
 						<li key={image.id}>
-							<a href={`/resources/files/${image.id}`}>
+							<a href={`/resources/images/${image.id}`}>
 								<img
-									src={`/resources/files/${image.id}`}
+									src={`/resources/images/${image.id}`}
 									alt={image.altText ?? ''}
 									className="h-32 w-32 rounded-lg object-cover"
 								/>

exercises/02.relationships/02.solution.one-to-one/app/routes/users+/$username_+/notes.$noteId_.edit.tsx

@@ -205,7 +205,7 @@ function ImageChooser({
 	const fields = useFieldset(ref, config)
 	const existingImage = Boolean(fields.id.defaultValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		existingImage ? `/resources/files/${fields.id.defaultValue}` : null,
+		existingImage ? `/resources/images/${fields.id.defaultValue}` : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.defaultValue ?? '')
 

exercises/02.relationships/02.solution.one-to-one/app/utils/misc.ts

@@ -6,7 +6,7 @@ import { twMerge } from 'tailwind-merge'
 import userFallback from '~/assets/user.png'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/files/${imageId}` : userFallback
+	return imageId ? `/resources/images/${imageId}` : userFallback
 }
 
 export function getErrorMessage(error: unknown) {