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

When a user selects an image file whose MIME type is not in the
allowed list (JPEG, PNG, GIF, WebP), the file is now rejected and
an error modal is shown instead of silently accepting it. This
prevents formats like AVIF from being uploaded when the backend
does not support them.

Signed-off-by: Dan <contact@danmyers.net>

Author: DanMyers300

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/ui/components/utils/Form2.tsx

@@ -9,11 +9,14 @@ import {
   splitProps,
 } 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_TYPES } from "../../../state/stores/Draft";
+
 import { Button, Checkbox, Radio2, Text, TextField } from "../design";
 import { TextEditor2 } from "../features/texteditor/TextEditor2";
 
@@ -138,6 +141,8 @@ const FormFileInput = (
   >,
 ) => {
   const [local, remote] = splitProps(props, ["label", "control"]);
+  const { t } = useLingui();
+  const { openModal } = useModals();
 
   return (
     <>
@@ -148,7 +153,17 @@ 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 error = new Error(
+                t`The file "${file.name}" has an unsupported format.`,
+              );
+              error.name = t`Unsupported file format`;
+              openModal({ type: "error2", error });
+              return;
+            }
+          }
 
           local.control.setValue(files);
           local.control.markDirty(true);