chore: upload a ref audio

2026-01-31 14:06:50 +08:00
parent f278716b7e
commit 7a5c28228b
12 changed files with 340 additions and 245 deletions
@@ -0,0 +1,77 @@
+import SealInput from '@/components/seal-form/seal-input';
+import UploadAudio from '@/components/upload-audio';
+import { convertFileToBase64 } from '@/utils/load-audio-file';
+import { CloseCircleFilled } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import { useFormContext } from '../config/form-context';
+
+const SuffixWrapper = styled.div`
+  .icon {
+    font-size: 12px;
+    color: var(--ant-color-text-quaternary);
+    cursor: pointer;
+    &:hover {
+      color: var(--ant-color-text-tertiary);
+    }
+  }
+`;
+
+export const RefAudioFormItem: React.FC = () => {
+  const { meta } = useFormContext();
+  const form = Form.useFormInstance();
+  const intl = useIntl();
+  const [filleName, setFileName] = React.useState<string>('');
+
+  // handle upload audio file, transfer to a base64 url
+  const handleUploadChange = async (data: { file: any; fileList: any }) => {
+    const { file } = data;
+    const base64 = await convertFileToBase64(file);
+    form.setFieldsValue({
+      ref_audio: base64
+    });
+    setFileName(file.name);
+
+    console.log('Uploaded file base64 url:', base64);
+  };
+
+  const handleClear = () => {
+    form.setFieldsValue({
+      ref_audio: ''
+    });
+    setFileName('');
+  };
+
+  return (
+    <Form.Item
+      name="ref_audio"
+      getValueProps={(value) => ({ value: filleName ? filleName : value })}
+    >
+      <SealInput.Input
+        allowClear
+        readOnly={!!filleName}
+        suffix={
+          <SuffixWrapper>
+            {filleName ? (
+              <span onClick={handleClear}>
+                <CloseCircleFilled className="icon" />
+              </span>
+            ) : null}
+            <UploadAudio
+              size="small"
+              type="text"
+              accept={['.mp3', '.mp4', '.wav', '.m4a'].join(', ')}
+              onChange={handleUploadChange}
+            ></UploadAudio>
+          </SuffixWrapper>
+        }
+        description={intl.formatMessage({
+          id: 'playground.params.refAudio.tips'
+        })}
+        label={intl.formatMessage({ id: 'playground.params.refAudio' })}
+      ></SealInput.Input>
+    </Form.Item>
+  );
+};