fix(file-input): reject unsupported image formats on upload

default.nix

@@ -22,6 +22,7 @@ let
 
 in pkgs.mkShell {
   packages = with pkgs; [
+    nodejs_24
     mise
     cargo-binstall
     (writeShellScriptBin "fish" ''
@@ -49,4 +50,4 @@ in pkgs.mkShell {
       echo "✅ Playwright versions in nix and npm are the same"
     fi
   '';
-}
+}

packages/client/components/state/stores/Draft.ts

@@ -89,6 +89,11 @@ export const ALLOWED_IMAGE_TYPES = [
   "image/webp",
 ];
 
+/**
+ * Human-readable labels for each entry in ALLOWED_IMAGE_TYPES (same order)
+ */
+export const ALLOWED_IMAGE_TYPE_LABELS = ["JPEG", "PNG", "GIF", "WebP"];
+
 /**
  * Message drafts store
  */

packages/client/components/ui/components/utils/Form2.tsx

@@ -5,15 +5,21 @@ import {
   For,
   Match,
   Show,
-  Switch,
   splitProps,
+  Switch,
 } from "solid-js";
 
-import { Trans } from "@lingui-solid/solid/macro";
+import { Trans, useLingui } from "@lingui-solid/solid/macro";
 import { VirtualContainer } from "@minht11/solid-virtual-container";
 import { css } from "styled-system/css";
 import { styled } from "styled-system/jsx";
 
+import { useModals } from "../../../modal";
+import {
+  ALLOWED_IMAGE_TYPE_LABELS,
+  ALLOWED_IMAGE_TYPES,
+} from "../../../state/stores/Draft";
+
 import { Button, Checkbox, Radio2, Text, TextField } from "../design";
 import { TextEditor2 } from "../features/texteditor/TextEditor2";
 
@@ -138,6 +144,11 @@ const FormFileInput = (
   >,
 ) => {
   const [local, remote] = splitProps(props, ["label", "control"]);
+  const { t } = useLingui();
+  const { openModal } = useModals();
+
+  // track last accepted value so we can restore it if an invalid file is rejected
+  let lastAcceptedValue = local.control.value;
 
   return (
     <>
@@ -148,8 +159,23 @@ const FormFileInput = (
         {...remote}
         file={local.control.value}
         onFiles={(files) => {
-          // TODO: do validation of files here
-
+          if (files && remote.accept === "image/*") {
+            const file = files[0];
+            if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+              const formatList = ALLOWED_IMAGE_TYPE_LABELS.join(", ");
+              const error = new Error(
+                t`The file "${file.name}" has an unsupported format. Supported formats are: ${formatList}.`,
+              );
+              error.name = t`Unsupported file format`;
+              openModal({ type: "error2", error });
+              // FileInput resets to null before passing the new file for
+              // reactivity reasons, so restore the last accepted value
+              local.control.setValue(lastAcceptedValue);
+              return;
+            }
+          }
+
+          if (files) lastAcceptedValue = files;
           local.control.setValue(files);
           local.control.markDirty(true);
         }}