@vaadin/upload 25.0.3 → 25.1.0-alpha2

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

@@ -8,6 +8,7 @@ import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 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';
+import { getFilesFromDropEvent } from './vaadin-upload-helpers.js';
 
 export const DEFAULT_I18N = {
   dropFiles: {
@@ -322,6 +323,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 +362,18 @@ export const UploadMixin = (superClass) =>
         _files: {
           type: Array,
         },
+
+        /** @private */
+        _uploadQueue: {
+          type: Array,
+          value: () => [],
+        },
+
+        /** @private */
+        _activeUploads: {
+          type: Number,
+          value: 0,
+        },
       };
     }
 
@@ -590,59 +617,11 @@ export const UploadMixin = (superClass) =>
         event.preventDefault();
         this._dragover = this._dragoverValid = false;
 
-        const files = await this.__getFilesFromDropEvent(event);
+        const files = await getFilesFromDropEvent(event);
         this._addFiles(files);
       }
     }
 
-    /**
-     * Get the files from the drop event. The dropped items may contain a
-     * combination of files and directories. If a dropped item is a directory,
-     * it will be recursively traversed to get all files.
-     *
-     * @param {!DragEvent} dropEvent - The drop event
-     * @returns {Promise<File[]>} - The files from the drop event
-     * @private
-     */
-    __getFilesFromDropEvent(dropEvent) {
-      async function getFilesFromEntry(entry) {
-        if (entry.isFile) {
-          return new Promise((resolve) => {
-            // In case of an error, resolve without any files
-            entry.file(resolve, () => resolve([]));
-          });
-        } else if (entry.isDirectory) {
-          const reader = entry.createReader();
-          const entries = await new Promise((resolve) => {
-            // In case of an error, resolve without any files
-            reader.readEntries(resolve, () => resolve([]));
-          });
-          const files = await Promise.all(entries.map(getFilesFromEntry));
-          return files.flat();
-        }
-      }
-
-      // In some cases (like dragging attachments from Outlook on Windows), "webkitGetAsEntry"
-      // can return null for "dataTransfer" items. Also, there is no reason to check for
-      // "webkitGetAsEntry" when there are no folders. Therefore, "dataTransfer.files" is used
-      // to handle such cases.
-      const containsFolders = Array.from(dropEvent.dataTransfer.items)
-        .filter((item) => !!item)
-        .filter((item) => typeof item.webkitGetAsEntry === 'function')
-        .map((item) => item.webkitGetAsEntry())
-        .some((entry) => !!entry && entry.isDirectory);
-      if (!containsFolders) {
-        return Promise.resolve(dropEvent.dataTransfer.files ? Array.from(dropEvent.dataTransfer.files) : []);
-      }
-
-      const filePromises = Array.from(dropEvent.dataTransfer.items)
-        .map((item) => item.webkitGetAsEntry())
-        .filter((entry) => !!entry)
-        .map(getFilesFromEntry);
-
-      return Promise.all(filePromises).then((files) => files.flat());
-    }
-
     /** @private */
     _createXhr() {
       return new XMLHttpRequest();
@@ -694,16 +673,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 +749,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 +835,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 +881,7 @@ export const UploadMixin = (superClass) =>
         }),
       );
       if (evt) {
-        this._uploadFile(file);
+        this._queueFileUpload(file);
         this._updateFocus(this.files.indexOf(file));
       }
     }
@@ -934,7 +953,7 @@ export const UploadMixin = (superClass) =>
       this.files = [file, ...this.files];
 
       if (!this.noAuto) {
-        this._uploadFile(file);
+        this._queueFileUpload(file);
       }
     }
 
@@ -957,6 +976,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 +1020,7 @@ export const UploadMixin = (superClass) =>
 
     /** @private */
     _onFileStart(event) {
-      this._uploadFile(event.detail.file);
+      this._queueFileUpload(event.detail.file);
     }
 
     /** @private */

package/vaadin-upload-button.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-upload-button.js';

