From 6a313b99e41590b01cc7b8f71b3b87e70a8a69c5 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 2 Feb 2026 18:02:47 +0200
Subject: [PATCH] fix(mobile/custom_note_actions): missing file upload

---
 .../src/widgets/react/FormFileUpload.tsx      | 25 ++++++++++++++++++-
 apps/client/src/widgets/react/FormList.tsx    |  2 +-
 .../src/widgets/ribbon/NoteActionsCustom.tsx  | 17 +++++++------
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/react/FormFileUpload.tsx b/apps/client/src/widgets/react/FormFileUpload.tsx
index e97e73184b..42d9c908eb 100644
--- a/apps/client/src/widgets/react/FormFileUpload.tsx
+++ b/apps/client/src/widgets/react/FormFileUpload.tsx
@@ -3,8 +3,9 @@ import { useEffect, useRef } from "preact/hooks";
 
 import ActionButton, { ActionButtonProps } from "./ActionButton";
 import Button, { ButtonProps } from "./Button";
+import { FormListItem, FormListItemOpts } from "./FormList";
 
-interface FormFileUploadProps {
+export interface FormFileUploadProps {
     name?: string;
     onChange: (files: FileList | null) => void;
     multiple?: boolean;
@@ -75,3 +76,25 @@ export function FormFileUploadActionButton({ onChange, ...buttonProps }: Omit<Ac
         </>
     );
 }
+
+/**
+ * Similar to {@link FormFileUploadButton}, but uses an {@link FormListItem} instead of a normal {@link Button}.
+ * @param param the change listener for the file upload and the properties for the button.
+ */
+export function FormFileUploadFormListItem({ onChange, children, ...buttonProps }: Omit<FormListItemOpts, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <>
+            <FormListItem
+                {...buttonProps}
+                onClick={() => inputRef.current?.click()}
+            >{children}</FormListItem>
+            <FormFileUpload
+                inputRef={inputRef}
+                hidden
+                onChange={onChange}
+            />
+        </>
+    );
+}
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index 6e4b81f33a..fdfdfb3167 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -78,7 +78,7 @@ export interface FormListBadge {
     text: string;
 }
 
-interface FormListItemOpts {
+export interface FormListItemOpts {
     children: ComponentChildren;
     icon?: string;
     value?: string;
diff --git a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
index 3a64e8c9c5..8ce9592406 100644
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -13,6 +13,7 @@ import { isMobile, openInAppHelpFromUrl } from "../../services/utils";
 import { ViewTypeOptions } from "../collections/interface";
 import { buildSaveSqlToNoteHandler } from "../FloatingButtonsDefinitions";
 import ActionButton, { ActionButtonProps } from "../react/ActionButton";
+import { FormFileUploadActionButton, FormFileUploadFormListItem, FormFileUploadProps } from "../react/FormFileUpload";
 import { FormListItem } from "../react/FormList";
 import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
 import { ParentComponent } from "../react/react_utils";
@@ -265,13 +266,15 @@ const cachedIsMobile = isMobile();
 function NoteAction({ text, ...props }: Pick<ActionButtonProps, "text" | "icon" | "disabled" | "triggerCommand"> & {
     onClick?: ((e: MouseEvent) => void) | undefined;
 }) {
-    if (cachedIsMobile) {
-        return <FormListItem {...props}>{text}</FormListItem>;
-    }
-    return <ActionButton text={text} {...props} />;
-
+    return (cachedIsMobile
+        ? <FormListItem {...props}>{text}</FormListItem>
+        : <ActionButton text={text} {...props} />
+    );
 }
 
-function NoteActionWithFileUpload() {
-    return "Not implemented.";
+function NoteActionWithFileUpload({ text, ...props }: Pick<ActionButtonProps, "text" | "icon" | "disabled" | "triggerCommand"> & Pick<FormFileUploadProps, "onChange">) {
+    return (cachedIsMobile
+        ? <FormFileUploadFormListItem {...props}>{text}</FormFileUploadFormListItem>
+        : <FormFileUploadActionButton text={text} {...props} />
+    );
 }