feat: reusable UploadImageButton component

framework/core/js/src/admin/components/AdminPage.tsx

@@ -12,6 +12,8 @@ import AdminHeader from './AdminHeader';
 import generateElementId from '../utils/generateElementId';
 import ColorPreviewInput from '../../common/components/ColorPreviewInput';
 import ItemList from '../../common/utils/ItemList';
+import type { IUploadImageButtonAttrs } from './UploadImageButton';
+import UploadImageButton from './UploadImageButton';
 
 export interface AdminHeaderOptions {
   title: Mithril.Children;
@@ -79,6 +81,7 @@ const BooleanSettingTypes = ['bool', 'checkbox', 'switch', 'boolean'] as const;
 const SelectSettingTypes = ['select', 'dropdown', 'selectdropdown'] as const;
 const TextareaSettingTypes = ['textarea'] as const;
 const ColorPreviewSettingType = 'color-preview' as const;
+const ImageUploadSettingType = 'image-upload' as const;
 
 /**
  * Valid options for the setting component builder to generate a Switch.
@@ -113,6 +116,10 @@ export interface ColorPreviewSettingComponentOptions extends CommonSettingsItemO
   type: typeof ColorPreviewSettingType;
 }
 
+export interface ImageUploadSettingComponentOptions extends CommonSettingsItemOptions, IUploadImageButtonAttrs {
+  type: typeof ImageUploadSettingType;
+}
+
 export interface CustomSettingComponentOptions extends CommonSettingsItemOptions {
   type: string;
   [key: string]: unknown;
@@ -127,6 +134,7 @@ export type SettingsComponentOptions =
   | SelectSettingComponentOptions
   | TextareaSettingComponentOptions
   | ColorPreviewSettingComponentOptions
+  | ImageUploadSettingComponentOptions
   | CustomSettingComponentOptions;
 
 /**
@@ -311,6 +319,10 @@ export default abstract class AdminPage<CustomAttrs extends IPageAttrs = IPageAt
           {...otherAttrs}
         />
       );
+    } else if (type === ImageUploadSettingType) {
+      const { value, ...otherAttrs } = componentAttrs;
+
+      settingElement = <UploadImageButton value={this.settings[setting]} {...otherAttrs} />;
     } else if (customSettingComponents.has(type)) {
       return customSettingComponents.get(type)({ setting, help, label, ...componentAttrs });
     } else {

framework/core/js/src/admin/components/AppearancePage.tsx

@@ -37,13 +37,13 @@ export default class AppearancePage extends AdminPage {
           <div className="Form-group">
             <label>{app.translator.trans('core.admin.appearance.logo_heading')}</label>
             <div className="helpText">{app.translator.trans('core.admin.appearance.logo_text')}</div>
-            <UploadImageButton name="logo" />
+            <UploadImageButton name="logo" routePath="logo" value={app.data.settings.logo_path} url={app.forum.attribute('logoUrl')} />
           </div>
 
           <div className="Form-group">
             <label>{app.translator.trans('core.admin.appearance.favicon_heading')}</label>
             <div className="helpText">{app.translator.trans('core.admin.appearance.favicon_text')}</div>
-            <UploadImageButton name="favicon" />
+            <UploadImageButton name="favicon" routePath="favicon" value={app.data.settings.favicon_path} url={app.forum.attribute('faviconUrl')} />
           </div>
 
           <div className="Form-group">

framework/core/js/src/admin/components/UploadImageButton.tsx

@@ -0,0 +1,110 @@
+import app from '../../admin/app';
+import Button from '../../common/components/Button';
+import type { IButtonAttrs } from '../../common/components/Button';
+import classList from '../../common/utils/classList';
+import type Mithril from 'mithril';
+import Component from '../../common/Component';
+
+export interface IUploadImageButtonAttrs extends IButtonAttrs {
+  name: string;
+  routePath: string;
+  value?: string | null | (() => string | null);
+  url?: string | null | (() => string | null);
+}
+
+export default class UploadImageButton<CustomAttrs extends IUploadImageButtonAttrs = IUploadImageButtonAttrs> extends Component<CustomAttrs> {
+  loading = false;
+
+  view(vnode: Mithril.Vnode<CustomAttrs, this>) {
+    let { name, value, url, ...attrs } = vnode.attrs as IButtonAttrs;
+
+    attrs.loading = this.loading;
+    attrs.className = classList(attrs.className, 'Button');
+
+    if (typeof value === 'function') {
+      value = value();
+    }
+
+    if (typeof url === 'function') {
+      url = url();
+    }
+
+    return (
+      <div className="UploadImageButton">
+        {value ? (
+          <>
+            <div className="UploadImageButton-image">
+              <img src={url} alt={name} />
+            </div>
+            <Button onclick={this.remove.bind(this)} {...attrs}>
+              {app.translator.trans('core.admin.upload_image.remove_button')}
+            </Button>
+          </>
+        ) : (
+          <Button onclick={this.upload.bind(this)} {...attrs}>
+            {app.translator.trans('core.admin.upload_image.upload_button')}
+          </Button>
+        )}
+      </div>
+    );
+  }
+
+  upload() {
+    if (this.loading) return;
+
+    const $input = $('<input type="file">');
+
+    $input
+      .appendTo('body')
+      .hide()
+      .trigger('click')
+      .on('change', (e) => {
+        const body = new FormData();
+        // @ts-ignore
+        body.append(this.attrs.name, $(e.target)[0].files[0]);
+
+        this.loading = true;
+        m.redraw();
+
+        app
+          .request({
+            method: 'POST',
+            url: this.resourceUrl(),
+            serialize: (raw) => raw,
+            body,
+          })
+          .then(this.success.bind(this), this.failure.bind(this));
+      });
+  }
+
+  remove() {
+    this.loading = true;
+    m.redraw();
+
+    app
+      .request({
+        method: 'DELETE',
+        url: this.resourceUrl(),
+      })
+      .then(this.success.bind(this), this.failure.bind(this));
+  }
+
+  resourceUrl() {
+    return app.forum.attribute('apiUrl') + '/' + this.attrs.routePath;
+  }
+
+  /**
+   * After a successful upload/removal, reload the page.
+   */
+  protected success(response: any) {
+    window.location.reload();
+  }
+
+  /**
+   * If upload/removal fails, stop loading.
+   */
+  protected failure(response: any) {
+    this.loading = false;
+    m.redraw();
+  }
+}