refactor: rm transformFile (#299)

* reafactor: rm transformFile

* clean up

* add runtime for jest

* test: Delay test

* fix lint

* fix compile

Author: zombieJ

README.md

@@ -76,7 +76,6 @@ React.render(<Upload />, container);
 |customRequest | function | null | provide an override for the default xhr behavior for additional customization|
 |withCredentials | boolean | false | ajax upload with cookie send |
 |openFileDialogOnClick | boolean | true | useful for drag only upload as it does not trigger on enter key or click event |
-|transformFile | function(file): Promise&lt;blob&gt; |  | transform file before request |
 
 #### onError arguments
 

docs/demo/transformFile.md

@@ -37,7 +37,8 @@
     "now-build": "npm run docs:build"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.0",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.20",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@umijs/fabric": "^2.0.0",
@@ -58,6 +59,7 @@
     "rc-tools": "8.x",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
+    "regenerator-runtime": "^0.13.7",
     "sinon": "^9.0.2",
     "typescript": "^4.0.2",
     "vinyl-fs": "^3.0.3"

docs/examples/transformFile.tsx

@@ -1,12 +1,20 @@
 /* eslint react/no-is-mounted:0,react/sort-comp:0,react/prop-types:0 */
-import React, { Component, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React, { Component } from 'react';
 import classNames from 'classnames';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import defaultRequest from './request';
 import getUid from './uid';
 import attrAccept from './attr-accept';
 import traverseFileTree from './traverseFileTree';
-import { UploadProps, UploadProgressEvent, UploadRequestError, RcFile, Action } from './interface';
+import type { UploadProps, UploadProgressEvent, UploadRequestError, RcFile } from './interface';
+
+interface ParsedFileInfo {
+  origin: RcFile;
+  action: string;
+  data: object;
+  parsedFile: File | Blob | null;
+}
 
 class AjaxUploader extends Component<UploadProps> {
   state = { uid: getUid() };
@@ -84,106 +92,105 @@ class AjaxUploader extends Component<UploadProps> {
   }
 
   uploadFiles = (files: FileList) => {
-    const postFiles: Array<RcFile> = Array.prototype.slice.call(files);
-    postFiles
-      .map((file: RcFile & { uid?: string }) => {
-        // eslint-disable-next-line no-param-reassign
-        file.uid = getUid();
-        return file;
-      })
-      .forEach(file => {
-        this.upload(file, postFiles);
-      });
-  };
+    const originFiles = [...files] as RcFile[];
+    const postFiles = originFiles.map((file: RcFile & { uid?: string }) => {
+      // eslint-disable-next-line no-param-reassign
+      file.uid = getUid();
+      return this.processFile(file, originFiles);
+    });
 
-  upload(file: RcFile, fileList: Array<RcFile>) {
-    const { props } = this;
-    if (!props.beforeUpload) {
-      // always async in case use react state to keep fileList
-      Promise.resolve().then(() => {
+    // Batch upload files
+    Promise.all(postFiles).then(fileList => {
+      const { onBatchStart } = this.props;
+      const enabledFiles = fileList.filter(file => file);
+
+      onBatchStart?.(enabledFiles.map(file => file.origin));
+
+      enabledFiles.forEach(file => {
         this.post(file);
       });
-      return;
+    });
+  };
+
+  /**
+   * Process file before upload. When all the file is ready, we start upload.
+   */
+  processFile = async (file: RcFile, fileList: RcFile[]): Promise<ParsedFileInfo> => {
+    const { beforeUpload, action, data } = this.props;
+
+    let transformedFile: boolean | File | Blob | void = file;
+    if (beforeUpload) {
+      transformedFile = await beforeUpload(file, fileList);
+      if (transformedFile === false) {
+        return null;
+      }
     }
 
-    const before = props.beforeUpload(file, fileList);
-    if (before && typeof before !== 'boolean' && before.then) {
-      before
-        .then(processedFile => {
-          const processedFileType = Object.prototype.toString.call(processedFile);
-          if (processedFileType === '[object File]' || processedFileType === '[object Blob]') {
-            this.post(processedFile as RcFile);
-            return;
-          }
-          this.post(file);
-        })
-        .catch(e => {
-          // eslint-disable-next-line no-console
-          console.log(e);
-        });
-    } else if (before !== false) {
-      Promise.resolve().then(() => {
-        this.post(file);
-      });
+    let mergedAction: string;
+    if (typeof action === 'function') {
+      mergedAction = await action(file);
+    } else {
+      mergedAction = action;
     }
-  }
 
-  post(file: RcFile) {
+    let mergedData: object;
+    if (typeof data === 'function') {
+      mergedData = await data(file);
+    } else {
+      mergedData = data;
+    }
+
+    const parsedFile =
+      typeof transformedFile === 'object' && transformedFile ? transformedFile : file;
+
+    // Used for `request.ts` get form data name
+    if (!(parsedFile as any).name) {
+      (parsedFile as any).name = file.name;
+    }
+
+    return {
+      origin: file,
+      data: mergedData,
+      parsedFile,
+      action: mergedAction,
+    };
+  };
+
+  post({ data, origin, action, parsedFile }: ParsedFileInfo) {
     if (!this._isMounted) {
       return;
     }
     const { props } = this;
-    const { onStart, onProgress, transformFile = originFile => originFile } = props;
+    const { onStart, onProgress } = props;
 
-    new Promise(resolve => {
-      let actionRet: Action | PromiseLike<string> = props.action;
-      if (typeof actionRet === 'function') {
-        actionRet = actionRet(file);
-      }
-      return resolve(actionRet);
-    }).then((action: string) => {
-      const { uid } = file;
-      const request = props.customRequest || defaultRequest;
-      const transform = Promise.resolve(transformFile(file))
-        .then(transformedFile => {
-          let { data } = props;
-          if (typeof data === 'function') {
-            data = data(transformedFile);
+    const { uid } = origin;
+    const request = props.customRequest || defaultRequest;
+
+    const requestOption = {
+      action,
+      filename: props.name,
+      data,
+      file: parsedFile,
+      headers: props.headers,
+      withCredentials: props.withCredentials,
+      method: props.method || 'post',
+      onProgress: onProgress
+        ? (e: UploadProgressEvent) => {
+            onProgress(e, origin);
           }
-          return Promise.all([transformedFile, data]);
-        })
-        .catch(e => {
-          console.error(e); // eslint-disable-line no-console
-        });
-
-      transform.then(([transformedFile, data]: [RcFile, object]) => {
-        const requestOption = {
-          action,
-          filename: props.name,
-          data,
-          file: transformedFile,
-          headers: props.headers,
-          withCredentials: props.withCredentials,
-          method: props.method || 'post',
-          onProgress: onProgress
-            ? (e: UploadProgressEvent) => {
-                onProgress(e, file);
-              }
-            : null,
-          onSuccess: (ret: any, xhr: XMLHttpRequest) => {
-            delete this.reqs[uid];
-            props.onSuccess(ret, file, xhr);
-          },
-          onError: (err: UploadRequestError, ret: any) => {
-            delete this.reqs[uid];
-            props.onError(err, ret, file);
-          },
-        };
+        : null,
+      onSuccess: (ret: any, xhr: XMLHttpRequest) => {
+        delete this.reqs[uid];
+        props.onSuccess(ret, origin, xhr);
+      },
+      onError: (err: UploadRequestError, ret: any) => {
+        delete this.reqs[uid];
+        props.onError(err, ret, origin);
+      },
+    };
 
-        onStart(file);
-        this.reqs[uid] = request(requestOption);
-      });
-    });
+    onStart(origin);
+    this.reqs[uid] = request(requestOption);
   }
 
   reset() {

package.json

@@ -1,7 +1,7 @@
 /* eslint react/prop-types:0 */
 import React, { Component } from 'react';
 import AjaxUpload from './AjaxUploader';
-import { UploadProps, RcFile } from './interface';
+import type { UploadProps, RcFile } from './interface';
 
 function empty() {}
 

src/AjaxUploader.tsx

@@ -1,10 +1,10 @@
-import { RcFile } from './interface';
+import type { RcFile } from './interface';
 
 function endsWith(str: string, suffix: string) {
   return str.indexOf(suffix, str.length - suffix.length) !== -1;
 }
 
-export default (file: RcFile, acceptedFiles: string | Array<string>) => {
+export default (file: RcFile, acceptedFiles: string | string[]) => {
   if (file && acceptedFiles) {
     const acceptedFilesArray = Array.isArray(acceptedFiles)
       ? acceptedFiles

src/Upload.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 export type Action = string | ((file: RcFile) => string | PromiseLike<string>);
 
@@ -16,6 +16,7 @@ export interface UploadProps
   headers?: UploadRequestHeader;
   accept?: string;
   multiple?: boolean;
+  onBatchStart?: (fileList: RcFile[]) => void;
   onStart?: (file: RcFile) => void;
   onError?: (error: Error, ret: object, file: RcFile) => void;
   onSuccess?: (response: object, file: RcFile, xhr: object) => void;
@@ -24,7 +25,6 @@ export interface UploadProps
   customRequest?: (option: UploadRequestOption) => void;
   withCredentials?: boolean;
   openFileDialogOnClick?: boolean;
-  transformFile?: (file: RcFile) => string | Blob | RcFile | PromiseLike<string | Blob | RcFile>;
   prefixCls?: string;
   id?: string;
   onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -38,9 +38,7 @@ export interface UploadProgressEvent extends ProgressEvent {
 
 export type UploadRequestMethod = 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch';
 
-export interface UploadRequestHeader {
-  [key: string]: string;
-}
+export type UploadRequestHeader = Record<string, string>;
 
 export interface UploadRequestError extends Error {
   status?: number;
@@ -54,7 +52,7 @@ export interface UploadRequestOption<T = any> {
   onSuccess?: (body: T, xhr: XMLHttpRequest) => void;
   data?: object;
   filename?: string;
-  file: RcFile;
+  file: RcFile | Blob;
   withCredentials?: boolean;
   action: string;
   headers?: UploadRequestHeader;

src/attr-accept.ts

@@ -1,4 +1,4 @@
-import { UploadRequestOption, UploadRequestError, UploadProgressEvent } from './interface';
+import type { UploadRequestOption, UploadRequestError, UploadProgressEvent } from './interface';
 
 function getError(option: UploadRequestOption, xhr: XMLHttpRequest) {
   const msg = `cannot ${option.method} ${option.action} ${xhr.status}'`;
@@ -57,7 +57,7 @@ export default function upload(option: UploadRequestOption) {
 
   // eslint-disable-next-line no-undef
   if (option.file instanceof Blob) {
-    formData.append(option.filename, option.file, option.file.name);
+    formData.append(option.filename, option.file, (option.file as any).name);
   } else {
     formData.append(option.filename, option.file);
   }