package/vaadin-upload-button.js

@@ -0,0 +1,3 @@
+import './src/vaadin-upload-button.js';
+
+export * from './src/vaadin-upload-button.js';

package/vaadin-upload-drop-zone.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-upload-drop-zone.js';

package/vaadin-upload-drop-zone.js

@@ -0,0 +1,3 @@
+import './src/vaadin-upload-drop-zone.js';
+
+export * from './src/vaadin-upload-drop-zone.js';

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

@@ -0,0 +1 @@
+export * from './src/vaadin-upload-file-list.js';

package/vaadin-upload-file-list.js

@@ -0,0 +1,3 @@
+import './src/vaadin-upload-file-list.js';
+
+export * from './src/vaadin-upload-file-list.js';

package/vaadin-upload-manager.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-upload-manager.js';

package/vaadin-upload-manager.js

@@ -0,0 +1 @@
+export * from './src/vaadin-upload-manager.js';

package/web-types.json

@@ -1,11 +1,167 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "25.0.3",
+  "version": "25.1.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "vaadin-upload-button",
+          "description": "`<vaadin-upload-button>` is a button component for file uploads.\nWhen clicked, it opens a file picker dialog and calls addFiles\non a linked UploadManager.\n\n```html\n<vaadin-upload-button>Upload Files</vaadin-upload-button>\n```\n\nThe button must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst button = document.querySelector('vaadin-upload-button');\nbutton.manager = uploadManager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label`   | The label (text) inside the button.\n`prefix`  | A slot for content before the label (e.g. an icon).\n`suffix`  | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`active`       | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled`     | Set when the button is disabled\n`focus-ring`   | Set when the button is focused using the keyboard\n`focused`      | Set when the button is focused\n`has-tooltip`  | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-button-background`     |\n| `--vaadin-button-border-color`   |\n| `--vaadin-button-border-radius`  |\n| `--vaadin-button-border-width`   |\n| `--vaadin-button-font-size`      |\n| `--vaadin-button-font-weight`    |\n| `--vaadin-button-gap`            |\n| `--vaadin-button-height`         |\n| `--vaadin-button-line-height`    |\n| `--vaadin-button-margin`         |\n| `--vaadin-button-padding`        |\n| `--vaadin-button-text-color`     |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "capture",
+              "description": "Capture attribute for mobile file input.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
+            {
+              "name": "max-files-reached",
+              "description": "True when max files has been reached on the manager.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "Whether the button is disabled.\nReturns true if either explicitly disabled or maxFilesReached is true.",
+                "value": {
+                  "type": [
+                    "?"
+                  ]
+                }
+              },
+              {
+                "name": "manager",
+                "description": "Reference to an UploadManager.\nWhen set, the button will automatically disable when maxFilesReached\nbecomes true on the manager.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null"
+                  ]
+                }
+              },
+              {
+                "name": "capture",
+                "description": "Capture attribute for mobile file input.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "maxFilesReached",
+                "description": "True when max files has been reached on the manager.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "vaadin-upload-drop-zone",
+          "description": "`<vaadin-upload-drop-zone>` is a Web Component that can be used as a drop zone\nfor file uploads. When files are dropped on the drop zone, they are added to\na linked UploadManager.\n\n```html\n<vaadin-upload-drop-zone>\n  <p>Drop files here</p>\n</vaadin-upload-drop-zone>\n```\n\nThe drop zone must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst dropZone = document.querySelector('vaadin-upload-drop-zone');\ndropZone.manager = uploadManager;\n```\n\n### Styling\n\nThe component has no styling by default. When files are dragged over,\nthe `dragover` attribute is set and the component uses a hover effect.\nTo override the hover effect, use `vaadin-upload-drop-zone[dragover]::after`\nselector to style the pseudo-element covering the drop zone during dragover.\n\nAttribute          | Description\n-------------------|--------------------------------------------\n`dragover`         | Set when files are being dragged over the element\n`disabled`         | Set when the drop zone is explicitly disabled\n`max-files-reached`| Set when the manager has reached maxFiles\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "Whether the drop zone is disabled.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "max-files-reached",
+              "description": "True when max files has been reached on the manager.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "manager",
+                "description": "Reference to an UploadManager.\nWhen set, dropped files will be automatically added to the manager.",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null"
+                  ]
+                }
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the drop zone is disabled.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
+              {
+                "name": "maxFilesReached",
+                "description": "True when max files has been reached on the manager.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "vaadin-upload-file",
           "description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|-------------\n`done-icon`      | File done status icon\n`warning-icon`   | File warning status icon\n`meta`           | Container for file name, status and error messages\n`name`           | File name\n`error`          | Error message, shown when error happens\n`status`         | Status message\n`commands`       | Container for file command buttons\n`start-button`   | Start file upload button\n`retry-button`   | Retry file upload button\n`remove-button`  | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|-------------\n`disabled`       | Set when the element is disabled\n`focus-ring`     | Set when the element is focused using the keyboard.\n`focused`        | Set when the element is focused.\n`error`          | An error has happened during uploading.\n`indeterminate`  | Uploading is in progress, but the progress value is unknown.\n`uploading`      | Uploading is in progress.\n`complete`       | Uploading has finished successfully.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n`--vaadin-upload-file-border-radius`         |\n`--vaadin-upload-file-button-background`     |\n`--vaadin-upload-file-button-border-color`   |\n`--vaadin-upload-file-button-border-radius`  |\n`--vaadin-upload-file-button-border-width`   |\n`--vaadin-upload-file-button-text-color`     |\n`--vaadin-upload-file-button-padding`        |\n`--vaadin-upload-file-done-color`            |\n`--vaadin-upload-file-error-color`           |\n`--vaadin-upload-file-error-font-size`       |\n`--vaadin-upload-file-error-font-weight`     |\n`--vaadin-upload-file-error-line-height`     |\n`--vaadin-upload-file-gap`                   |\n`--vaadin-upload-file-name-color`            |\n`--vaadin-upload-file-name-font-size`        |\n`--vaadin-upload-file-name-font-weight`      |\n`--vaadin-upload-file-name-line-height`      |\n`--vaadin-upload-file-padding`               |\n`--vaadin-upload-file-status-color`          |\n`--vaadin-upload-file-status-font-size`      |\n`--vaadin-upload-file-status-font-weight`    |\n`--vaadin-upload-file-status-line-height`    |\n`--vaadin-upload-file-warning-color`         |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
@@ -261,6 +417,89 @@
             ]
           }
         },
