handle files data in trigger function; alpha release

Author: ChenYong

example/pages/upload-wrapper.tsx

@@ -10,9 +10,6 @@ let PageUploadWrapper: FC<{}> = React.memo((props) => {
 
   let uploadPlugin = useUploadTrigger({
     acceptedFileTypes: ["jpg", "png"],
-    onChange: async (files) => {
-      console.log("files", files);
-    },
   });
 
   /** Methods */
@@ -34,7 +31,14 @@ let PageUploadWrapper: FC<{}> = React.memo((props) => {
       </DocDemo>
 
       <DocDemo title="Upload Trigger">
-        <JimoButton text="点击选取一个文件, 在 Console 查看" onClick={uploadPlugin.onUpload}></JimoButton>
+        <JimoButton
+          text="点击选取一个文件, 在 Console 查看"
+          onClick={(event) => {
+            uploadPlugin.onUpload((files) => {
+              console.log("files", files);
+            });
+          }}
+        ></JimoButton>
         <DocSnippet code={hooksCode} />
         {uploadPlugin.ui}
       </DocDemo>
@@ -61,10 +65,14 @@ UploadWrapper 可以包裹一个区域, 用来获取 File 对象. 得到 File 
 let hooksCode = `
 let uploadPlugin = useUploadTrigger({
   acceptedFileTypes: ["jpg", "png"],
-  onChange: async (files) => {
-    console.log("files", files);
-  },
 });
 
-<JimoButton text="点击选取一个文件, 在 Console 查看" onClick={uploadPlugin.onUpload}></JimoButton>
+<JimoButton
+  text="点击选取一个文件, 在 Console 查看"
+  onClick={(event) => {
+    uploadPlugin.onUpload((files) => {
+      console.log("files", files);
+    });
+  }}
+></JimoButton>
 `;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimengio/files-picker",
-  "version": "0.0.1-a14",
+  "version": "0.0.1-a15",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/component/upload-wrapper.tsx

@@ -25,12 +25,13 @@ interface IProps {
   accept?: string;
   multiple?: boolean;
   className?: string;
-  onChange: (fileList: File[]) => Promise<void>;
+  onChange?: (fileList: File[]) => Promise<void>;
   onError?: (error: EUploadError) => void;
 }
 
 export let useUploadTrigger = (props: IProps) => {
   let inputElement = useRef(null);
+  let filesHandlerRef = useRef<(files: File[]) => void>(null);
 
   let inputAccepts = props.accept;
 
@@ -49,11 +50,9 @@ export let useUploadTrigger = (props: IProps) => {
       accept={inputAccepts}
       multiple={props.multiple}
       onChange={async (e) => {
-        if (props.onChange) {
+        if (props.onChange || filesHandlerRef.current) {
           const fileList = Array.from(e.target.files); // copy to array before resetting
 
-          e.target.files = null; // without resetting, not able to trigger a change after failed
-
           if (fileList.length > 0) {
             const files: File[] = [];
 
@@ -69,14 +68,20 @@ export let useUploadTrigger = (props: IProps) => {
               files.push(file);
             });
 
-            props.onChange(files);
+            props.onChange?.(files);
+            filesHandlerRef.current?.(files);
+            filesHandlerRef.current = null;
           }
         }
+
+        // reset selected files to null, or selecting same file will not trigger events
+        e.target.value = "";
       }}
     />
   );
 
-  let onUpload = () => {
+  let onUpload = (onFiles: (files: File[]) => void) => {
+    filesHandlerRef.current = onFiles;
     if (inputElement.current != null) {
       inputElement.current.click();
     } else {
@@ -101,7 +106,7 @@ let UploadWrapper: FC<IProps> = React.memo((props) => {
     <div
       className={cx(styleWrapper, props.className)}
       onClick={() => {
-        uploadPlugin.onUpload();
+        uploadPlugin.onUpload(null);
       }}
     >
       {props.children}