@vaadin/upload 25.1.0-alpha6 → 25.1.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "25.1.0-alpha6",
+  "version": "25.1.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -23,6 +23,7 @@
     "src",
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "custom-elements.json",
     "web-types.json",
     "web-types.lit.json"
   ],
@@ -34,24 +35,25 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.1.0-alpha6",
-    "@vaadin/button": "25.1.0-alpha6",
-    "@vaadin/component-base": "25.1.0-alpha6",
-    "@vaadin/progress-bar": "25.1.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha6",
+    "@vaadin/a11y-base": "25.1.0-alpha8",
+    "@vaadin/button": "25.1.0-alpha8",
+    "@vaadin/component-base": "25.1.0-alpha8",
+    "@vaadin/progress-bar": "25.1.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.1.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.1.0-alpha6",
-    "@vaadin/chai-plugins": "25.1.0-alpha6",
-    "@vaadin/test-runner-commands": "25.1.0-alpha6",
+    "@vaadin/aura": "25.1.0-alpha8",
+    "@vaadin/chai-plugins": "25.1.0-alpha8",
+    "@vaadin/test-runner-commands": "25.1.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.1.0-alpha8",
     "sinon": "^21.0.0"
   },
+  "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "da6f4194492cbd77d18c6c1cd8d4d9f072e9ce8d"
+  "gitHead": "810590c9c7682a9326c9352df795b5ea4891a71f"
 }

package/src/vaadin-upload-button.js

@@ -70,7 +70,7 @@ import { UploadManager } from './vaadin-upload-manager.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * @customElement
+ * @customElement vaadin-upload-button
  * @extends HTMLElement
  * @mixes ButtonMixin
  * @mixes ElementMixin
@@ -128,7 +128,7 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
 
   /**
    * Whether the button is disabled.
-   * Returns true if either explicitly disabled or maxFilesReached is true.
+   * Returns true if either explicitly disabled, manager is disabled, or maxFilesReached is true.
    * @type {boolean}
    * @override
    */
@@ -138,8 +138,7 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
 
   set disabled(value) {
     this.__explicitDisabled = Boolean(value);
-    // Set super.disabled to effective value - this triggers Lit's property system correctly
-    super.disabled = this.__explicitDisabled || this.maxFilesReached;
+    super.disabled = this.__effectiveDisabled;
   }
 
   /** @protected */
@@ -182,6 +181,7 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
     // Clean up manager listener to prevent memory leaks
     if (this.manager instanceof UploadManager) {
       this.manager.removeEventListener('max-files-reached-changed', this.__syncFromManager);
+      this.manager.removeEventListener('disabled-changed', this.__syncFromManager);
     }
   }
 
@@ -192,8 +192,9 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
     // Re-attach manager listener when reconnected to DOM
     if (this.manager instanceof UploadManager) {
       this.manager.addEventListener('max-files-reached-changed', this.__syncFromManager);
-      this.__syncFromManager();
+      this.manager.addEventListener('disabled-changed', this.__syncFromManager);
     }
+    this.__syncFromManager();
   }
 
   /**
@@ -250,11 +251,13 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
     // Remove listener from old manager
     if (oldManager instanceof UploadManager) {
       oldManager.removeEventListener('max-files-reached-changed', this.__syncFromManager);
+      oldManager.removeEventListener('disabled-changed', this.__syncFromManager);
     }
 
     // Add listener to new manager and sync state only when connected
     if (this.isConnected && manager instanceof UploadManager) {
       manager.addEventListener('max-files-reached-changed', this.__syncFromManager);
+      manager.addEventListener('disabled-changed', this.__syncFromManager);
       this.__syncFromManager();
     } else if (this.isConnected) {
       // No manager - reset state
@@ -262,6 +265,13 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
     }
   }
 
+  /** @private */
+  get __effectiveDisabled() {
+    const noManager = !(this.manager instanceof UploadManager);
+    const managerDisabled = !noManager && this.manager.disabled;
+    return this.__explicitDisabled || noManager || managerDisabled || this.maxFilesReached;
+  }
+
   /** @private */
   __syncFromManager() {
     if (this.manager instanceof UploadManager) {
@@ -270,11 +280,7 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
       this.maxFilesReached = false;
     }
 
-    // Sync effective disabled state
-    const effectiveDisabled = this.__explicitDisabled || this.maxFilesReached;
-    if (super.disabled !== effectiveDisabled) {
-      super.disabled = effectiveDisabled;
-    }
+    super.disabled = this.__effectiveDisabled;
   }
 
   /** @override */

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

