@nocobase/client-v2 2.3.0-beta.5 → 2.4.0-alpha.1

package/src/acl/ACLProvider.tsx

@@ -13,6 +13,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState, t
 import { useLocation } from 'react-router-dom';
 import { writeFlowSettingsPreference } from '../flow/admin-shell/admin-layout/flowSettingsPreference';
 import { useApp } from '../hooks/useApp';
+import { getACLCheckReady, setACLCheckReady } from './aclCheckReadiness';
 import { createAclSnippetAllow } from './createAclSnippetAllow';
 
 export type ACLRoleData = {
@@ -85,16 +86,23 @@ export const ACLRolesCheckProvider: FC = ({ children }) => {
   const location = useLocation();
   const aclStore = ensureACLStore(app);
   const [loading, setLoading] = useState(false);
+  const refreshGenerationRef = useRef(0);
+  const lastSuccessfulCheckRef = useRef(getACLCheckReady(app));
   const pathnameRef = useRef(location.pathname);
   pathnameRef.current = location.pathname;
 
   const refresh = useCallback(async () => {
     if (app.router.isSkippedAuthCheckRoute(pathnameRef.current)) {
       // 认证页等免鉴权路由不需要执行 `roles:check`，避免未登录时产生多余的 401 与 loading 闪烁。
+      refreshGenerationRef.current += 1;
+      lastSuccessfulCheckRef.current = false;
+      setACLCheckReady(app, false);
       setLoading(false);
       return;
     }
 
+    const refreshGeneration = ++refreshGenerationRef.current;
+    setACLCheckReady(app, false);
     const shouldShowLoading = !aclStore.data?.role && !aclStore.data?.snippets?.length;
     if (shouldShowLoading) {
       setLoading(true);
@@ -110,6 +118,10 @@ export const ACLRolesCheckProvider: FC = ({ children }) => {
       const nextData = res?.data?.data || {};
       const nextMeta = res?.data?.meta || {};
 
+      if (refreshGeneration !== refreshGenerationRef.current) {
+        return;
+      }
+
       aclStore.setData(nextData);
       aclStore.setMeta(nextMeta);
       app.pluginSettingsManager.setAclSnippets(nextData?.snippets || []);
@@ -118,14 +130,22 @@ export const ACLRolesCheckProvider: FC = ({ children }) => {
         app.apiClient.auth.setRole(nextData?.role);
       }
 
+      lastSuccessfulCheckRef.current = true;
+      setACLCheckReady(app, true);
+
       if (!createAclSnippetAllow(nextData?.snippets || [], !!nextData?.allowAll)('ui.*')) {
         writeFlowSettingsPreference(false);
         await app.flowEngine.flowSettings.disable();
       }
     } catch (error) {
+      if (refreshGeneration !== refreshGenerationRef.current) {
+        return;
+      }
+
       const status = error?.response?.status || error?.status;
 
       if (status === 401) {
+        lastSuccessfulCheckRef.current = false;
         aclStore.setData({});
         aclStore.setMeta({});
         app.pluginSettingsManager.setAclSnippets([]);
@@ -133,15 +153,24 @@ export const ACLRolesCheckProvider: FC = ({ children }) => {
         return;
       }
 
+      setACLCheckReady(app, lastSuccessfulCheckRef.current);
       console.error(error);
     } finally {
-      setLoading(false);
+      if (refreshGeneration === refreshGenerationRef.current) {
+        setLoading(false);
+      }
     }
   }, [aclStore, app]);
 
   useEffect(() => {
-    void refresh();
-  }, [refresh]);
+    refresh();
+
+    return () => {
+      refreshGenerationRef.current += 1;
+      lastSuccessfulCheckRef.current = false;
+      setACLCheckReady(app, false);
+    };
+  }, [app, refresh]);
 
   const value = useMemo<ACLContextValue>(
     () => ({
@@ -169,6 +198,27 @@ export const useACLContext = () => {
   return useContext(ACLContext);
 };
 
+/**
+ * 读取当前角色的 snippets，且不要求调用方位于 `ACLRolesCheckProvider` 之内。
+ *
+ * 设置中心顶栏导航挂在 app 级 provider 上，位置比 `ACLRolesCheckProvider` 更外层，
+ * 这种情况下退回到 app context 上的 ACL observable store。
+ * 调用方需要用 `observer` 包裹，store 更新后才会重新渲染。
+ *
+ * @returns {string[]} 当前角色的 snippets
+ */
+export const useACLSnippets = (): string[] => {
+  const app = useApp();
+  const ctx = useACLContext();
+  const contextSnippets = ctx?.data?.data?.snippets;
+  // 必须走 ensureACLStore：调用方可能位于 `ACLRolesCheckProvider` 之外，此时 store 还没建，
+  // 直接读 `app.context.acl` 拿到的是 undefined，observer 就订阅不到后续的权限写入，
+  // 会一直停在首帧的空 snippets 上。
+  const storeSnippets = ensureACLStore(app)?.data?.snippets;
+
+  return contextSnippets?.length ? contextSnippets : storeSnippets || [];
+};
+
 /**
  * 触发当前角色权限重新检查。
  */

package/src/acl/aclCheckReadiness.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useEffect, useState } from 'react';
+
+type ReadinessListener = (ready: boolean) => void;
+
+const readinessByApp = new WeakMap<object, boolean>();
+const listenersByApp = new WeakMap<object, Set<ReadinessListener>>();
+
+export function getACLCheckReady(app: object) {
+  return readinessByApp.get(app) ?? false;
+}
+
+export function setACLCheckReady(app: object, ready: boolean) {
+  readinessByApp.set(app, ready);
+  listenersByApp.get(app)?.forEach((listener) => listener(ready));
+}
+
+export function useACLCheckReady(app: object) {
+  const [ready, setReady] = useState(() => getACLCheckReady(app));
+
+  useEffect(() => {
+    const listeners = listenersByApp.get(app) || new Set<ReadinessListener>();
+    listeners.add(setReady);
+    listenersByApp.set(app, listeners);
+    setReady(getACLCheckReady(app));
+
+    return () => {
+      listeners.delete(setReady);
+      if (!listeners.size) {
+        listenersByApp.delete(app);
+      }
+    };
+  }, [app]);
+
+  return ready;
+}

package/src/authRedirect.ts

@@ -8,8 +8,19 @@
  */
 
 import type { BaseApplication } from './BaseApplication';
+import {
+  resolveSettingsAppScope,
+  resolveSettingsAppScopeWithinPublicPath,
+  resolveSettingsDocumentPath,
+  type SettingsAppScope,
+} from './settings-app/settingsDocumentPath';
 
 type AppLike = Pick<BaseApplication<any>, 'getPublicPath'> & {
+  name?: string;
+  pluginSettingsManager?: {
+    getRouteName?: (name: string) => string;
+    getRoutePath?: (name: string) => string;
+  };
   router?: {
     getBasename?: () => string | undefined;
   };
@@ -52,7 +63,8 @@ function normalizePublicPath(value?: string) {
 }
 
 function normalizePathname(value?: string) {
-  const normalized = ensureLeadingSlash(String(value || '/').trim() || '/').replace(/\/{2,}/g, '/');
+  const pathname = ensureLeadingSlash(String(value || '/').trim() || '/');
+  const normalized = new URL(pathname, 'http://nocobase.local').pathname.replace(/\/{2,}/g, '/');
   if (normalized !== '/' && normalized.endsWith('/')) {
     return trimTrailingSlashes(normalized);
   }
@@ -179,7 +191,53 @@ function joinRootRelativePath(basePath: string, pathname: string) {
   return normalizePathname(`/${trimLeadingSlashes(normalizedBasePath)}/${trimLeadingSlashes(normalizedPathname)}`);
 }
 
+function isStandaloneSettingsApp(app: AppLike) {
+  return app.pluginSettingsManager?.getRouteName?.('') === 'settings.';
+}
+
+function getSettingsRootPublicPath(app: AppLike) {
+  const publicPath = normalizePublicPath(app.getPublicPath());
+  if (isStandaloneSettingsApp(app)) {
+    return publicPath;
+  }
+
+  const segments = trimTrailingSlashes(publicPath).split('/');
+  segments.pop();
+  return normalizePublicPath(segments.join('/') || '/');
+}
+
+function getSettingsAppScope(app: AppLike): SettingsAppScope {
+  const publicPath = app.getPublicPath();
+  return (
+    resolveSettingsAppScopeWithinPublicPath(publicPath, app.router?.getBasename?.()) ||
+    (app.name && app.name !== 'main' ? resolveSettingsAppScope(`/apps/${app.name}`) : '')
+  );
+}
+
+function getStandaloneSettingsBasePath(app: AppLike) {
+  return resolveSettingsDocumentPath(getSettingsRootPublicPath(app), getSettingsAppScope(app), '/settings');
+}
+
+function isStandaloneSettingsTarget(app: AppLike, pathname: string) {
+  const normalizedPathname = normalizePathname(pathname);
+  const settingsBasePath = normalizePathname(getStandaloneSettingsBasePath(app));
+  return normalizedPathname === settingsBasePath || normalizedPathname.startsWith(`${settingsBasePath}/`);
+}
+
+function isSettingsTargetForAnotherApp(app: AppLike, pathname: string) {
+  const normalizedPathname = normalizePathname(pathname);
+  const rootPublicPath = trimTrailingSlashes(getSettingsRootPublicPath(app)) || '';
+  const pathWithinRoot =
+    rootPublicPath && normalizedPathname.startsWith(`${rootPublicPath}/`)
+      ? normalizedPathname.slice(rootPublicPath.length)
+      : normalizedPathname;
+  return /^\/settings(?:\/|$)/.test(pathWithinRoot);
+}
+
 function getV2SigninPath(app: AppLike) {
+  if (isStandaloneSettingsApp(app)) {
+    return joinRootRelativePath(getStandaloneSettingsBasePath(app), '/signin');
+  }
   return joinRootRelativePath(getV2EffectiveBasePath(app), '/signin');
 }
 
@@ -204,7 +262,7 @@ function getDefaultV2AdminRedirectPath(app: AppLike) {
   return joinRootRelativePath(getV2EffectiveBasePath(app), '/admin');
 }
 
-function isSafeRootRelativePath(value?: string | null) {
+function isSafeRootRelativePath(value?: string | null): value is string {
   return !!value && value.startsWith('/') && !value.startsWith('//') && !value.startsWith('/\\');
 }
 
@@ -224,6 +282,10 @@ export function normalizeV2RedirectPath(app: AppLike, target?: string | null, fa
   let { pathname, search, hash } = splitPathLike(rawTarget);
   let normalizedPathname = normalizePathname(pathname);
 
+  if (isStandaloneSettingsTarget(app, normalizedPathname)) {
+    return `${preserveTrailingSlash(pathname, normalizedPathname)}${normalizeSearch(search)}${normalizeHash(hash)}`;
+  }
+
   // Already under the current v2 runtime, e.g. `/v/apps/a/admin/`.
   if (basePath === '/' || normalizedPathname === basePath || normalizedPathname.startsWith(`${basePath}/`)) {
     return `${preserveTrailingSlash(pathname, normalizedPathname)}${normalizeSearch(search)}${normalizeHash(hash)}`;
@@ -237,6 +299,11 @@ export function normalizeV2RedirectPath(app: AppLike, target?: string | null, fa
     normalizedPathname = normalizePathname(pathname);
   }
 
+  if (isSettingsTargetForAnotherApp(app, normalizedPathname)) {
+    ({ pathname, search, hash } = splitPathLike(fallbackTarget));
+    normalizedPathname = normalizePathname(pathname);
+  }
+
   // Basename-relative target, e.g. `/admin/`, becomes `/v/apps/a/admin/`.
   const joinedPathname = preserveTrailingSlash(pathname, joinRootRelativePath(basePath, normalizedPathname));
   return `${joinedPathname}${normalizeSearch(search)}${normalizeHash(hash)}`;
@@ -261,10 +328,14 @@ export function getCurrentV2RedirectPath(app: AppLike, locationLike: LocationLik
  *
  * @param app 当前 v2 应用实例
  * @param targetPath 登录后回跳地址
+ * @param options 可选的登录路由配置
  * @returns 指向 v2 登录页的 href
  */
-export function buildV2SigninHref(app: AppLike, targetPath: string) {
-  return `${getV2SigninPath(app)}?redirect=${encodeURIComponent(targetPath)}`;
+export function buildV2SigninHref(app: AppLike, targetPath: string, options?: { signInRoutePath?: string }) {
+  const signInPath = options?.signInRoutePath
+    ? normalizeV2RedirectPath(app, options.signInRoutePath, options.signInRoutePath)
+    : getV2SigninPath(app);
+  return `${signInPath}?redirect=${encodeURIComponent(targetPath)}`;
 }
 
 /**
@@ -272,10 +343,14 @@ export function buildV2SigninHref(app: AppLike, targetPath: string) {
  *
  * @param app 当前 v2 应用实例
  * @param targetPath 登录后回跳地址
- * @param options 跳转选项
+ * @param options 跳转和登录路由选项
  */
-export function redirectToV2Signin(app: AppLike, targetPath: string, options?: { replace?: boolean }) {
-  const href = buildV2SigninHref(app, targetPath);
+export function redirectToV2Signin(
+  app: AppLike,
+  targetPath: string,
+  options?: { replace?: boolean; signInRoutePath?: string },
+) {
+  const href = buildV2SigninHref(app, targetPath, options);
   if (options?.replace === false) {
     window.location.href = href;
     return;
@@ -306,7 +381,9 @@ export function resolveV2SigninRedirect(value: string | undefined | null, app: A
     return null;
   }
 
-  const validPathnames = new Set(['/signin', getV2SigninPath(app)]);
+  const validPathnames = new Set(
+    isStandaloneSettingsApp(app) ? [getV2SigninPath(app)] : ['/signin', getV2SigninPath(app)],
+  );
   if (!validPathnames.has(url.pathname)) {
     return null;
   }

package/src/components/AppComponents.tsx

@@ -28,9 +28,11 @@ interface AppErrorPayload {
       maintainingDialog?: string;
     };
   };
-  [key: string]: any;
 }
 
+const isAppCommanding = (error?: AppErrorPayload) => error?.code === 'APP_COMMANDING';
+const isAppUpgrading = (error?: AppErrorPayload) => isAppCommanding(error) && error?.command?.name === 'upgrade';
+
 export const AppSpin = () => {
   return (
     <Spin style={{ position: 'fixed', top: '50%', left: '50%', fontSize: 72, transform: 'translate(-50%, -50%)' }} />
@@ -168,6 +170,7 @@ const getProps = (app: Application) => {
 export const AppError: FC<{ error: Error & { title?: string }; app: Application }> = observer(
   ({ app, error }) => {
     const props = getProps(app);
+    const commanding = isAppCommanding(app.error as AppErrorPayload | undefined);
     return (
       <div>
         <Result
@@ -180,11 +183,13 @@ export const AppError: FC<{ error: Error & { title?: string }; app: Application
           status="error"
           title={error?.title || app.i18n.t('App error', { ns: 'client' })}
           subTitle={app.i18n.t(error?.message)}
-          extra={[
-            <Button type="primary" key="try" onClick={() => window.location.reload()}>
-              {app.i18n.t('Try again')}
-            </Button>,
-          ]}
+          extra={
+            commanding ? null : (
+              <Button type="primary" key="try" onClick={() => window.location.reload()}>
+                {app.i18n.t('Try again')}
+              </Button>
+            )
+          }
           {...props}
         />
       </div>
@@ -223,10 +228,14 @@ export const AppMaintaining: FC<{ app: Application; error: Error }> = observer(
 
 export const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(
   ({ app, error }) => {
-    const component = (error as AppErrorPayload | undefined)?.command?.components?.maintainingDialog;
+    const payload = error as AppErrorPayload | undefined;
+    const component = payload?.command?.components?.maintainingDialog;
     if (component) {
       return app.renderComponent(component, { app, error });
     }
+    if (isAppUpgrading(payload)) {
+      return null;
+    }
 
     const { icon, status, title, subTitle } = getProps(app);
     return (

package/src/components/AttachmentUpload.tsx

@@ -0,0 +1,275 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { css, cx } from '@emotion/css';
+import { Upload, message } from 'antd';
+import type { UploadFile } from 'antd';
+import mime from 'mime';
+import match from 'mime-match';
+import type { RcFile, UploadRequestOption } from 'rc-upload/lib/interface';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useApp } from '../hooks/useApp';
+
+export type UploadedAttachment = {
+  id?: number;
+  title?: string;
+  filename?: string;
+  url?: string;
+};
+
+export type AttachmentStorageRules = {
+  size?: number;
+  mimetype?: string | string[];
+};
+
+/**
+ * 读取默认附件存储的上传限制。
+ *
+ * 校验交给存储自身的配置（大小、mimetype），而不是在每个调用点各写一套硬编码规则。
+ *
+ * @returns {AttachmentStorageRules | null} 存储规则，取不到时为 null
+ */
+export function useAttachmentStorageRules() {
+  const app = useApp();
+  const [storageRules, setStorageRules] = useState<AttachmentStorageRules | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const loadStorageRules = async () => {
+      try {
+        const attachmentsCollection = app.dataSourceManager?.getCollection?.('main', 'attachments');
+        const storageName = attachmentsCollection?.getOption?.('storage');
+
+        if (!storageName) {
+          if (mounted) {
+            setStorageRules(null);
+          }
+          return;
+        }
+
+        const response = await app.apiClient.request({
+          url: `storages:getBasicInfo/${storageName}`,
+          skipNotify: true,
+        });
+
+        if (mounted) {
+          setStorageRules(response?.data?.data?.rules || null);
+        }
+      } catch (error) {
+        if (mounted) {
+          setStorageRules(null);
+        }
+      }
+    };
+
+    loadStorageRules().catch(() => {
+      if (mounted) {
+        setStorageRules(null);
+      }
+    });
+
+    return () => {
+      mounted = false;
+    };
+  }, [app]);
+
+  return storageRules;
+}
+
+export type AttachmentUploadProps = {
+  value?: UploadedAttachment | null;
+  onChange?: (value: UploadedAttachment | null) => void;
+  /** 卡片尺寸；`fit` 对应 CSS object-fit */
+  preview?: {
+    width?: number;
+    height?: number;
+    fit?: 'contain' | 'cover';
+  };
+  /** 在存储规则之外再收窄可选文件类型，例如只收图片 */
+  accept?: string;
+  /** 上传卡片里 `+` 下方的文字 */
+  uploadText?: string;
+  disabled?: boolean;
+};
+
+const DEFAULT_PREVIEW = { width: 104, height: 104, fit: 'contain' as const };
+
+/**
+ * 附件上传控件。
+ *
+ * 受控组件，值就是 `attachments:create` 返回的附件对象，可直接挂在 `Form.Item` 上。
+ * 外观沿用附件字段的原生形态：一张 picture-card，删除在卡片自身的悬浮操作里，不额外摆按钮。
+ * 上传前按默认存储的规则校验大小与 mimetype，与业务表单里的附件字段保持同一套限制。
+ */
+export const AttachmentUpload: React.FC<AttachmentUploadProps> = (props) => {
+  const { value, onChange, preview, accept, uploadText, disabled } = props;
+  const app = useApp();
+  const { t } = useTranslation();
+  const [uploading, setUploading] = useState(false);
+  const storageRules = useAttachmentStorageRules();
+  const previewConfig = { ...DEFAULT_PREVIEW, ...preview };
+
+  const acceptValue = useMemo(() => {
+    if (accept) {
+      return accept;
+    }
+    const rule = storageRules?.mimetype;
+    if (!rule) {
+      return undefined;
+    }
+    return Array.isArray(rule) ? rule.join(',') : rule;
+  }, [accept, storageRules?.mimetype]);
+
+  const beforeUpload = useCallback(
+    async (file: RcFile) => {
+      const sizeLimit = storageRules?.size;
+
+      if (typeof sizeLimit === 'number' && sizeLimit > 0 && file.size > sizeLimit) {
+        message.error(t('File size exceeds the limit'));
+        return Upload.LIST_IGNORE;
+      }
+
+      const mimetypeRule = storageRules?.mimetype;
+      const normalizedRule = Array.isArray(mimetypeRule)
+        ? mimetypeRule.join(',').trim()
+        : `${mimetypeRule || ''}`.trim();
+      const acceptRule = accept?.trim();
+      const rules = [normalizedRule, acceptRule].filter((rule) => rule && rule !== '*');
+
+      if (!rules.length) {
+        return file;
+      }
+
+      // 有些浏览器对不常见扩展名给不出 type，这里按扩展名补一次再判断。
+      let targetFile = file;
+      if (!targetFile.type) {
+        const extname = targetFile.name?.match(/\.[^.]+$/)?.[0];
+        if (extname) {
+          targetFile = new File([targetFile], targetFile.name, {
+            type: mime.getType(extname) || 'application/octet-stream',
+            lastModified: targetFile.lastModified,
+          }) as RcFile;
+        }
+      }
+
+      const isAllowed = rules.every((rule) =>
+        rule
+          .split(',')
+          .filter(Boolean)
+          .some((item) => match(targetFile.type)(item.trim())),
+      );
+
+      if (!isAllowed) {
+        message.error(t('File type is not allowed'));
+        return Upload.LIST_IGNORE;
+      }
+
+      return targetFile;
+    },
+    [accept, storageRules?.mimetype, storageRules?.size, t],
+  );
+
+  const handleUpload = useCallback(
+    async (options: UploadRequestOption) => {
+      const { file, onError, onSuccess } = options;
+      setUploading(true);
+
+      try {
+        const formData = new FormData();
+        formData.append('file', file as RcFile);
+
+        const response = await app.apiClient.request({
+          url: 'attachments:create',
+          method: 'post',
+          data: formData,
+        });
+
+        onChange?.(response?.data?.data || null);
+        onSuccess?.(response?.data, file as RcFile);
+      } catch (error) {
+        onError?.(error as Error);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [app.apiClient, onChange],
+  );
+
+  const fileList = useMemo<UploadFile[]>(() => {
+    if (!value?.url) {
+      return [];
+    }
+
+    return [
+      {
+        uid: `${value.id ?? value.url}`,
+        name: value.title || value.filename || '',
+        status: 'done',
+        url: value.url,
+        thumbUrl: value.url,
+      },
+    ];
+  }, [value?.filename, value?.id, value?.title, value?.url]);
+
+  const handlePreview = useCallback((file: UploadFile) => {
+    if (file.url) {
+      window.open(file.url, '_blank', 'noopener,noreferrer');
+    }
+  }, []);
+
+  const handleRemove = useCallback(() => {
+    onChange?.(null);
+    return true;
+  }, [onChange]);
+
+  // picture-card 的卡片尺寸写死在 104×104，这里按调用方要的比例覆盖掉。
+  const sizeClassName = useMemo(
+    () => css`
+      .ant-upload.ant-upload-select,
+      .ant-upload-list-item-container {
+        width: ${previewConfig.width}px !important;
+        height: ${previewConfig.height}px !important;
+      }
+
+      .ant-upload-list-item-thumbnail img {
+        object-fit: ${previewConfig.fit} !important;
+      }
+    `,
+    [previewConfig.fit, previewConfig.height, previewConfig.width],
+  );
+
+  return (
+    <Upload
+      accept={acceptValue}
+      beforeUpload={beforeUpload}
+      className={cx('nb-attachment-upload', sizeClassName)}
+      customRequest={handleUpload}
+      // 上传期间一并禁用：否则可以在第一个请求返回前再选一个文件，
+      // 两个请求谁后返回谁覆盖 onChange，最终留下的不一定是用户最后选的那张。
+      disabled={disabled || uploading}
+      fileList={fileList}
+      listType="picture-card"
+      maxCount={1}
+      onPreview={handlePreview}
+      onRemove={handleRemove}
+    >
+      {fileList.length ? null : (
+        <div>
+          {uploading ? <LoadingOutlined /> : <PlusOutlined />}
+          <div style={{ marginTop: 8 }}>{uploadText || t('Upload')}</div>
+        </div>
+      )}
+    </Upload>
+  );
+};
+
+export default AttachmentUpload;

package/src/components/index.ts

@@ -8,6 +8,7 @@
  */
 
 export * from './AppComponents';
+export * from './AttachmentUpload';
 export * from './BlankComponent';
 export * from './category-tabs';
 export * from './form/table/dnd';