feat: support concurrency limit

README.md

@@ -60,7 +60,7 @@ React.render(<Upload />, container);
 |style | object | {}| root component inline style |
 |className | string | - | root component className |
 |disabled | boolean | false | whether disabled |
-|component | "div"|"span" | "span"| wrap component name |
+|component | "div"|"span" | "span"|
 |action| string &#124; function(file): string &#124; Promise&lt;string&gt; | | form action url |
 |method | string | post | request method |
 |directory| boolean | false | support upload whole directory |
@@ -69,6 +69,7 @@ React.render(<Upload />, container);
 |accept | string | | input accept attribute |
 |capture | string | | input capture attribute |
 |multiple | boolean | false | only support ie10+|
+|concurrencyLimit | number |  | asynchronously posts files with the concurrency limit |
 |onStart | function| | start upload file |
 |onError| function| | error callback |
 |onSuccess | function | | success callback |

src/AjaxUploader.tsx

@@ -6,13 +6,15 @@ import attrAccept from './attr-accept';
 import type {
   BeforeUploadFileType,
   RcFile,
+  RequestTask,
   UploadProgressEvent,
   UploadProps,
   UploadRequestError,
 } from './interface';
 import defaultRequest from './request';
 import traverseFileTree from './traverseFileTree';
 import getUid from './uid';
