@vaadin/upload 25.0.1 → 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.1",
+  "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.1",
-    "@vaadin/button": "~25.0.1",
-    "@vaadin/component-base": "~25.0.1",
-    "@vaadin/progress-bar": "~25.0.1",
-    "@vaadin/vaadin-themable-mixin": "~25.0.1",
+    "@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.1",
-    "@vaadin/test-runner-commands": "~25.0.1",
+    "@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.1",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha1",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ced28c07a8abee586510349b312452c8a555fd10"
+  "gitHead": "c789cdd350bcd74b280268a83f5475ad7f2f65e1"
 }

package/src/styles/vaadin-upload-base-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/styles/vaadin-upload-base-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/component-base/src/styles/style-props.js';

package/src/styles/vaadin-upload-file-base-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/styles/vaadin-upload-file-base-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/component-base/src/styles/style-props.js';

package/src/styles/vaadin-upload-file-list-base-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/styles/vaadin-upload-file-list-base-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/component-base/src/styles/style-props.js';

package/src/styles/vaadin-upload-icon-base-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/styles/vaadin-upload-icon-base-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/component-base/src/styles/style-props.js';

package/src/vaadin-upload-file-list-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, render } from 'lit';

package/src/vaadin-upload-file-list.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-upload-file.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

package/src/vaadin-upload-file-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';

package/src/vaadin-upload-file.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/progress-bar/src/vaadin-progress-bar.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-icon.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';

package/src/vaadin-upload-icons.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 const template = document.createElement('template');

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { announce } from '@vaadin/a11y-base/src/announce.js';
@@ -9,7 +9,7 @@ import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
-const DEFAULT_I18N = {
+export const DEFAULT_I18N = {
   dropFiles: {
     one: 'Drop file here',
     many: 'Drop files here',
@@ -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/src/vaadin-upload.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/src/vaadin-upload.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2025 Vaadin Ltd.
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-button.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "25.0.1",
+  "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.1",
+  "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.",