From 284b16f56f670077b9ee21f7579f1eea8d8f2d46 Mon Sep 17 00:00:00 2001 From: Igor Serebryany Date: Fri, 21 Nov 2025 12:26:00 -0800 Subject: [PATCH] refactor: single source of truth for file supported size/type vs separate checks on FE and BE --- src/components/UploadAvatarForm.tsx | 105 +++++++++++++++------------- src/db/uploads.ts | 12 +++- src/routes/uploads.test.ts | 10 +-- src/services/uploads.ts | 4 +- static/character.js | 15 ---- 5 files changed, 71 insertions(+), 75 deletions(-) diff --git a/src/components/UploadAvatarForm.tsx b/src/components/UploadAvatarForm.tsx index 6746a5c..0cef7ef 100644 --- a/src/components/UploadAvatarForm.tsx +++ b/src/components/UploadAvatarForm.tsx @@ -1,4 +1,5 @@ import type { Character } from "@src/db/characters" +import { MAX_UPLOAD_SIZE } from "@src/db/uploads" import { ModalContent } from "./ui/ModalContent" export interface UploadAvatarFormProps { @@ -6,59 +7,63 @@ export interface UploadAvatarFormProps { errors?: Record } -export const UploadAvatarForm = ({ character, errors }: UploadAvatarFormProps) => ( - -
-
- - -
Supported formats: JPEG, PNG, WebP, GIF
-
+export function UploadAvatarForm({ character, errors }: UploadAvatarFormProps) { + const maxMb = Math.floor(MAX_UPLOAD_SIZE / (1024 * 1024)) + + return ( + +
+
+ + +
Supported formats: JPEG, PNG, WebP, GIF, HEIF
+
-
-
-
- Uploading... +
+
+
+ Uploading... +
-
- {/* Error alert - used for both client-side and server-side errors */} - + {/* Error alert - used for both client-side and server-side errors */} + - -
-
- - -
- -) +
+ + +
+ + ) +} diff --git a/src/db/uploads.ts b/src/db/uploads.ts index 84a9365..e449b37 100644 --- a/src/db/uploads.ts +++ b/src/db/uploads.ts @@ -12,9 +12,15 @@ export const UploadStatus = { export type UploadStatusType = (typeof UploadStatus)[keyof typeof UploadStatus] // Allowed content types for uploads -export const ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"] as const - -export const MAX_UPLOAD_SIZE = 5 * 1024 * 1024 // 5MB +export const ALLOWED_IMAGE_TYPES = [ + "image/jpeg", + "image/png", + "image/webp", + "image/gif", + "image/heif", +] as const + +export const MAX_UPLOAD_SIZE = 10 * 1024 * 1024 // 10MB // Zod schemas export const UploadSchema = z.object({ diff --git a/src/routes/uploads.test.ts b/src/routes/uploads.test.ts index 13297e5..01cab10 100644 --- a/src/routes/uploads.test.ts +++ b/src/routes/uploads.test.ts @@ -1,6 +1,6 @@ import { beforeEach, describe, expect, test } from "bun:test" import type { Upload } from "@src/db/uploads" -import { UploadStatus } from "@src/db/uploads" +import { MAX_UPLOAD_SIZE, UploadStatus } from "@src/db/uploads" import type { User } from "@src/db/users" import { useTestApp } from "@src/test/app" import { uploadFactory } from "@src/test/factories/upload" @@ -55,7 +55,7 @@ describe("POST /uploads/initiate", () => { }) }) - describe("with invalid content type", () => { + describe("with unsupported type", () => { test("returns 400", async () => { const response = await makeRequest(testCtx.app, "/uploads/initiate", { user, @@ -69,7 +69,7 @@ describe("POST /uploads/initiate", () => { expect(response.status).toBe(400) const data = await response.json() - expect(data.error).toContain("Invalid content type") + expect(data.error).toContain("Unsupported file type") }) }) @@ -81,13 +81,13 @@ describe("POST /uploads/initiate", () => { headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content_type: "image/jpeg", - size_bytes: 10 * 1024 * 1024, // 10MB + size_bytes: MAX_UPLOAD_SIZE + 10, }), }) expect(response.status).toBe(400) const data = await response.json() - expect(data.error).toContain("Invalid file size") + expect(data.error).toContain("too big") }) }) }) diff --git a/src/services/uploads.ts b/src/services/uploads.ts index a780459..dfdfa7c 100644 --- a/src/services/uploads.ts +++ b/src/services/uploads.ts @@ -28,14 +28,14 @@ export async function initiateUpload( // Validate content type if (!isValidContentType(contentType)) { throw new Error( - `Invalid content type: ${contentType}. Allowed types: ${uploads.ALLOWED_IMAGE_TYPES.join(", ")}` + `Unsupported file type '${contentType}'; allowed types: ${uploads.ALLOWED_IMAGE_TYPES.join(", ")}` ) } // Validate size if (!isValidSize(sizeBytes)) { throw new Error( - `Invalid file size: ${sizeBytes} bytes. Maximum allowed: ${uploads.MAX_UPLOAD_SIZE} bytes` + `File size (${sizeBytes / (1024 * 1024)} MB) too big; max allowed: ${uploads.MAX_UPLOAD_SIZE / (1024 * 1024)} MB` ) } diff --git a/static/character.js b/static/character.js index f53f52a..4a0d83c 100644 --- a/static/character.js +++ b/static/character.js @@ -63,21 +63,6 @@ async function handleAvatarUpload(characterId) { return; } - // Validate file type - const validTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif']; - if (!validTypes.includes(file.type)) { - errorDiv.textContent = 'Invalid file type. Please select a JPEG, PNG, WebP, or GIF image.'; - errorDiv.classList.remove('d-none'); - return; - } - - // Validate file size (5MB) - if (file.size > 10 * 1024 * 1024) { - errorDiv.textContent = 'File too large. Maximum size is 5MB.'; - errorDiv.classList.remove('d-none'); - return; - } - // Hide error/success, show progress errorDiv.classList.add('d-none'); successDiv.classList.add('d-none');