@vaadin/upload 25.0.2 → 25.1.0-alpha1

package/README.md

@@ -28,6 +28,29 @@ Once installed, import the component in your application:
 import '@vaadin/upload';
 ```
 
+## Performance Considerations
+
+When uploading large numbers of files, the component automatically throttles concurrent uploads to prevent browser performance degradation. By default, a maximum of 3 files are uploaded simultaneously, with additional files queued automatically.
+
+You can customize this limit using the `max-concurrent-uploads` attribute:
+
+```html
+<!-- Limit to 5 concurrent uploads -->
+<vaadin-upload max-concurrent-uploads="5"></vaadin-upload>
+```
+
+```js
+// Or set it programmatically
+upload.maxConcurrentUploads = 5;
+```
+
+This helps prevent:
+- Browser XHR limitations (failures when uploading 2000+ files simultaneously)
+- Performance degradation with hundreds of concurrent uploads
+- Network congestion on slower connections
+
+The default value of 3 balances upload performance with network resource conservation.
+
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "25.0.2",
+  "version": "25.1.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.0.2",
-    "@vaadin/button": "~25.0.2",
-    "@vaadin/component-base": "~25.0.2",
-    "@vaadin/progress-bar": "~25.0.2",
-    "@vaadin/vaadin-themable-mixin": "~25.0.2",
+    "@vaadin/a11y-base": "25.1.0-alpha1",
+    "@vaadin/button": "25.1.0-alpha1",
+    "@vaadin/component-base": "25.1.0-alpha1",
+    "@vaadin/progress-bar": "25.1.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~25.0.2",
-    "@vaadin/test-runner-commands": "~25.0.2",
+    "@vaadin/chai-plugins": "25.1.0-alpha1",
+    "@vaadin/test-runner-commands": "25.1.0-alpha1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.0.2",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha1",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d17c1f8b7c6f3f991cafd9dbdbe5759caa57afcd"
+  "gitHead": "c789cdd350bcd74b280268a83f5475ad7f2f65e1"
 }

package/src/vaadin-upload-file.js

@@ -95,6 +95,9 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
 
   /** @protected */
   render() {
+    const isFileStartVisible = this.held && !this.uploading && !this.complete;
+    const isFileRetryVisible = this.errorMessage;
+
     return html`
       <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
       <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
@@ -111,7 +114,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
           part="start-button"
           file-event="file-start"
           @click="${this._fireFileEvent}"
-          ?hidden="${!this.held}"
+          ?hidden="${!isFileStartVisible}"
           ?disabled="${this.disabled}"
           aria-label="${this.i18n ? this.i18n.file.start : nothing}"
           aria-describedby="name"
@@ -121,7 +124,7 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
           part="retry-button"
           file-event="file-retry"
           @click="${this._fireFileEvent}"
-          ?hidden="${!this.errorMessage}"
+          ?hidden="${!isFileRetryVisible}"
           ?disabled="${this.disabled}"
           aria-label="${this.i18n ? this.i18n.file.retry : nothing}"
           aria-describedby="name"

package/src/vaadin-upload-mixin.d.ts

@@ -205,6 +205,16 @@ export declare class UploadMixinClass {
    */
   uploadFormat: UploadFormat;
 
+  /**
+   * Specifies the maximum number of files that can be uploaded simultaneously.
+   * This helps prevent browser performance degradation and XHR limitations when
+   * uploading large numbers of files. Files exceeding this limit will be queued
+   * and uploaded as active uploads complete.
+   * @attr {number} max-concurrent-uploads
+   * @default 3
+   */
+  maxConcurrentUploads: number;
+
   /**
    * The object used to localize this component. To change the default
    * localization, replace this with an object that provides all properties, or

package/src/vaadin-upload-mixin.js

@@ -322,6 +322,20 @@ export const UploadMixin = (superClass) =>
           value: 'raw',
         },
 
+        /**
+         * Specifies the maximum number of files that can be uploaded simultaneously.
+         * This helps prevent browser performance degradation and XHR limitations when
+         * uploading large numbers of files. Files exceeding this limit will be queued
+         * and uploaded as active uploads complete.
+         * @attr {number} max-concurrent-uploads
+         * @type {number}
+         */
+        maxConcurrentUploads: {
+          type: Number,
+          value: 3,
+          sync: true,
+        },
+
         /**
          * Pass-through to input's capture attribute. Allows user to trigger device inputs
          * such as camera or microphone immediately.
@@ -347,6 +361,18 @@ export const UploadMixin = (superClass) =>
         _files: {
           type: Array,
         },
+
+        /** @private */
+        _uploadQueue: {
+          type: Array,
+          value: () => [],
+        },
+
+        /** @private */
+        _activeUploads: {
+          type: Number,
+          value: 0,
+        },
       };
     }
 
