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

@@ -13,6 +13,7 @@
 import defaultRequest from './request';
 import traverseFileTree from './traverseFileTree';
 import getUid from './uid';
+import asyncPool from './asyncPool';
 
 interface ParsedFileInfo {
   origin: RcFile;
@@ -111,17 +112,20 @@
       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, parsedFiles, async file => this.post(file));
+      } else {
+        parsedFiles.forEach(file => {
           this.post(file);
         });
+      }
     });
   };
 
@@ -162,7 +166,7 @@
     const { data } = this.props;
     let mergedData: Record<string, unknown>;
     if (typeof data === 'function') {
-      mergedData = await data(file);
+      mergedData = data(file);
     } else {
       mergedData = data;
     }

src/asyncPool.ts

@@ -0,0 +1,39 @@
+/**
+ * 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

@@ -44,6 +44,7 @@ export interface UploadProps
     input?: React.CSSProperties;
   };
   hasControlInside?: boolean;
+  concurrencyLimit?: number;
 }
 
 export interface UploadProgressEvent extends Partial<ProgressEvent> {