1 files changed, 14 insertions, 7 deletions
diff --git a/packages/web-util/src/forms/InputFile.tsx b/packages/web-util/src/forms/InputFile.tsx
index 6337d0902..6147eae59 100644
--- a/packages/web-util/src/forms/InputFile.tsx
+++ b/packages/web-util/src/forms/InputFile.tsx
@@ -2,6 +2,7 @@ import { Fragment, VNode, h } from "preact";
 import { UIFormProps } from "./FormProvider.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
+import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 export function InputFile<T extends object, K extends keyof T>(
   props: { maxBites: number; accept?: string } & UIFormProps<T, K>,
@@ -16,8 +17,12 @@ export function InputFile<T extends object, K extends keyof T>(
     maxBites,
     accept,
   } = props;
-  const { value, onChange, state } = useField<T, K>(name);
-  const help = propsHelp ?? state.help
+  //FIXME: remove deprecated
+  const fieldCtx = useField<T, K>(props.name);
+  const { value, onChange, state } =
+    props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name);
+
+  const help = propsHelp ?? state.help;
   if (state.hidden) {
     return <div />;
   }
@@ -43,7 +48,7 @@ export function InputFile<T extends object, K extends keyof T>(
                 clip-rule="evenodd"
               />
             </svg>
-            {!state.disabled &&
+            {!state.disabled && (
               <div class="my-2 flex text-sm leading-6 text-gray-600">
                 <label
                   for="file-upload"
@@ -71,14 +76,16 @@ export function InputFile<T extends object, K extends keyof T>(
                             "",
                           ),
                         );
-                        return onChange(`data:${f[0].type};base64,${b64}` as any);
+                        return onChange(
+                          `data:${f[0].type};base64,${b64}` as any,
+                        );
                       });
                     }}
                   />
                 </label>
                 {/* <p class="pl-1">or drag and drop</p> */}
               </div>
-            }
+            )}
           </div>
         </div>
       ) : (
@@ -88,7 +95,7 @@ export function InputFile<T extends object, K extends keyof T>(
             class=" h-24 w-full object-cover relative"
           />
 
-          {!state.disabled &&
+          {!state.disabled && (
             <div
               class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer "
               onClick={() => {
@@ -97,7 +104,7 @@ export function InputFile<T extends object, K extends keyof T>(
             >
               Clear
             </div>
-          }
+          )}
         </div>
       )}
       {help && <p class="text-xs leading-5 text-gray-600 mt-2">{help}</p>}