refactor(react/ribbon): dedicated component for file upload

apps/client/src/widgets/react/Button.tsx

@@ -4,7 +4,7 @@ import { useRef, useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
 import { CommandNames } from "../../components/app_context";
 
-interface ButtonProps {
+export interface ButtonProps {
     name?: string;
     /** Reference to the button element. Mostly useful for requesting focus. */
     buttonRef?: RefObject<HTMLButtonElement>;

apps/client/src/widgets/react/FormFileUpload.tsx

@@ -1,4 +1,6 @@
 import { Ref } from "preact";
+import Button, { ButtonProps } from "./Button";
+import { useRef } from "preact/hooks";
 
 interface FormFileUploadProps {
     name?: string;
@@ -20,4 +22,27 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid
                 onChange={e => onChange((e.target as HTMLInputElement).files)} />
         </label>
     )
+}
+
+/**
+ * Combination of a button with a hidden file upload field.
+ * 
+ * @param param the change listener for the file upload and the properties for the button.
+ */
+export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonProps, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <>
+            <Button
+                {...buttonProps}
+                onClick={() => inputRef.current?.click()}
+            />
+            <FormFileUpload
+                inputRef={inputRef} 
+                hidden
+                onChange={onChange}
+            />
+        </>
+    )
 }