@vaadin/upload 25.2.7 → 25.3.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "25.2.7",
+  "version": "25.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -35,19 +35,19 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.2.7",
-    "@vaadin/button": "~25.2.7",
-    "@vaadin/component-base": "~25.2.7",
-    "@vaadin/progress-bar": "~25.2.7",
-    "@vaadin/vaadin-themable-mixin": "~25.2.7",
+    "@vaadin/a11y-base": "25.3.0-alpha10",
+    "@vaadin/button": "25.3.0-alpha10",
+    "@vaadin/component-base": "25.3.0-alpha10",
+    "@vaadin/progress-bar": "25.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.2.7",
-    "@vaadin/chai-plugins": "~25.2.7",
-    "@vaadin/test-runner-commands": "~25.2.7",
+    "@vaadin/aura": "25.3.0-alpha10",
+    "@vaadin/chai-plugins": "25.3.0-alpha10",
+    "@vaadin/test-runner-commands": "25.3.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.2.7",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "14be1af674f3968cce68c6eb4742340694c4a949"
+  "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
 }

package/src/vaadin-upload-button.js

@@ -6,6 +6,7 @@
 import { html, LitElement } from 'lit';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -70,6 +71,7 @@ import { UploadManager } from './vaadin-upload-manager.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-upload-button
  * @extends HTMLElement
  */