@@ -36,7 +36,7 @@ import type { UploadManager } from './vaadin-upload-manager.js';
  * Attribute          | Description
  * -------------------|--------------------------------------------
  * `dragover`         | Set when files are being dragged over the element
- * `disabled`         | Set when the drop zone is explicitly disabled
+ * `disabled`         | Set when the drop zone is effectively disabled
  * `max-files-reached`| Set when the manager has reached maxFiles
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
@@ -50,6 +50,7 @@ declare class UploadDropZone extends HTMLElement {
 
   /**
    * Whether the drop zone is disabled.
+   * Returns true if either explicitly disabled, manager is disabled, or no manager is set.
    */
   disabled: boolean;
 

package/src/vaadin-upload-drop-zone.js

@@ -42,12 +42,12 @@ import { UploadManager } from './vaadin-upload-manager.js';
  * Attribute          | Description
  * -------------------|--------------------------------------------
  * `dragover`         | Set when files are being dragged over the element
- * `disabled`         | Set when the drop zone is explicitly disabled
+ * `disabled`         | Set when the drop zone is effectively disabled
  * `max-files-reached`| Set when the manager has reached maxFiles
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * @customElement
+ * @customElement vaadin-upload-drop-zone
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
@@ -80,12 +80,12 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
 
       /**
        * Whether the drop zone is disabled.
+       * Returns true if either explicitly disabled, manager is disabled, or no manager is set.
        * @type {boolean}
        */
       disabled: {
         type: Boolean,
         value: false,
-        reflect: true,
       },
 
       /**
@@ -110,9 +110,27 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
     };
   }
 
+  /**
+   * Whether the drop zone is disabled.
+   * Returns true if either explicitly disabled, manager is disabled, or no manager is set.
+   * @type {boolean}
+   * @override
+   */
+  get disabled() {
+    return this.__effectiveDisabled;
+  }
+
+  set disabled(value) {
+    if (this.__syncingDisabled) return;
+    this.__explicitDisabled = Boolean(value);
+    this.__syncDisabledState();
+  }
+
   constructor() {
     super();
+    this.__explicitDisabled = false;
     this.__onMaxFilesReachedChanged = this.__onMaxFilesReachedChanged.bind(this);
+    this.__syncDisabledState = this.__syncDisabledState.bind(this);
   }
 
   /** @protected */
@@ -128,9 +146,10 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    // Clean up manager listener to prevent memory leaks
+    // Clean up manager listeners to prevent memory leaks
     if (this.manager instanceof UploadManager) {
       this.manager.removeEventListener('max-files-reached-changed', this.__onMaxFilesReachedChanged);
+      this.manager.removeEventListener('disabled-changed', this.__syncDisabledState);
     }
   }
 
@@ -138,13 +157,15 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
   connectedCallback() {
     super.connectedCallback();
 
-    // Re-attach manager listener when reconnected to DOM
+    // Re-attach manager listeners when reconnected to DOM
     if (this.manager instanceof UploadManager) {
       this.manager.addEventListener('max-files-reached-changed', this.__onMaxFilesReachedChanged);
+      this.manager.addEventListener('disabled-changed', this.__syncDisabledState);
 
-      // Sync maxFilesReached state with current manager state
+      // Sync state with current manager state
       this.maxFilesReached = !!this.manager.maxFilesReached;
     }
+    this.__syncDisabledState();
   }
 
   /** @protected */
