feat: input-file 事件动作补充

examples/components/EventAction/UploadEvent.jsx

@@ -0,0 +1,49 @@
+export default {
+  type: 'page',
+  title: '上传类组件事件',
+  regions: ['body', 'toolbar', 'header'],
+  body: [
+    {
+      type: 'tpl',
+      tpl: 'InputFile上传类',
+      inline: false,
+      wrapperComponent: 'h2'
+    },
+    {
+      type: 'form',
+      debug: true,
+      api: '/api/mock2/form/saveForm',
+      body: [
+        {
+          type: 'group',
+          body: [
+            {
+              name: 'trigger1',
+              id: 'trigger1',
+              type: 'action',
+              label: 'clear触发器',
+              level: 'primary',
+              onEvent: {
+                click: {
+                  actions: [
+                    {
+                      actionType: 'clear',
+                      componentId: 'clear-input-file',
+                      description: '点击清除数据'
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              type: 'input-file',
+              id: 'clear-input-file',
+              name: 'file',
+              multiple: true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};

examples/components/Example.jsx

@@ -74,6 +74,7 @@ import LogicEventActionSchema from './EventAction/Logic';
 import StopEventActionSchema from './EventAction/Stop';
 import DataFlowEventActionSchema from './EventAction/DataFlow';
 import InputEventSchema from './EventAction/InputEvent';
+import UploadEventSchema from './EventAction/UploadEvent';
 import WizardSchema from './Wizard';
 import ChartSchema from './Chart';
 import EChartsEditorSchema from './ECharts';
@@ -530,6 +531,11 @@ export const examples = [
                 label: '输入类组件',
                 path: '/examples/event/input',
                 component: makeSchemaRenderer(InputEventSchema)
+              },
+              {
+                label: '上传类组件',
+                path: '/examples/event/upload',
+                component: makeSchemaRenderer(UploadEventSchema)
               }
             ]
           },

src/renderers/Form/InputFile.tsx

@@ -5,7 +5,7 @@ import isPlainObject from 'lodash/isPlainObject';
 // @ts-ignore
 import mapLimit from 'async/mapLimit';
 import ImageControl from './InputImage';
-import {Payload, ApiObject, ApiString} from '../../types';
+import {Payload, ApiObject, ApiString, Action} from '../../types';
 import {filter} from '../../utils/tpl';
 import Alert from '../../components/Alert2';
 import {qsstringify, createObject, guid, isEmpty} from '../../utils/helper';
@@ -504,6 +504,8 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         }
       }
     );
+    // 添加文件触发
+    this.dispatchEvent('change');
   }
 
   handleDropRejected(
@@ -798,6 +800,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         let value =
           (ret.data as any).value || (ret.data as any).url || ret.data;
 
+        this.dispatchEvent('success', file);
         cb(null, file, {
           ...(isPlainObject(ret.data) ? ret.data : null),
           value: value,
@@ -806,13 +809,16 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         });
       })
       .catch(error => {
+        this.dispatchEvent('fail', file);
         cb(error.message || __('File.errorRetry'), file);
       });
   }
 
-  removeFile(file: FileX | FileValue, index: number) {
+  async removeFile(file: FileX | FileValue, index: number) {
     const files = this.state.files.concat();
-
+    const removeFile = files[index];
+    // 触发移出文件事件
+    await this.dispatchEvent('remove', removeFile);
     this.removeFileCanelExecutor(file, true);
     files.splice(index, 1);
 
@@ -827,6 +833,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       },
       isUploading ? this.tick : this.onChange
     );
+    this.dispatchEvent('change');
   }
 
   clearError() {
@@ -1176,6 +1183,21 @@ export default class FileControl extends React.Component<FileProps, FileState> {
     }
   }
 
+  async dispatchEvent(
+    e: string,
+    data?: Array<FileX | FileValue> | FileX | FileValue
+  ) {
+    const {dispatchEvent} = this.props;
+    data = data ? data : this.state.files;
+    return dispatchEvent(e, createObject(data));
+  }
+
+  doAction(action: Action, data: object, throwErrors: boolean = false): any {
+    if (action.actionType === 'clear') {
+      this.setState({files: []});
+    }
+  }
+
   render() {
     const {
       btnLabel,