@@ -694,16 +720,46 @@ export const UploadMixin = (superClass) =>
       if (files && !Array.isArray(files)) {
         files = [files];
       }
-      files = files.filter((file) => !file.complete);
-      Array.prototype.forEach.call(files, this._uploadFile.bind(this));
+      files.filter((file) => !file.complete).forEach((file) => this._queueFileUpload(file));
     }
 
     /** @private */
-    _uploadFile(file) {
+    _queueFileUpload(file) {
       if (file.uploading) {
         return;
       }
 
+      file.held = true;
+      file.uploading = file.indeterminate = true;
+      file.complete = file.abort = file.error = false;
+      file.status = this.__effectiveI18n.uploading.status.held;
+      this._renderFileList();
+
+      this._uploadQueue.push(file);
+      this._processUploadQueue();
+    }
+
+    /**
+     * Process the upload queue by starting uploads for queued files
+     * if there is available capacity.
+     *
+     * @private
+     */
+    _processUploadQueue() {
+      // Process as many queued files as we have capacity for
+      while (this._uploadQueue.length > 0 && this._activeUploads < this.maxConcurrentUploads) {
+        const nextFile = this._uploadQueue.shift();
+        if (nextFile) {
+          this._uploadFile(nextFile);
+        }
+      }
+    }
+
+    /** @private */
+    _uploadFile(file) {
+      // Increment active uploads counter
+      this._activeUploads += 1;
+
       const ini = Date.now();
       const xhr = (file.xhr = this._createXhr());
 
@@ -740,11 +796,22 @@ export const UploadMixin = (superClass) =>
         this.dispatchEvent(new CustomEvent('upload-progress', { detail: { file, xhr } }));
       };
 
+      xhr.onabort = () => {
+        // Decrement active uploads counter
+        this._activeUploads -= 1;
+        this._processUploadQueue();
+      };
+
       // More reliable than xhr.onload
       xhr.onreadystatechange = () => {
         if (xhr.readyState === 4) {
           clearTimeout(stalledId);
           file.indeterminate = file.uploading = false;
+
+          // Decrement active uploads counter
+          this._activeUploads -= 1;
+          this._processUploadQueue();
+
           if (file.abort) {
             return;
           }
@@ -815,9 +882,8 @@ export const UploadMixin = (superClass) =>
       xhr.open(this.method, file.uploadTarget, true);
       this._configureXhr(xhr, file, isRawUpload);
 
+      file.held = false;
       file.status = this.__effectiveI18n.uploading.status.connecting;
-      file.uploading = file.indeterminate = true;
-      file.complete = file.abort = file.error = file.held = false;
 
       xhr.upload.onloadstart = () => {
         this.dispatchEvent(
@@ -862,7 +928,7 @@ export const UploadMixin = (superClass) =>
         }),
       );
       if (evt) {
-        this._uploadFile(file);
+        this._queueFileUpload(file);
         this._updateFocus(this.files.indexOf(file));
       }
     }
@@ -934,7 +1000,7 @@ export const UploadMixin = (superClass) =>
       this.files = [file, ...this.files];
 
       if (!this.noAuto) {
-        this._uploadFile(file);
+        this._queueFileUpload(file);
       }
     }
 
@@ -957,6 +1023,9 @@ export const UploadMixin = (superClass) =>
      * @protected
      */
     _removeFile(file) {
+      this._uploadQueue = this._uploadQueue.filter((f) => f !== file);
+      this._processUploadQueue();
+
       const fileIndex = this.files.indexOf(file);
       if (fileIndex >= 0) {
         this.files = this.files.filter((i) => i !== file);
@@ -998,7 +1067,7 @@ export const UploadMixin = (superClass) =>
 
     /** @private */
     _onFileStart(event) {
-      this._uploadFile(event.detail.file);
+      this._queueFileUpload(event.detail.file);
     }
 
     /** @private */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "25.0.2",
+  "version": "25.1.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -373,6 +373,15 @@
                 ]
               }
             },
+            {
+              "name": "max-concurrent-uploads",
+              "description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
+              "value": {
+                "type": [
+                  "number"
+                ]
+              }
+            },
             {
               "name": "capture",
               "description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
@@ -534,6 +543,15 @@
                   ]
                 }
               },
+              {
+                "name": "maxConcurrentUploads",
+                "description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
+                "value": {
+                  "type": [
+                    "number"
+                  ]
+                }
+              },
               {
                 "name": "capture",
                 "description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "25.0.2",
+  "version": "25.1.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -229,6 +229,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".maxConcurrentUploads",
+              "description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".capture",
               "description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",