@@ -152,14 +173,19 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
     return html`<slot></slot>`;
   }
 
+  /** @private */
+  get __effectiveDisabled() {
+    const noManager = !(this.manager instanceof UploadManager);
+    return this.__explicitDisabled || noManager || this.manager.disabled || this.maxFilesReached;
+  }
+
   /** @private */
   __onDragover(event) {
     event.preventDefault();
-    const effectiveDisabled = this.disabled || this.maxFilesReached;
-    if (!effectiveDisabled) {
+    if (!this.__effectiveDisabled) {
       this.__dragover = true;
     }
-    event.dataTransfer.dropEffect = effectiveDisabled ? 'none' : 'copy';
+    event.dataTransfer.dropEffect = this.__effectiveDisabled ? 'none' : 'copy';
   }
 
   /** @private */
@@ -167,7 +193,7 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
     event.preventDefault();
     // Only remove dragover if we're actually leaving the drop zone
     // (not just entering a child element)
-    if (event.relatedTarget && this.contains(event.relatedTarget)) {
+    if (event.target !== this) {
       return;
     }
     this.__dragover = false;
@@ -178,9 +204,7 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
     event.preventDefault();
     this.__dragover = false;
 
-    // If we have a manager and not disabled, add the files
-    const effectiveDisabled = this.disabled || this.maxFilesReached;
-    if (!effectiveDisabled && this.manager instanceof UploadManager) {
+    if (!this.__effectiveDisabled) {
       const files = await getFilesFromDropEvent(event);
       this.manager.addFiles(files);
     }
@@ -188,25 +212,40 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
 
   /** @private */
   __managerChanged(manager, oldManager) {
-    // Remove listener from old manager
+    // Remove listeners from old manager
     if (oldManager instanceof UploadManager) {
       oldManager.removeEventListener('max-files-reached-changed', this.__onMaxFilesReachedChanged);
+      oldManager.removeEventListener('disabled-changed', this.__syncDisabledState);
     }
 
-    // Add listener to new manager
+    // Add listeners to new manager
     if (this.isConnected && manager instanceof UploadManager) {
       manager.addEventListener('max-files-reached-changed', this.__onMaxFilesReachedChanged);
+      manager.addEventListener('disabled-changed', this.__syncDisabledState);
 
-      // Sync initial state if manager has maxFilesReached property
+      // Sync initial state
       this.maxFilesReached = !!manager.maxFilesReached;
     } else {
       this.maxFilesReached = false;
     }
+
+    if (this.isConnected) {
+      this.__syncDisabledState();
+    }
   }
 
   /** @private */
   __onMaxFilesReachedChanged(event) {
     this.maxFilesReached = event.detail.value;
+    this.__syncDisabledState();
+  }
+
+  /** @private */
+  __syncDisabledState() {
+    if (!this.isConnected) return;
+    this.__syncingDisabled = true;
+    this.toggleAttribute('disabled', this.__effectiveDisabled);
+    this.__syncingDisabled = false;
   }
 }
 

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

@@ -34,6 +34,7 @@ const DEFAULT_I18N = {
       serverUnavailable: 'Upload failed, please try again later',
       unexpectedServerError: 'Upload failed due to server error',
       forbidden: 'Upload forbidden',
+      fileTooLarge: 'File is too large',
     },
   },
   units: {
@@ -88,6 +89,7 @@ export const UploadFileListMixin = (superClass) =>
     constructor() {
       super();
       this.__onManagerFilesChanged = this.__onManagerFilesChanged.bind(this);
+      this.__onManagerDisabledChanged = this.__onManagerDisabledChanged.bind(this);
       this.__onFileRetry = this.__onFileRetry.bind(this);
       this.__onFileAbort = this.__onFileAbort.bind(this);
       this.__onFileStart = this.__onFileStart.bind(this);
@@ -112,6 +114,7 @@ export const UploadFileListMixin = (superClass) =>
       // Clean up manager listener to prevent memory leaks
       if (this.manager instanceof UploadManager) {
         this.manager.removeEventListener('files-changed', this.__onManagerFilesChanged);
+        this.manager.removeEventListener('disabled-changed', this.__onManagerDisabledChanged);
       }
     }
 
@@ -122,8 +125,9 @@ export const UploadFileListMixin = (superClass) =>
       // Re-attach manager listener when reconnected to DOM
       if (this.manager instanceof UploadManager) {
         this.manager.addEventListener('files-changed', this.__onManagerFilesChanged);
+        this.manager.addEventListener('disabled-changed', this.__onManagerDisabledChanged);
 
-        // Sync state with current manager files
+        // Sync state with current manager
         this.__syncFromManager();
       }
     }
@@ -133,11 +137,13 @@ export const UploadFileListMixin = (superClass) =>
       // Remove listeners from old manager
       if (oldManager instanceof UploadManager) {
         oldManager.removeEventListener('files-changed', this.__onManagerFilesChanged);
+        oldManager.removeEventListener('disabled-changed', this.__onManagerDisabledChanged);
       }
 
       // Add listeners to new manager only when connected
       if (this.isConnected && manager instanceof UploadManager) {
         manager.addEventListener('files-changed', this.__onManagerFilesChanged);
+        manager.addEventListener('disabled-changed', this.__onManagerDisabledChanged);
 
         // Sync initial state
         this.__syncFromManager();
@@ -152,6 +158,11 @@ export const UploadFileListMixin = (superClass) =>
       this.__syncFromManager();
     }
 
+    /** @private */
+    __onManagerDisabledChanged() {
+      this.requestContentUpdate();
+    }
+
     /** @private */
     __syncFromManager() {
       if (this.manager instanceof UploadManager) {
@@ -322,6 +333,8 @@ export const UploadFileListMixin = (superClass) =>
     /** @private */
     requestContentUpdate() {
       const { items, __effectiveI18n: i18n, disabled } = this;
+      const managerDisabled = this.manager instanceof UploadManager && this.manager.disabled;
+      const effectiveDisabled = disabled || managerDisabled;
 
       render(
         html`
@@ -329,7 +342,7 @@ export const UploadFileListMixin = (superClass) =>
             (file) => html`
               <li>
                 <vaadin-upload-file
-                  .disabled="${disabled}"
+                  .disabled="${effectiveDisabled}"
                   .file="${file}"
                   .complete="${file.complete}"
                   .errorMessage="${file.error}"
@@ -340,7 +353,11 @@ export const UploadFileListMixin = (superClass) =>
                   .status="${file.status}"
                   .uploading="${file.uploading}"
                   .i18n="${i18n}"
-                  theme="${ifDefined(this._theme)}"
+                  theme="${ifDefined(
+                    window.Vaadin.featureFlags.modularUpload || window.Vaadin.featureFlags.aiComponents
+                      ? this._theme
+                      : undefined,
+                  )}"
                 ></vaadin-upload-file>
               </li>
             `,

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

@@ -75,7 +75,7 @@ import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * @customElement
+ * @customElement vaadin-upload-file-list
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes UploadFileListMixin

package/src/vaadin-upload-file.js

@@ -77,7 +77,7 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * @customElement
+ * @customElement vaadin-upload-file
  * @extends HTMLElement
  * @mixes UploadFileMixin
  * @mixes ThemableMixin

package/src/vaadin-upload-icon.js

@@ -12,7 +12,7 @@ import { uploadIconStyles } from './styles/vaadin-upload-icon-base-styles.js';
 /**
  * An element used internally by `<vaadin-upload>`. Not intended to be used separately.
  *
- * @customElement
+ * @customElement vaadin-upload-icon
  * @extends HTMLElement
  * @private
  */

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

@@ -9,7 +9,13 @@ export type UploadFormat = 'raw' | 'multipart';
 
 export type FileRejectError = 'tooManyFiles' | 'fileIsTooBig' | 'incorrectFileType';
 
-export type UploadErrorKey = 'timeout' | 'serverUnavailable' | 'unexpectedServerError' | 'forbidden' | 'sendFailed';
+export type UploadErrorKey =
+  | 'timeout'
+  | 'serverUnavailable'
+  | 'unexpectedServerError'
+  | 'forbidden'
+  | 'sendFailed'
+  | 'fileTooLarge';
 
 export interface UploadFile extends File {
   uploadTarget: string;
@@ -125,6 +131,13 @@ export interface UploadManagerOptions {
    * @default 'file'
    */
   formDataName?: string;
+
+  /**
+   * Whether the upload manager is disabled.
+   * When true, connected components (upload-button, upload-drop-zone) will be automatically disabled.
+   * @default false
+   */
+  disabled?: boolean;
 }
 
 export interface UploadManagerEventMap {
@@ -147,6 +160,7 @@ export interface UploadManagerEventMap {
   'upload-abort': CustomEvent<{ file: UploadFile; xhr: XMLHttpRequest }>;
   'files-changed': CustomEvent<{ value: UploadFile[] }>;
   'max-files-reached-changed': CustomEvent<{ value: boolean }>;
+  'disabled-changed': CustomEvent<{ value: boolean }>;
 }
 
 /**
@@ -292,6 +306,12 @@ export class UploadManager extends EventTarget {
    */
   readonly maxFilesReached: boolean;
 
+  /**
+   * Whether the upload manager is disabled.
+   * When true, connected components (upload-button, upload-drop-zone) will be automatically disabled.
+   */
+  disabled: boolean;
+
   /**
    * Add files to the upload list.
    */

package/src/vaadin-upload-manager.js

@@ -4,11 +4,19 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+window.Vaadin = window.Vaadin || {};
+window.Vaadin.featureFlags = window.Vaadin.featureFlags || {};
+
 /**
  * A pure JavaScript class that manages file upload state and XHR requests.
  * It has no knowledge of UI components - components should listen to events and
  * call methods to interact with the manager.
  *
+ * **Note:** This class is experimental and requires the `modularUpload` or `aiComponents` feature flag to be enabled:
+ * ```javascript
+ * window.Vaadin.featureFlags.modularUpload = true;
+ * ```
+ *
  * @example
  * ```javascript
  * import { UploadManager } from '@vaadin/upload';
@@ -50,6 +58,7 @@
  * @fires {CustomEvent} upload-abort - Fired when abort is requested
  * @fires {CustomEvent} files-changed - Fired when the files array changes
  * @fires {CustomEvent} max-files-reached-changed - Fired when maxFilesReached changes
+ * @fires {CustomEvent} disabled-changed - Fired when disabled changes
  */
 export class UploadManager extends EventTarget {
   /** @type {Array<UploadFile>} */
@@ -58,6 +67,9 @@ export class UploadManager extends EventTarget {
   /** @type {boolean} */
   #maxFilesReached = false;
 
+  /** @type {boolean} */
+  #disabled = false;
+
   /** @type {Array<UploadFile>} */
   #uploadQueue = [];
 
@@ -91,10 +103,17 @@ export class UploadManager extends EventTarget {
    * @param {string} [options.uploadFormat='raw'] - Specifies the upload format to use when sending files to the server. 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default). 'multipart': Send file using multipart/form-data encoding.
    * @param {number} [options.maxConcurrentUploads=3] - 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.
    * @param {string} [options.formDataName='file'] - Specifies the 'name' property at Content-Disposition for multipart uploads. This property is ignored when uploadFormat is 'raw'.
+   * @param {boolean} [options.disabled=false] - Whether the upload manager is disabled. When true, connected components (upload-button, upload-drop-zone) will be automatically disabled.
    */
   constructor(options = {}) {
     super();
 
+    if (!window.Vaadin.featureFlags.modularUpload && !window.Vaadin.featureFlags.aiComponents) {
+      throw new Error(
+        'UploadManager requires the modularUpload feature flag. Enable it with: window.Vaadin.featureFlags.modularUpload = true',
+      );
+    }
+
     // Configuration properties - use setters for validation
     this.target = options.target || '';
     this.method = options.method || 'POST';
@@ -108,6 +127,7 @@ export class UploadManager extends EventTarget {
     this.uploadFormat = options.uploadFormat || 'raw';
     this.maxConcurrentUploads = options.maxConcurrentUploads === undefined ? 3 : options.maxConcurrentUploads;
     this.formDataName = options.formDataName || 'file';
+    this.disabled = options.disabled === undefined ? false : options.disabled;
   }
 
   /**
@@ -241,6 +261,27 @@ export class UploadManager extends EventTarget {
     return this.#maxFilesReached;
   }
 
+  /**
+   * Whether the upload manager is disabled.
+   * When true, connected components (upload-button, upload-drop-zone) will be automatically disabled.
+   * @type {boolean}
+   */
+  get disabled() {
+    return this.#disabled;
+  }
+
+  set disabled(value) {
+    const disabled = Boolean(value);
+    if (disabled !== this.#disabled) {
+      this.#disabled = disabled;
+      this.dispatchEvent(
+        new CustomEvent('disabled-changed', {
+          detail: { value: disabled },
+        }),
+      );
+    }
+  }
+
   /**
    * Add files to the upload list.
    * @param {FileList|File[]} files - Files to add
@@ -503,6 +544,8 @@ export class UploadManager extends EventTarget {
           file.errorKey = 'serverUnavailable';
         } else if (xhr.status >= 500) {
           file.errorKey = 'unexpectedServerError';
+        } else if (xhr.status === 413) {
+          file.errorKey = 'fileTooLarge';
         } else if (xhr.status >= 400) {
           file.errorKey = 'forbidden';
         }

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

@@ -54,6 +54,7 @@ export interface UploadI18n {
       serverUnavailable?: string;
       unexpectedServerError?: string;
       forbidden?: string;
+      fileTooLarge?: string;
     };
   };
   units?: {

package/src/vaadin-upload-mixin.js

@@ -39,6 +39,7 @@ export const DEFAULT_I18N = {
       serverUnavailable: 'Upload failed, please try again later',
       unexpectedServerError: 'Upload failed due to server error',
       forbidden: 'Upload forbidden',
+      fileTooLarge: 'File is too large',
     },
   },
   file: {
@@ -590,7 +591,12 @@ export const UploadMixin = (superClass) =>
         list.items = [...files];
         list.i18n = effectiveI18n;
         list.disabled = disabled;
-        if (this._theme) {
+        if (
+          window.Vaadin &&
+          window.Vaadin.featureFlags &&
+          (window.Vaadin.featureFlags.modularUpload || window.Vaadin.featureFlags.aiComponents) &&
+          this._theme
+        ) {
           list.setAttribute('theme', this._theme);
         } else {
           list.removeAttribute('theme');
@@ -790,6 +796,8 @@ export const UploadMixin = (superClass) =>
             file.error = this.__effectiveI18n.uploading.error.serverUnavailable;
           } else if (xhr.status >= 500) {
             file.error = this.__effectiveI18n.uploading.error.unexpectedServerError;
+          } else if (xhr.status === 413) {
+            file.error = this.__effectiveI18n.uploading.error.fileTooLarge;
           } else if (xhr.status >= 400) {
             file.error = this.__effectiveI18n.uploading.error.forbidden;
           }

package/src/vaadin-upload.js

@@ -101,7 +101,7 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
  * @fires {CustomEvent} upload-retry - Fired when retry upload is requested.
  * @fires {CustomEvent} upload-abort - Fired when upload abort is requested.
  *
- * @customElement
+ * @customElement vaadin-upload
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin