modules/storage: add image validation and WebP compression

- Add MIME type validation for uploads (jpeg, png, webp, avif, heic, gif, tiff, svg, bmp)
- Add folder path validation (allowlist)
- Add server-side WebP compression using sharp
- Preserve SVG and animated GIF as-is
- Update client hint text to show supported formats

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: aster-void

bun.lock

@@ -63,6 +63,7 @@
     "lucide-svelte": "^0.561.0",
     "marked": "^17.0.1",
     "minio": "^8.0.6",
+    "sharp": "^0.34.5",
     "valibot": "^1.2.0"
   }
 }

package.json

@@ -1,17 +1,22 @@
 <script lang="ts">
   import { upload } from "$lib/data/private/storage.remote";
   import { Loader2, Upload, AlertCircle, X } from "lucide-svelte";
+  import {
+    isAcceptedImageType,
+    isAllowedFolder,
+    type AllowedFolder,
+  } from "$lib/shared/logic/image";
 
   const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 
   let {
     value = $bindable(""),
-    folder = "images",
+    folder = "images" as AllowedFolder,
     label = "Image",
     aspect = "5/3",
   }: {
     value?: string;
-    folder?: string;
+    folder?: AllowedFolder;
     label?: string;
     aspect?: "5/3" | "1/1" | "16/9" | "4/3";
   } = $props();
@@ -93,8 +98,14 @@
     error = null;
 
     // Validate file type
