* file-selector: add onChange callback to fileSelector.

easysoft · Mar 15, 2024 · edc73ca · edc73ca
1 parent 6ab83e3
commit edc73ca
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/lib/file-selector/src/components/file-selector.tsx b/lib/file-selector/src/components/file-selector.tsx
@@ -251,7 +251,7 @@ export class FileSelector<P extends FileSelectorProps = FileSelectorProps, S ext
         }
 
         this._data.items.add(file);
-        this._syncFiles();
+        this._syncFiles(true);
 
         await this.changeState((prevState) => ({files: [...prevState.files, fileInfo]} as S));
 
@@ -289,7 +289,7 @@ export class FileSelector<P extends FileSelectorProps = FileSelectorProps, S ext
                 this._data.items.remove(dataIndex);
             }
             this._data.items.add(newFile);
-            this._syncFiles();
+            this._syncFiles(true);
             fileInfo.file = newFile;
         }
         fileInfo.name = newName;
@@ -357,11 +357,17 @@ export class FileSelector<P extends FileSelectorProps = FileSelectorProps, S ext
         if (index >= 0) {
             this.state.files.splice(index, 1);
             this.setState({files: this.state.files});
+            this._syncFiles(true);
         }
     }
 
-    protected _syncFiles() {
-        this._file.current!.files = this._data.files;
+    protected _syncFiles(triggerChange = false) {
+        const files = this._data.files;
+        const element = this._file.current!;
+        element!.files = files;
+        if (triggerChange) {
+            $(element!).trigger('change', {files});
+        }
     }
 
     protected _showAlert(tip: string | ModalAlertOptions, formatData?: Record<string, unknown>) {
@@ -458,8 +464,8 @@ export class FileSelector<P extends FileSelectorProps = FileSelectorProps, S ext
     }
 
     protected _renderForForm(props: RenderableProps<P>) {
-        const {name, accept} = props;
-        return <input key="form" ref={this._file} type="file" name={name} multiple={this.multiple} accept={accept} style="display:none" />;
+        const {name, accept, onChange} = props;
+        return <input key="form" ref={this._file} type="file" name={name} multiple={this.multiple} accept={accept} style="display:none" onChange={onChange} />;
     }
 
     protected _getIcon(file: FileInfo): IconType | undefined {

diff --git a/lib/file-selector/src/types/file-selector-props.ts b/lib/file-selector/src/types/file-selector-props.ts
@@ -38,6 +38,7 @@ export interface FileSelectorProps extends HElementProps {
     onSelect?: (files: File[] | FileList) => void | false;
     onAdd?: (file: FileInfo) => void | false;
     onRemove?: (file: FileInfo) => void | Promise<void | false>;
+    onChange?: (event: Event) => void;
     onRename?: (newName: string, oldName: string, file: FileInfo) => void | false | Promise<void | false>;
     onDuplicated?: (name: string, currentFile: FileInfo, existFile: FileInfo) => void | true;
     onExceededSize?: (limit: number, file: FileInfo) => void | true;