Upload Image Component Is Not Support many language

[chenyong0923]

`typescript
import React, { useMemo, useRef } from 'react';
import { Form, InputGroup } from 'react-bootstrap';
import type { FC } from 'react';
import { useTranslation } from 'react-i18next';

interface CustomFileInputProps {
value: string;
onChange: React.ChangeEventHandler;
isValid?: boolean;
isInvalid?: boolean;
}

const CustomFileInput: FC = ({
onChange,
value,
...rest
}) => {
const { t } = useTranslation('translation', { keyPrefix: 'editor' });
const fileName = useMemo(() => {
return value ?? t('file_upload.text');
}, [value]);

const fileRef = useRef(null);

return (
<Form.Group>
<Form.Control
type="file"
id="custom-file"
onChange={onChange}
style={{ zIndex: -1, position: 'absolute' }} // 隐藏默认控件
ref={fileRef}
{...rest}
/>

  <InputGroup className="mb-3">
    <InputGroup.Text id="basic-addon1">
      {t('file_upload.text')}
    </InputGroup.Text>
    <Form.Control
      type="text"
      readOnly
      value={fileName}
      aria-label={t('file_upload.text')}
      placeholder={t('file_upload.placeholder')}
      aria-describedby="basic-addon1"
      onClick={() => {
        fileRef?.current?.click?.();
      }}
    />
  </InputGroup>
</Form.Group>

);
};

export default CustomFileInput;

<CustomFileInput
value={link.value}
onChange={onUpload}
isInvalid={currentTab === 'localImage' && link.isInvalid}
/>
{/* <Form.Control
type="file"
placeholder="123"
prefix="234"
title="title"
onChange={onUpload}
isInvalid={currentTab === 'localImage' && link.isInvalid}
/> */}
`

[LinkinStars]

Maybe you need to reload the page after changing the language.

[chenyong0923]

Maybe you need to reload the page after changing the language.

This is official and it seems to have a problem. You can try more times. The solution I provided above should resolve the issue.show code