feat: add exposed api method let user open file select dialog manually (#1152)

Co-authored-by: pointhalo <[email protected]>

content/input/upload/index-en-US.md

@@ -1313,6 +1313,7 @@ interface FileItem {
 |----|----|----|----|
 | insert | Upload file, when index is passed, it will be inserted at the specified position, if not passed, it will be inserted at the end | (files: Array<File\>, index?: number) => void | 2.2.0 |
 | upload | Start upload manually, use with uploadTrigger="custom" | () => void | |
+| openFileDialog | open file select Dialog | () => void | 2.21.0 |
 
 ## Content Guidelines
 - Upload button

content/input/upload/index.md

@@ -1314,6 +1314,7 @@ interface FileItem {
 |----|----|----|----|
 | insert | 上传文件，当index传入时，会插入到指定位置，不传则插入到最后 | (files: Array<File\>, index?: number) => void | 2.2.0 |
 | upload | 手动开始上传，配合uploadTrigger="custom"使用 | () => void | |
+| openFileDialog | 打开文件选择窗口 | () => void | 2.21.0 |
 
 ## Accessibility
 

packages/semi-ui/upload/_story/upload.stories.js

@@ -1,7 +1,7 @@
 /* argus-disable unPkgSensitiveInfo */
 import React, { useState } from 'react';
 import FileCard from '../fileCard';
-import { Button, Upload, Toast, Icon } from '@douyinfe/semi-ui/index';
+import { Button, Upload, Toast, Tag } from '@douyinfe/semi-ui/index';
 import { withField, Form } from '../../form/index';
 import { IconPlus, IconFile, IconUpload, IconEyeOpened, IconDownload, IconDelete } from '@douyinfe/semi-icons';
 
@@ -1108,4 +1108,45 @@ export const Insert = () => <InsertUpload></InsertUpload>;
 
 Insert.story = {
   name: 'insert',
+};
+
+class ClickToOpenUpload extends React.Component {
+  constructor() {
+    super();
+    this.onClick = this.onClick.bind(this);
+    this.uploadRef = React.createRef();
+  }
+
+  onClick() {
+    // open file select dialog
+    this.uploadRef.current.openFileDialog();
+  }
+
+  render() {
+    let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
+    return (
+      <div>
+        <Button icon={<IconUpload />} theme="light" onClick={this.onClick}>
+          点我打开文件选择窗口
+        </Button>
+        <div style={{ marginTop: 50 }}>
+          <Tag color="blue" type="light">文件列表</Tag>
+          <Upload
+            {...commonProps}
+            action={action}
+            ref={this.uploadRef}
+            onSuccess={(...v) => console.log(...v)}
+            onError={(...v) => console.log(...v)}
+          >
+          </Upload>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const ClickToOpenUploadDemo = () => <ClickToOpenUpload></ClickToOpenUpload>;
+
+ClickToOpenUploadDemo.story = {
+  name: 'click to open upload demo',
 };

packages/semi-ui/upload/index.tsx

@@ -369,6 +369,14 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         this.foundation.startUpload(fileList);
     };
 
+    /**
+     * ref method
+     * manual open file select dialog
+     */
+    openFileDialog = (): void => {
+        this.onClick();
+    };
+
     renderFile = (file: FileItem, index: number, locale: Locale['Upload']): ReactNode => {
         const { name, status, validateMessage, _sizeInvalid, uid } = file;
         const {