@@ -213,22 +215,14 @@ class UploadButton extends ButtonMixin(ElementMixin(ThemableMixin(PolylitMixin(L
 
     // Set accept attribute from manager
     const accept = this.manager && this.manager.accept;
-    if (accept) {
-      fileInput.setAttribute('accept', accept);
-    } else {
-      fileInput.removeAttribute('accept');
-    }
+    setOrRemoveAttribute(fileInput, 'accept', accept);
 
     // Set multiple attribute based on manager's maxFiles
     const maxFiles = this.manager && this.manager.maxFiles != null ? this.manager.maxFiles : Infinity;
     fileInput.multiple = maxFiles !== 1;
 
     // Set capture attribute
-    if (this.capture) {
-      fileInput.setAttribute('capture', this.capture);
-    } else {
-      fileInput.removeAttribute('capture');
-    }
+    setOrRemoveAttribute(fileInput, 'capture', this.capture);
   }
 
   /** @private */

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

@@ -47,6 +47,7 @@ import { UploadManager } from './vaadin-upload-manager.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-upload-drop-zone
  * @extends HTMLElement
  */

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

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

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

@@ -6,9 +6,10 @@
 import { html, render } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
+import { translateErrorKey, updateFileStatus } from './vaadin-upload-helpers.js';
 import { UploadManager } from './vaadin-upload-manager.js';
 
-const DEFAULT_I18N = {
+export const DEFAULT_I18N = {
   file: {
     retry: 'Retry',
     start: 'Start',
@@ -267,124 +268,30 @@ export const UploadFileListMixin = (superClass) =>
     __applyI18nToFile(file) {
       const i18n = this.__effectiveI18n;
 
-      // Always set size-related strings when total is available
-      if (file.total) {
-        this.__applyFileSizeStrings(file);
-      }
-
-      // Apply status messages based on file state
-      file.status = this.__getFileStatus(file, i18n);
+      // Apply size and status strings based on file state
+      updateFileStatus(file, i18n, { indeterminateFirst: true });
 
       // Translate error codes to i18n messages
       this.__applyFileError(file, i18n);
     }
 
-    /** @private */
-    __applyFileSizeStrings(file) {
-      file.totalStr = this.__formatSize(file.total);
-      file.loadedStr = this.__formatSize(file.loaded || 0);
-      // TODO: Remove elapsedStr in next major version - it's not used by vaadin-upload-file
-      if (file.elapsed != null) {
-        file.elapsedStr = this.__formatTime(file.elapsed, this.__splitTimeByUnits(file.elapsed));
-      }
-      if (file.remaining != null) {
-        file.remainingStr = this.__formatTime(file.remaining, this.__splitTimeByUnits(file.remaining));
-      }
-    }
-
-    /** @private */
-    __getFileStatus(file, i18n) {
-      if (file.held && !file.error) {
-        // File is queued and waiting
-        return i18n.uploading.status.held;
-      }
-      if (file.stalled) {
-        // File upload is stalled
-        return i18n.uploading.status.stalled;
-      }
-      if (file.uploading && file.indeterminate && !file.held) {
-        // File is uploading but progress is indeterminate (connecting or processing)
-        return file.progress === 100 ? i18n.uploading.status.processing : i18n.uploading.status.connecting;
-      }
-      if (file.uploading && file.progress < 100 && file.total) {
-        // File is uploading with known progress
-        return this.__formatFileProgress(file);
-      }
-      return file.status;
-    }
-
     /** @private */
     __applyFileError(file, i18n) {
-      if (file.errorKey && i18n.uploading.error[file.errorKey]) {
-        file.error = i18n.uploading.error[file.errorKey];
+      // An error key without an i18n message (e.g. a failure to send the
+      // request) leaves the error assigned to the file untouched
+      const error = file.errorKey && translateErrorKey(file.errorKey, i18n);
+      if (error) {
+        file.error = error;
       } else if (!file.errorKey && this.manager instanceof UploadManager) {
         // Clear error when errorKey is reset (e.g., on retry) only when using manager
         file.error = '';
       }
     }
 
-    /** @private */
-    __formatSize(bytes) {
-      const i18n = this.__effectiveI18n;
-      if (typeof i18n.formatSize === 'function') {
-        return i18n.formatSize(bytes);
-      }
-
-      // https://wiki.ubuntu.com/UnitsPolicy
-      const base = i18n.units.sizeBase || 1000;
-      const unit = Math.trunc(Math.log(bytes) / Math.log(base));
-      const dec = Math.max(0, Math.min(3, unit - 1));
-      const size = Number.parseFloat((bytes / base ** unit).toFixed(dec));
-      return `${size} ${i18n.units.size[unit]}`;
-    }
-
-    /** @private */
-    __splitTimeByUnits(time) {
-      const unitSizes = [60, 60, 24, Infinity];
-      const timeValues = [0];
-
-      for (let i = 0; i < unitSizes.length && time > 0; i++) {
-        timeValues[i] = time % unitSizes[i];
-        time = Math.floor(time / unitSizes[i]);
-      }
-
-      return timeValues;
-    }
-
-    /** @private */
-    __formatTime(seconds, split) {
-      const i18n = this.__effectiveI18n;
-      if (typeof i18n.formatTime === 'function') {
-        return i18n.formatTime(seconds, split);
-      }
-
-      // Fill HH:MM:SS with leading zeros
-      while (split.length < 3) {
-        split.push(0);
-      }
-
-      return split
-        .reverse()
-        .map((number) => {
-          return (number < 10 ? '0' : '') + number;
-        })
-        .join(':');
-    }
-
-    /** @private */
-    __formatFileProgress(file) {
-      const i18n = this.__effectiveI18n;
-      const remainingTime =
-        file.loaded > 0
-          ? i18n.uploading.remainingTime.prefix + file.remainingStr
-          : i18n.uploading.remainingTime.unknown;
-
-      return `${file.totalStr}: ${file.progress}% (${remainingTime})`;
-    }
-
     /** @private */
     requestContentUpdate() {
       const { items, __effectiveI18n: i18n, disabled } = this;
+
       const managerDisabled = this.manager instanceof UploadManager && this.manager.disabled;
       const effectiveDisabled = disabled || managerDisabled;
 

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

@@ -75,6 +75,7 @@ import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-upload-file-list
  * @extends HTMLElement
  */

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

@@ -167,15 +167,6 @@ export const UploadFileMixin = (superClass) =>
       return event.composedPath()[0] === this;
     }
 
-    /** @private */
-    __disabledChanged(disabled) {
-      if (disabled) {
-        this.removeAttribute('tabindex');
-      } else {
-        this.setAttribute('tabindex', this.tabindex);
-      }
-    }
-
     /** @private */
     _errorMessageChanged(errorMessage) {
       this.toggleAttribute('error', Boolean(errorMessage));

package/src/vaadin-upload-file.js

@@ -81,6 +81,7 @@ import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
  * @fires {CustomEvent} file-retry - Fired when the retry button is pressed to request retrying the upload of this file.
  * @fires {CustomEvent} file-start - Fired when the start button is pressed to request starting the upload of this file.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-upload-file
  * @extends HTMLElement
  */
@@ -105,11 +106,13 @@ class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectio
     return html`
       <div part="loader" ?hidden="${!this.uploading}" aria-hidden="true"></div>
 
-      ${this.__thumbnail
-        ? html`<div part="thumbnail">
-            <img src="${this.__thumbnail}" alt="${this.fileName}" />
-          </div>`
-        : nothing}
+      ${
+        this.__thumbnail
+          ? html`<div part="thumbnail">
+              <img src="${this.__thumbnail}" alt="${this.fileName}" />
+            </div>`
+          : nothing
+      }
 
       <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
       <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>

package/src/vaadin-upload-helpers.js

@@ -4,6 +4,149 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
+/**
+ * Format the given number of bytes with the units defined by the i18n object,
+ * or with the custom `formatSize` function if the i18n object provides one.
+ *
+ * @param {number} bytes - The size in bytes
+ * @param {Object} i18n - The effective i18n object
+ * @returns {string} - The formatted size
+ * @private
+ */
+function formatSize(bytes, i18n) {
+  if (typeof i18n.formatSize === 'function') {
+    return i18n.formatSize(bytes);
+  }
+
+  // https://wiki.ubuntu.com/UnitsPolicy
+  const base = i18n.units.sizeBase || 1000;
+  const unit = bytes > 0 ? Math.trunc(Math.log(bytes) / Math.log(base)) : 0;
+  const dec = Math.max(0, Math.min(3, unit - 1));
+  const size = Number.parseFloat((bytes / base ** unit).toFixed(dec));
+  return `${size} ${i18n.units.size[unit]}`;
+}
+
+/** @private */
+function splitTimeByUnits(time) {
+  const unitSizes = [60, 60, 24, Infinity];
+  const timeValues = [0];
+
+  for (let i = 0; i < unitSizes.length && time > 0; i++) {
+    timeValues[i] = time % unitSizes[i];
+    time = Math.floor(time / unitSizes[i]);
+  }
+
+  return timeValues;
+}
+
+/**
+ * Format the given time in seconds as a 'HH:MM:SS' string, or with the
+ * custom `formatTime` function if the i18n object provides one.
+ *
+ * @param {number} seconds - The time in seconds
+ * @param {Object} i18n - The effective i18n object
+ * @returns {string} - The formatted time
+ * @private
+ */
+function formatTime(seconds, i18n) {
+  const split = splitTimeByUnits(seconds);
+  if (typeof i18n.formatTime === 'function') {
+    return i18n.formatTime(seconds, split);
+  }
+
+  // Fill HH:MM:SS with leading zeros
+  while (split.length < 3) {
+    split.push(0);
+  }
+
+  return split
+    .reverse()
+    .map((number) => {
+      return (number < 10 ? '0' : '') + number;
+    })
+    .join(':');
+}
+
+/** @private */
+function formatFileProgress(file, i18n) {
+  const remainingTime =
+    file.loaded > 0 ? i18n.uploading.remainingTime.prefix + file.remainingStr : i18n.uploading.remainingTime.unknown;
+
+  return `${file.totalStr}: ${file.progress}% (${remainingTime})`;
+}
+
+/** @private */
+function getFileStatus(file, i18n, indeterminateFirst) {
+  if (file.held && !file.error) {
+    // File is queued and waiting
+    return i18n.uploading.status.held;
+  }
+  if (file.stalled) {
+    // File upload is stalled
+    return i18n.uploading.status.stalled;
+  }
+  // A progress event has arrived, show the progress even when no bytes
+  // have been transferred yet (formatted as unknown remaining time)
+  const progressStatus =
+    file.uploading && file.progress < 100 && file.total ? formatFileProgress(file, i18n) : undefined;
+  if (progressStatus && !indeterminateFirst) {
+    return progressStatus;
+  }
+  if (file.uploading && file.indeterminate && !file.held) {
+    // File is uploading but progress is indeterminate (connecting or processing)
+    return file.progress === 100 ? i18n.uploading.status.processing : i18n.uploading.status.connecting;
+  }
+  if (progressStatus) {
+    return progressStatus;
+  }
+  return file.status;
+}
+
+/**
+ * Update the human-readable status and size strings of the given file
+ * based on its upload state, using the given i18n object for formatting.
+ *
+ * @param {Object} file - The file to update
+ * @param {Object} i18n - The effective i18n object
+ * @param {Object} [options]
+ * @param {boolean} [options.indeterminateFirst=false] - Give the
+ *   indeterminate statuses (connecting, processing) precedence over the
+ *   transfer progress, like `<vaadin-upload-file-list>` historically does.
+ * @private
+ */
+export function updateFileStatus(file, i18n, { indeterminateFirst = false } = {}) {
+  // Always set size-related strings when total is available
+  if (file.total) {
+    file.totalStr = formatSize(file.total, i18n);
+    file.loadedStr = formatSize(file.loaded || 0, i18n);
+    // TODO: Remove elapsedStr in next major version - it's not used by vaadin-upload-file
+    if (file.elapsed != null) {
+      file.elapsedStr = formatTime(file.elapsed, i18n);
+    }
+    if (file.remaining != null) {
+      file.remainingStr = formatTime(file.remaining, i18n);
+    }
+  }
+
+  // Apply status message based on file state
+  file.status = getFileStatus(file, i18n, indeterminateFirst);
+}
+
+/**
+ * Translate the error key of a failed upload into the matching i18n error
+ * message. A timed out request is reported as server unavailable.
+ *
+ * @param {string} errorKey - The error key of a failed upload
+ * @param {Object} i18n - The effective i18n object
+ * @returns {string | undefined} - The translated error message, or `undefined`
+ *   when the i18n object has no message for the key
+ * @private
+ */
+export function translateErrorKey(errorKey, i18n) {
+  const key = errorKey === 'timeout' ? 'serverUnavailable' : errorKey;
+  return i18n.uploading.error[key];
+}
+
 /**
  * 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,

package/src/vaadin-upload-icon.js

@@ -12,6 +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.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-upload-icon
  * @extends HTMLElement
  * @private

package/src/vaadin-upload-internal-manager.js

@@ -0,0 +1,174 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { UploadManager } from './vaadin-upload-manager.js';
+
+/**
+ * The `headers` property also supports a JSON string, while the manager only
+ * accepts an object, so strings are parsed. An invalid JSON string parses to
+ * undefined, which throws when the request is configured.
+ */
+export function parseHeaders(headers) {
+  if (typeof headers !== 'string') {
+    return headers;
+  }
+  try {
+    return JSON.parse(headers);
+  } catch (_) {
+    return undefined;
+  }
+}
+
+// The manager configuration derived from the component properties. Each entry
+// is defined as a getter on `InternalUploadManager`, so that the manager reads
+// the current value whenever it needs it. This way configuration changed by an
+// `upload-before` listener (e.g. headers with a fresh auth token) applies to
+// the request being started, like it historically did.
+//
+// `formDataName` is not included: the `upload-before` listener assigns it to
+// the file when the upload starts, like the component has historically done.
+const MANAGER_CONFIG = {
+  // Fall back to an empty string, which means that window.location will be
+  // used, also when the property is set to null
+  target: (host) => host.target || '',
+  // Unlike the manager, the component passes an unsupported method to the
+  // request as-is instead of throwing
+  method: (host) => host.method,
+  headers: (host) => parseHeaders(host.headers),
+  timeout: (host) => host.timeout,
+  noAuto: (host) => host.noAuto,
+  withCredentials: (host) => host.withCredentials,
+  uploadFormat: (host) => host.uploadFormat,
+  // Unlike the manager, the component pauses uploads on a non-positive value
+  // instead of throwing
+  maxConcurrentUploads: (host) => host.maxConcurrentUploads,
+  // Unlike the manager, the component treats a negative value as no limit
+  maxFiles: (host) => (host.maxFiles < 0 ? Infinity : host.maxFiles),
+  maxFileSize: (host) => host.maxFileSize,
+  accept: (host) => host.accept,
+};
+
+/**
+ * An `UploadManager` subclass used internally by `<vaadin-upload>`. It reads
+ * its configuration from the host component, and overrides the manager
+ * behavior where the component behavior that predates the manager integration
+ * differs from the standalone manager.
+ */
+export class InternalUploadManager extends UploadManager {
+  /**
+   * @param {HTMLElement} host The `<vaadin-upload>` element to read the
+   *   configuration from
+   */
+  constructor(host) {
+    super();
+    this.__host = host;
+  }
+
+  /**
+   * Override accessor from `UploadManager` to accept assigned files as-is,
+   * without validating them against the maxFiles, maxFileSize and accept
+   * constraints, e.g. to show previously uploaded files.
+   * @override
+   */
+  get files() {
+    return super.files;
+  }
+
+  set files(files) {
+    this._setFiles([...files]);
+  }
+
+  /**
+   * Start the upload of the given file, even if it is already complete, in
+   * which case it is uploaded again from scratch. A file that is already
+   * uploading or queued is ignored.
+   * @param {UploadFile} file
+   */
+  startUpload(file) {
+    this._queueFileUpload(file);
+  }
+
+  /**
+   * Override method from `UploadManager` to not restart the upload of a
+   * file that is already uploading or queued, like the component
+   * historically does; only the `upload-retry` event is dispatched.
+   * @override
+   */
+  retryUpload(file) {
+    const evt = this.dispatchEvent(
+      new CustomEvent('upload-retry', {
+        detail: { file, xhr: file.xhr },
+        cancelable: true,
+      }),
+    );
+    if (evt) {
+      this._queueFileUpload(file);
+    }
+  }
+
+  /**
+   * Override method from `UploadManager` to treat all files as managed:
+   * files that are not in the `files` list are uploaded without being added
+   * to it, and removing a file in an `upload-before` or `upload-request`
+   * listener does not cancel its upload.
+   * @override
+   */
+  _isFileManaged(_file) {
+    return true;
+  }
+
+  /**
+   * Override method from `UploadManager` to leave the state of a file whose
+   * `upload-before` or `upload-request` event was prevented untouched, so
+   * that the preventing listener can take over the request (e.g. send the
+   * xhr manually). The upload slot stays taken until the taken-over request
+   * completes.
+   * @override
+   */
+  _holdFile(_file) {
+    // The listener that prevented the upload is expected to take it over
+  }
+
+  /**
+   * Override method from `UploadManager` to keep the progress properties of
+   * the previous upload attempt until a new upload progresses.
+   * @override
+   */
+  _resetFileProgress(_file) {
+    // Progress is only updated by upload progress events
+  }
+
+  /**
+   * Override method from `UploadManager` to keep the last request available
+   * on the file after the upload has finished, e.g. in the `upload-retry`
+   * event detail.
+   * @override
+   */
+  _clearFileXhr(_file) {
+    // The request reference is kept on the file
+  }
+
+  /**
+   * Override method from `UploadManager` to also free upload capacity for
+   * other queued files when a file is removed.
+   * @override
+   */
+  _removeFile(file) {
+    super._removeFile(file);
+    this._processUploadQueue();
+  }
+}
+
+// Define the configuration properties as getters that read the current value
+// from the host component. The setters are no-ops so that the assignments in
+// the `UploadManager` constructor are ignored.
+Object.entries(MANAGER_CONFIG).forEach(([prop, getValue]) => {
+  Object.defineProperty(InternalUploadManager.prototype, prop, {
+    get() {
+      return getValue(this.__host);
+    },
+    set(_value) {},
+  });
+});

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

@@ -10,12 +10,7 @@ export type UploadFormat = 'raw' | 'multipart';
 export type FileRejectError = 'tooManyFiles' | 'fileIsTooBig' | 'incorrectFileType';
 
 export type UploadErrorKey =
-  | 'timeout'
-  | 'serverUnavailable'
-  | 'unexpectedServerError'
-  | 'forbidden'
-  | 'sendFailed'
-  | 'fileTooLarge';
+  'timeout' | 'serverUnavailable' | 'unexpectedServerError' | 'forbidden' | 'sendFailed' | 'fileTooLarge';
 
 export interface UploadFile extends File {
   uploadTarget: string;