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}
+            />
+        </>
+    )
 }

apps/client/src/widgets/ribbon/FilePropertiesTab.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { formatSize } from "../../services/utils";
-import FormFileUpload from "../react/FormFileUpload";
+import FormFileUpload, { FormFileUploadButton } from "../react/FormFileUpload";
 import { useNoteLabel, useTriliumEventBeta } from "../react/hooks";
 import { TabContext } from "./ribbon-interface";
 import FBlob from "../../entities/fblob";
@@ -15,7 +15,6 @@ export default function FilePropertiesTab({ note }: TabContext) {
     const [ originalFileName ] = useNoteLabel(note, "originalFileName");
     const [ blob, setBlob ] = useState<FBlob | null>();
     const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
-    const inputRef = useRef<HTMLInputElement>(null);
 
     function refresh() {
         note?.getBlob().then(setBlob);
@@ -63,16 +62,10 @@ export default function FilePropertiesTab({ note }: TabContext) {
                                     onClick={() => openNoteExternally(note.noteId, note.mime)}
                                 />
 
-                                <Button
+                                <FormFileUploadButton
                                     icon="bx bx-folder-open"
                                     text={t("file_properties.upload_new_revision")}
-                                    disabled={!canAccessProtectedNote}
-                                    onClick={() => inputRef.current?.click()}
-                                />
-
-                                <FormFileUpload
-                                    inputRef={inputRef}
-                                    hidden
+                                    disabled={!canAccessProtectedNote}                                    
                                     onChange={(fileToUpload) => {
                                         if (!fileToUpload) {
                                             return;