feat: queue every upload request

uploadcare · Apr 26, 2023 · ed9d6de · ed9d6de
1 parent b3dde84
commit ed9d6de
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/abstract/CTX.js b/abstract/CTX.js
@@ -1,3 +1,5 @@
+import { Queue } from '@uploadcare/upload-client';
+
 export const blockCtx = () => ({
   /** @type {Set<import('./Block').Block>} */
   '*blocksRegistry': new Set(),
@@ -24,4 +26,5 @@ export const uploaderBlockCtx = (fnCtx) => ({
   '*outputData': null,
   '*focusedEntry': null,
   '*uploadMetadata': null,
+  '*uploadQueue': new Queue(1),
 });
diff --git a/abstract/UploaderBlock.js b/abstract/UploaderBlock.js
@@ -12,6 +12,10 @@ import { stringToArray } from '../utils/stringToArray.js';
 
 export class UploaderBlock extends ActivityBlock {
   ctxInit = uploaderBlockCtx(this);
+  cssInit$ = {
+    ...this.cssInit$,
+    '--cfg-max-concurrent-requests': 1,
+  };
 
   /** @private */
   __initialUploadMetadata = null;
@@ -36,9 +40,14 @@ export class UploaderBlock extends ActivityBlock {
 
   initCallback() {
     super.initCallback();
+
     if (this.__initialUploadMetadata) {
       this.$['*uploadMetadata'] = this.__initialUploadMetadata;
     }
+
+    this.sub('--cfg-max-concurrent-requests', (value) => {
+      this.$['*uploadQueue'].concurrency = Number(value) || 1;
+    });
   }
 
   destroyCallback() {
@@ -303,7 +312,7 @@ export class UploaderBlock extends ActivityBlock {
       retryThrottledRequestMaxTimes: this.getCssData('--cfg-retry-throttled-request-max-times'),
       multipartMinFileSize: this.getCssData('--cfg-multipart-min-file-size'),
       multipartChunkSize: this.getCssData('--cfg-multipart-chunk-size'),
-      maxConcurrentRequests: this.getCssData('--cfg-max-concurrent-requests'),
+      maxConcurrentRequests: this.getCssData('--cfg-multipart-max-concurrent-requests'),
       multipartMaxAttempts: this.getCssData('--cfg-multipart-max-attempts'),
       checkForUrlDuplicates: !!this.getCssData('--cfg-check-for-url-duplicates'),
       saveUrlForRecurrentUploads: !!this.getCssData('--cfg-save-url-for-recurrent-uploads'),

diff --git a/blocks/FileItem/FileItem.js b/blocks/FileItem/FileItem.js
@@ -418,18 +418,21 @@ export class FileItem extends UploaderBlock {
       let abortController = new AbortController();
       entry.setValue('abortController', abortController);
 
-      let fileInfo = await uploadFile(entry.getValue('file') || entry.getValue('externalUrl'), {
-        ...this.getUploadClientOptions(),
-        fileName: entry.getValue('fileName'),
-        onProgress: (progress) => {
-          if (progress.isComputable) {
-            let percentage = progress.value * 100;
-            entry.setValue('uploadProgress', percentage);
-          }
-          this.$.progressUnknown = !progress.isComputable;
-        },
-        signal: abortController.signal,
-      });
+      const uploadTask = () =>
+        uploadFile(entry.getValue('file') || entry.getValue('externalUrl'), {
+          ...this.getUploadClientOptions(),
+          fileName: entry.getValue('fileName'),
+          onProgress: (progress) => {
+            if (progress.isComputable) {
+              let percentage = progress.value * 100;
+              entry.setValue('uploadProgress', percentage);
+            }
+            this.$.progressUnknown = !progress.isComputable;
+          },
+          signal: abortController.signal,
+        });
+
+      let fileInfo = await this.$['*uploadQueue'].add(uploadTask);
       entry.setMultipleValues({
         fileInfo,
         isUploading: false,

diff --git a/blocks/themes/lr-basic/config.css b/blocks/themes/lr-basic/config.css
@@ -36,7 +36,8 @@
   --cfg-retry-throttled-request-max-times: 1;
   --cfg-multipart-min-file-size: 26214400; /* 25MB */
   --cfg-multipart-chunk-size: 5242880; /* 5MB */
-  --cfg-max-concurrent-requests: 4;
+  --cfg-max-concurrent-requests: 10;
+  --cfg-multipart-max-concurrent-requests: 4;
   --cfg-multipart-max-attempts: 3;
   --cfg-check-for-url-duplicates: 0;
   --cfg-save-url-for-recurrent-uploads: 0;