Updated global file upload component in AdminX

refs. https://github.com/TryGhost/Team/issues/3318

ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.stories.tsx

@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import FileUpload from './FileUpload';
 
 const meta = {
-    title: 'Global / Basic File Upload',
+    title: 'Global / File Upload',
     component: FileUpload,
     tags: ['autodocs']
 } satisfies Meta<typeof FileUpload>;
@@ -12,5 +12,15 @@ export default meta;
 type Story = StoryObj<typeof FileUpload>;
 
 export const Default: Story = {
-    args: {}
+    args: {
+        id: 'test-file',
+        onUpload: (file: File) => {
+            alert(`You're uploading: ${file.name}`);
+        },
+        children: (
+            <div className='max-w-xl cursor-pointer bg-grey-100 px-10 py-5 text-center'>
+                Click here to upload
+            </div>
+        )
+    }
 };

ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.tsx

@@ -1,12 +1,17 @@
-import Button from './Button';
-import React from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {ChangeEvent, useState} from 'react';
 
 export interface FileUploadProps {
+    id: string;
+
+    /**
+     * Can be any component that has no default onClick eventh handline. E.g. buttons and links won't work
+     */
+    children?: React.ReactNode;
     onUpload: (file: File) => void;
 }
 
-const FileUpload: React.FC<FileUploadProps> = ({onUpload}) => {
+const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, ...props}) => {
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -15,22 +20,21 @@ const FileUpload: React.FC<FileUploadProps> = ({onUpload}) => {
         }
     };
 
-    const handleFileUpload = () => {
+    const handleFileUpload = useCallback(() => {
         if (selectedFile) {
             onUpload?.(selectedFile);
         }
-    };
+    }, [onUpload, selectedFile]);
+
+    useEffect(() => {
+        handleFileUpload();
+    }, [handleFileUpload]);
 
     return (
-        <div>
-            <input type="file" onChange={handleFileChange} />
-            <Button
-                className='mt-2'
-                color='green'
-                label='Upload'
-                onClick={handleFileUpload}
-            />
-        </div>
+        <label htmlFor={id} {...props}>
+            <input id={id} type="file" hidden onChange={handleFileChange} />
+            {children}
+        </label>
     );
 };