From f35c5726e10b00d3be7dcb098a8a6d63697a2299 Mon Sep 17 00:00:00 2001 From: xinyun Date: Thu, 19 Mar 2026 17:37:11 +0800 Subject: [PATCH] [CCUBE-2080][XY] Expose customLabels for FileUpload --- src/components/fields/file-upload/file-upload.tsx | 6 ++++-- src/components/fields/file-upload/types.ts | 4 ++++ src/stories/3-fields/file-upload/file-upload.stories.tsx | 8 ++++++++ 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/components/fields/file-upload/file-upload.tsx b/src/components/fields/file-upload/file-upload.tsx index c5872de55..326ab62c1 100644 --- a/src/components/fields/file-upload/file-upload.tsx +++ b/src/components/fields/file-upload/file-upload.tsx @@ -1,9 +1,8 @@ -import { FileUpload as DSFileUpload, FileItemProps } from "@lifesg/react-design-system/file-upload"; +import { FileItemProps, FileUpload as DSFileUpload } from "@lifesg/react-design-system/file-upload"; import xor from "lodash/xor"; import { Suspense, lazy, useCallback, useContext, useEffect, useRef, useState } from "react"; import { useFormContext } from "react-hook-form"; import * as Yup from "yup"; -import { IGenericFieldProps } from ".."; import { FileHelper } from "../../../utils"; import { useFieldEvent, useValidationConfig } from "../../../utils/hooks"; import { IYupValidationRule } from "../../frontend-engine"; @@ -18,6 +17,7 @@ import { IFileUploadValue, TFileUploadErrorObject, } from "./types"; +import { IGenericFieldProps } from "../types"; // lazy load to fix next.js SSR errors const FileUploadManager = lazy(() => import("./file-upload-manager")); @@ -40,6 +40,7 @@ export const FileUploadInner = (props: IGenericFieldProps) => uploadOnAddingFile, validation, warning: schemaWarning, + customLabels, ...otherSchema }, warning, @@ -338,6 +339,7 @@ export const FileUploadInner = (props: IGenericFieldProps) => onDelete={handleDelete} title={renderHtmlText(label)} warning={renderHtmlText(warning || schemaWarning)} + customLabels={customLabels} /> ); diff --git a/src/components/fields/file-upload/types.ts b/src/components/fields/file-upload/types.ts index d5cb97e49..d7174598f 100644 --- a/src/components/fields/file-upload/types.ts +++ b/src/components/fields/file-upload/types.ts @@ -24,6 +24,7 @@ export interface IFileUploadSchema className?: string | undefined; description?: string | undefined; label: string; + customLabels?: TFileUploadCustomLabels | undefined; hideThumbnail?: boolean | undefined; uploadOnAddingFile: { type: TUploadType; @@ -86,6 +87,9 @@ export type TUploadErrorDetail = { errorData: unknown; }; +// Custom labels type for FileUpload +export type TFileUploadCustomLabels = FileUploadProps extends { customLabels?: infer T } ? T : never; + // ============================================================================= // EVENTS (fired from FEE) // ============================================================================= diff --git a/src/stories/3-fields/file-upload/file-upload.stories.tsx b/src/stories/3-fields/file-upload/file-upload.stories.tsx index cd50fdf6f..f0b75ad4a 100644 --- a/src/stories/3-fields/file-upload/file-upload.stories.tsx +++ b/src/stories/3-fields/file-upload/file-upload.stories.tsx @@ -40,6 +40,14 @@ const meta: Meta = { }, }, }, + customLabels: { + description: "Specify custom label text for some elements", + table: { + type: { + summary: "{ uploadButtonLabel?: string }", + }, + }, + }, capture: { description: "Whether to allow image to be taken by device and which camera to do so. Based on HTML capture attribute, for more info, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#capture",