+        {
+          "name": "vaadin-upload-file-list",
+          "description": "`<vaadin-upload-file-list>` is a Web Component that displays a list of uploaded files.\nIt automatically syncs files from the manager and forwards file events back to it.\n\n```html\n<vaadin-upload-file-list></vaadin-upload-file-list>\n```\n\nThe file list must be linked to an UploadManager by setting the `manager` property:\n\n```javascript\nimport { UploadManager } from '@vaadin/upload/vaadin-upload-manager.js';\n\nconst manager = new UploadManager({ target: '/api/upload' });\nconst fileList = document.querySelector('vaadin-upload-file-list');\nfileList.manager = manager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`list`    | The `<ul>` element wrapping the file items\n\nThe following state attributes are available for styling:\n\nAttribute  | Description\n-----------|-------------\n`disabled` | Set when the element is disabled\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n`--vaadin-upload-file-list-divider-color`    |\n`--vaadin-upload-file-list-divider-width`    |\n`--vaadin-upload-file-border-radius`         |\n`--vaadin-upload-file-button-background`     |\n`--vaadin-upload-file-button-border-color`   |\n`--vaadin-upload-file-button-border-radius`  |\n`--vaadin-upload-file-button-border-width`   |\n`--vaadin-upload-file-button-text-color`     |\n`--vaadin-upload-file-button-padding`        |\n`--vaadin-upload-file-done-color`            |\n`--vaadin-upload-file-error-color`           |\n`--vaadin-upload-file-error-font-size`       |\n`--vaadin-upload-file-error-font-weight`     |\n`--vaadin-upload-file-error-line-height`     |\n`--vaadin-upload-file-gap`                   |\n`--vaadin-upload-file-name-color`            |\n`--vaadin-upload-file-name-font-size`        |\n`--vaadin-upload-file-name-font-weight`      |\n`--vaadin-upload-file-name-line-height`      |\n`--vaadin-upload-file-padding`               |\n`--vaadin-upload-file-status-color`          |\n`--vaadin-upload-file-status-font-size`      |\n`--vaadin-upload-file-status-font-weight`    |\n`--vaadin-upload-file-status-line-height`    |\n`--vaadin-upload-file-warning-color`         |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+              "value": {
+                "type": [
+                  "Object"
+                ]
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
+                "value": {
+                  "type": [
+                    "Object"
+                  ]
+                }
+              },
+              {
+                "name": "items",
+                "description": "The array of files being processed, or already uploaded.",
+                "value": {
+                  "type": [
+                    "Array",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "manager",
+                "description": "Reference to an UploadManager to link this file list to.\nWhen set, the file list automatically:\n- Syncs files from the manager\n- Forwards retry/abort/start/remove events back to the manager",
+                "value": {
+                  "type": [
+                    "Object",
+                    "null"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "vaadin-upload",
           "description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```html\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name          | Description\n-------------------|-------------------------------------\n`primary-buttons`  | Upload container\n`drop-label`       | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute            | Description\n---------------------|---------------------------------\n`disabled`           | Set when the element is disabled\n`nodrop`             | Set when drag and drop is disabled (e.g., on touch devices)\n`dragover`           | Set when the file is being dragged over the element\n`dragover-valid`     | Set when the dragged file is valid with `maxFiles` and `accept` criteria\n`max-files-reached`  | Set when maximum number of files that the user is allowed to add has been reached\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                          |\n:--------------------------------------------|\n`--vaadin-upload-background`                 |\n`--vaadin-upload-border-color`               |\n`--vaadin-upload-border-radius`              |\n`--vaadin-upload-border-width`               |\n`--vaadin-upload-gap`                        |\n`--vaadin-upload-padding`                    |\n`--vaadin-upload-drop-label-color`           |\n`--vaadin-upload-drop-label-font-size`       |\n`--vaadin-upload-drop-label-font-weight`     |\n`--vaadin-upload-drop-label-gap`             |\n`--vaadin-upload-drop-label-line-height`     |\n`--vaadin-upload-file-list-divider-color`    |\n`--vaadin-upload-file-list-divider-width`    |\n`--vaadin-upload-file-border-radius`         |\n`--vaadin-upload-file-button-background`     |\n`--vaadin-upload-file-button-border-color`   |\n`--vaadin-upload-file-button-border-radius`  |\n`--vaadin-upload-file-button-border-width`   |\n`--vaadin-upload-file-button-text-color`     |\n`--vaadin-upload-file-button-padding`        |\n`--vaadin-upload-file-done-color`            |\n`--vaadin-upload-file-error-color`           |\n`--vaadin-upload-file-error-font-size`       |\n`--vaadin-upload-file-error-font-weight`     |\n`--vaadin-upload-file-error-line-height`     |\n`--vaadin-upload-file-gap`                   |\n`--vaadin-upload-file-name-color`            |\n`--vaadin-upload-file-name-font-size`        |\n`--vaadin-upload-file-name-font-weight`      |\n`--vaadin-upload-file-name-line-height`      |\n`--vaadin-upload-file-padding`               |\n`--vaadin-upload-file-status-color`          |\n`--vaadin-upload-file-status-font-size`      |\n`--vaadin-upload-file-status-font-weight`    |\n`--vaadin-upload-file-status-line-height`    |\n`--vaadin-upload-file-warning-color`         |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
@@ -373,6 +612,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 +782,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.",