+import asyncPool from './asyncPool';
 
 interface ParsedFileInfo {
   origin: RcFile;
@@ -21,15 +23,24 @@ interface ParsedFileInfo {
   parsedFile: RcFile;
 }
 
-class AjaxUploader extends Component<UploadProps> {
-  state = { uid: getUid() };
+interface UploadState {
+  uid: string;
+  requestTasks: RequestTask[];
+}
+
+class AjaxUploader extends Component<UploadProps, UploadState> {
+  state = { uid: getUid(), requestTasks: [] as RequestTask[] };
 
   reqs: any = {};
 
   private fileInput: HTMLInputElement;
 
   private _isMounted: boolean;
 
+  appendRequstTask = (task: RequestTask) => {
+    this.setState(pre => ({ ...pre, requestTasks: [...pre.requestTasks, task] }));
+  };
+
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { accept, directory } = this.props;
     const { files } = e.target;
@@ -111,17 +122,32 @@ class AjaxUploader extends Component<UploadProps> {
       return this.processFile(file, originFiles);
     });
 
+    const { onBatchStart, concurrencyLimit } = this.props;
     // Batch upload files
     Promise.all(postFiles).then(fileList => {
-      const { onBatchStart } = this.props;
-
       onBatchStart?.(fileList.map(({ origin, parsedFile }) => ({ file: origin, parsedFile })));
 
-      fileList
-        .filter(file => file.parsedFile !== null)
-        .forEach(file => {
+      const parsedFiles = fileList.filter(file => file.parsedFile !== null);
+      if (concurrencyLimit) {
+        // Asynchronously posts files with the concurrency limit.
+        asyncPool(
+          concurrencyLimit,
+          this.state.requestTasks,
+          item =>
+            new Promise<void>(resolve => {
+              const xhr = item.xhr;
+
+              item.done = resolve;
+
+              xhr.send(item.data);
+            }),
+        );
+      } else {
+        parsedFiles.forEach(file => {
           this.post(file);
         });
+        this.state.requestTasks.forEach(({ xhr, data }) => xhr.send(data));
+      }
     });
   };
 
@@ -162,7 +188,7 @@ class AjaxUploader extends Component<UploadProps> {
     const { data } = this.props;
     let mergedData: Record<string, unknown>;
     if (typeof data === 'function') {
-      mergedData = await data(file);
+      mergedData = data(file);
     } else {
       mergedData = data;
     }
@@ -230,12 +256,13 @@ class AjaxUploader extends Component<UploadProps> {
     };
 
     onStart(origin);
-    this.reqs[uid] = request(requestOption);
+    this.reqs[uid] = request(requestOption, this.appendRequstTask);
   }
 
   reset() {
     this.setState({
       uid: getUid(),
+      requestTasks: [],
     });
   }
 

src/asyncPool.ts

@@ -0,0 +1,38 @@
+/**
+ * Asynchronously processes an array of items with a concurrency limit.
+ *
+ * @template T - Type of the input items.
+ * @template U - Type of the result of the asynchronous task.
+ *
+ * @param {number} concurrencyLimit - The maximum number of asynchronous tasks to execute concurrently.
+ * @param {T[]} items - The array of items to process asynchronously.
+ * @param {(item: T) => Promise<U>} asyncTask - The asynchronous task to be performed on each item.
+ *
+ * @returns {Promise<U[]>} - A promise that resolves to an array of results from the asynchronous tasks.
+ */
+export default async function asyncPool<T, U>(
+  concurrencyLimit: number,
+  items: T[],
+  asyncTask: (item: T) => Promise<U>,
+): Promise<U[]> {
+  const tasks: Promise<U>[] = [];
+  const pendings: Promise<U>[] = [];
+
+  for (const item of items) {
+    const task = asyncTask(item);
+    tasks.push(task);
+
+    if (concurrencyLimit <= items.length) {
+      task.then(() => {
+        pendings.splice(pendings.indexOf(task), 1);
+      });
+      pendings.push(task);
+
+      if (pendings.length >= concurrencyLimit) {
+        await Promise.race(pendings);
+      }
+    }
+  }
+
+  return Promise.all(tasks);
+}

src/interface.tsx

@@ -29,7 +29,7 @@ export interface UploadProps
     file: RcFile,
     FileList: RcFile[],
   ) => BeforeUploadFileType | Promise<void | BeforeUploadFileType> | void;
-  customRequest?: (option: UploadRequestOption) => void;
+  customRequest?: (option: UploadRequestOption) => void | { abort: () => void };
   withCredentials?: boolean;
   openFileDialogOnClick?: boolean;
   prefixCls?: string;
@@ -44,6 +44,7 @@ export interface UploadProps
     input?: React.CSSProperties;
   };
   hasControlInside?: boolean;
+  concurrencyLimit?: number;
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {
@@ -76,3 +77,9 @@ export interface UploadRequestOption<T = any> {
 export interface RcFile extends File {
   uid: string;
 }
+
+export interface RequestTask {
+  xhr: XMLHttpRequest;
+  data: File | FormData;
+  done?: () => void;
+}

src/request.ts

@@ -1,4 +1,9 @@
-import type { UploadRequestOption, UploadRequestError, UploadProgressEvent } from './interface';
+import type {
+  UploadRequestOption,
+  UploadRequestError,
+  UploadProgressEvent,
+  RequestTask,
+} from './interface';
 
 function getError(option: UploadRequestOption, xhr: XMLHttpRequest) {
   const msg = `cannot ${option.method} ${option.action} ${xhr.status}'`;
@@ -22,7 +27,10 @@ function getBody(xhr: XMLHttpRequest) {
   }
 }
 
-export default function upload(option: UploadRequestOption) {
+export default function upload(
+  option: UploadRequestOption,
+  appendTask: (task: RequestTask) => void,
+) {
   // eslint-disable-next-line no-undef
   const xhr = new XMLHttpRequest();
 
@@ -62,11 +70,16 @@ export default function upload(option: UploadRequestOption) {
     formData.append(option.filename, option.file);
   }
 
+  const task: RequestTask = { xhr, data: formData };
+
   xhr.onerror = function error(e) {
     option.onError(e);
+    task.done?.();
   };
 
   xhr.onload = function onload() {
+    task.done?.();
+
     // allow success when 2xx status
     // see https://github.com/react-component/upload/issues/34
     if (xhr.status < 200 || xhr.status >= 300) {
@@ -97,7 +110,7 @@ export default function upload(option: UploadRequestOption) {
     }
   });
 
-  xhr.send(formData);
+  appendTask(task);
 
   return {
     abort() {