-    if (!file.type.startsWith("image/")) {
-      error = "Please select an image file";
+    if (!isAcceptedImageType(file.type)) {
+      error = "Unsupported image format";
+      return;
+    }
+
+    // Validate folder
+    if (!isAllowedFolder(folder)) {
+      error = "Invalid upload folder";
       return;
     }
 
@@ -120,9 +131,13 @@
     try {
       const arrayBuffer = await processedFile.arrayBuffer();
       const base64 = arrayBufferToBase64(arrayBuffer);
+      // Use the validated original type - server will re-compress to WebP anyway
+      const uploadType = isAcceptedImageType(processedFile.type)
+        ? processedFile.type
+        : file.type;
       const result = await upload({
         data: base64,
-        type: processedFile.type,
+        type: uploadType,
         name: processedFile.name,
         folder,
       });
@@ -265,7 +280,7 @@
             Drop, click, or paste (Ctrl+V)
           {/if}
         </span>
-        <span class="mt-1 text-xs text-zinc-400">PNG, JPG, GIF up to 10MB</span>
+        <span class="mt-1 text-xs text-zinc-400">JPG, PNG, WebP, AVIF, HEIC up to 10MB</span>
       {/if}
       <input
         type="file"

src/lib/components/image-upload.svelte

@@ -2,20 +2,46 @@ import { command } from "$app/server";
 import * as v from "valibot";
 import { requireUtCodeMember } from "$lib/server/database/auth.server";
 import { uploadBuffer, deleteFile } from "$lib/server/database/storage.server";
+import { compressImage } from "$lib/server/database/image.server";
 import { S3KeySchema } from "$lib/shared/logic/storage";
+import { ACCEPTED_IMAGE_TYPES, ALLOWED_FOLDERS } from "$lib/shared/logic/image";
+
+/** Allowed folder paths for uploads */
+const FolderSchema = v.optional(v.picklist([...ALLOWED_FOLDERS]));
+
+/** Max file size: 10MB (base64 encoded ~13.7MB) */
+const MAX_BASE64_SIZE = Math.ceil(10 * 1024 * 1024 * 1.37);
+
+const UploadSchema = v.object({
+  data: v.pipe(
+    v.string(),
+    v.maxLength(MAX_BASE64_SIZE, "File too large (max 10MB)"),
+  ),
+  type: v.picklist([...ACCEPTED_IMAGE_TYPES], "Unsupported image format"),
+  name: v.pipe(v.string(), v.maxLength(255)),
+  folder: FolderSchema,
+});
 
 export const upload = command(
-  v.object({
-    data: v.string(), // base64
-    type: v.string(), // mime type
-    name: v.string(), // file name
-    folder: v.optional(v.string()),
-  }),
+  UploadSchema,
   async ({ data, type, name, folder }) => {
     await requireUtCodeMember();
+
     const path = folder ?? "uploads";
-    const buffer = Buffer.from(data, "base64");
-    return await uploadBuffer(buffer, type, name, path);
+    const inputBuffer = Buffer.from(data, "base64");
+
+    // Compress and convert to WebP
+    const {
+      buffer,
+      type: outputType,
+      extension,
+    } = await compressImage(inputBuffer, type);
+
+    // Replace original extension with output extension
+    const baseName = name.replace(/\.[^.]+$/, "");
+    const outputName = `${baseName}.${extension}`;
+
+    return await uploadBuffer(buffer, outputType, outputName, path);
   },
 );
 

src/lib/data/private/storage.remote.ts

@@ -0,0 +1,81 @@
+import sharp from "sharp";
+
+// Re-export shared types
+export {
+  ACCEPTED_IMAGE_TYPES,
+  isAcceptedImageType,
+  type AcceptedImageType,
+} from "$lib/shared/logic/image";
+
+/**
+ * Image compression options
+ */
+interface CompressOptions {
+  /** Max width/height in pixels (default: 1920) */
+  maxSize?: number;
+  /** WebP quality 1-100 (default: 85) */
+  quality?: number;
+}
+
+/**
+ * Compress an image buffer to WebP format
+ * - Resizes if larger than maxSize
+ * - Converts to WebP for optimal compression
+ * - Preserves aspect ratio
+ * - Handles animated GIFs by keeping them as-is
+ *
+ * @returns Compressed buffer and the output MIME type
+ */
+export async function compressImage(
+  buffer: Buffer,
+  inputType: string,
+  options: CompressOptions = {},
+): Promise<{ buffer: Buffer; type: string; extension: string }> {
+  const { maxSize = 1920, quality = 85 } = options;
+
+  // Pass through SVG as-is (vector format, no compression needed)
+  if (inputType === "image/svg+xml") {
+    return { buffer, type: "image/svg+xml", extension: "svg" };
+  }
+
+  // Check if it's an animated GIF
+  if (inputType === "image/gif") {
+    const metadata = await sharp(buffer).metadata();
+    if (metadata.pages && metadata.pages > 1) {
+      // Animated GIF - pass through as-is
+      return { buffer, type: "image/gif", extension: "gif" };
+    }
+  }
+
+  // Process with sharp
+  let image = sharp(buffer, {
+    // Enable HEIF/HEIC support
+    failOnError: false,
+  });
+
+  const metadata = await image.metadata();
+
+  // Resize if needed (preserve aspect ratio)
+  if (metadata.width && metadata.height) {
+    if (metadata.width > maxSize || metadata.height > maxSize) {
+      image = image.resize(maxSize, maxSize, {
+        fit: "inside",
+        withoutEnlargement: true,
+      });
+    }
+  }
+
+  // Convert to WebP
+  const outputBuffer = await image
+    .webp({
+      quality,
+      effort: 4, // Balance between speed and compression (0-6)
+    })
+    .toBuffer();
+
+  return {
+    buffer: outputBuffer,
+    type: "image/webp",
+    extension: "webp",
+  };
+}

src/lib/server/database/image.server.ts

@@ -0,0 +1,47 @@
+/**
+ * Accepted image MIME types for upload
+ * Shared between client and server
+ */
+export const ACCEPTED_IMAGE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/webp",
+  "image/avif",
+  "image/heic",
+  "image/heif",
+  "image/gif",
+  "image/tiff",
+  "image/svg+xml",
+  "image/bmp",
+] as const;
+
+export type AcceptedImageType = (typeof ACCEPTED_IMAGE_TYPES)[number];
+
+/**
+ * Check if a MIME type is an accepted image type
+ */
+export function isAcceptedImageType(type: string): type is AcceptedImageType {
+  return (ACCEPTED_IMAGE_TYPES as readonly string[]).includes(type);
+}
+
+/**
+ * Allowed folder paths for uploads
+ */
+export const ALLOWED_FOLDERS = [
+  "images",
+  "uploads",
+  "covers",
+  "avatars",
+  "articles",
+  "members",
+  "projects",
+] as const;
+
+export type AllowedFolder = (typeof ALLOWED_FOLDERS)[number];
+
+/**
+ * Check if a folder is allowed
+ */
+export function isAllowedFolder(folder: string): folder is AllowedFolder {
+  return (ALLOWED_FOLDERS as readonly string[]).includes(folder);
+}