@vaadin/upload 24.2.0-alpha1 → 24.2.0-alpha10

package/src/vaadin-upload-file.js

@@ -6,10 +6,12 @@
 import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
 import './vaadin-upload-icons.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
+import { uploadFileStyles } from './vaadin-upload-file-styles.js';
+
+registerStyles('vaadin-upload-file', uploadFileStyles, { moduleId: 'vaadin-upload-file-styles' });
 
 /**
  * `<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.
@@ -48,38 +50,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @extends HTMLElement
  * @mixes ControllerMixin
- * @mixes FocusMixin
+ * @mixes UploadFileMixin
  * @mixes ThemableMixin
  */
-class UploadFile extends FocusMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
+class UploadFile extends UploadFileMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        [hidden] {
-          display: none;
-        }
-
-        [part='row'] {
-          list-style-type: none;
-        }
-
-        button {
-          background: transparent;
-          padding: 0;
-          border: none;
-          box-shadow: none;
-        }
-
-        :host([complete]) ::slotted([slot='progress']),
-        :host([error]) ::slotted([slot='progress']) {
-          display: none !important;
-        }
-      </style>
-
       <div part="row">
         <div part="info">
           <div part="done-icon" hidden$="[[!complete]]" aria-hidden="true"></div>
@@ -129,173 +105,6 @@ class UploadFile extends FocusMixin(ThemableMixin(ControllerMixin(PolymerElement
     return 'vaadin-upload-file';
   }
 
-  static get properties() {
-    return {
-      /**
-       * True if uploading is completed, false otherwise.
-       */
-      complete: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Error message returned by the server, if any.
-       */
-      errorMessage: {
-        type: String,
-        value: '',
-        observer: '_errorMessageChanged',
-      },
-
-      /**
-       * The object representing a file.
-       */
-      file: {
-        type: Object,
-      },
-
-      /**
-       * Name of the uploading file.
-       */
-      fileName: {
-        type: String,
-      },
-
-      /**
-       * True if uploading is not started, false otherwise.
-       */
-      held: {
-        type: Boolean,
-        value: false,
-      },
-
-      /**
-       * True if remaining time is unknown, false otherwise.
-       */
-      indeterminate: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * The object used to localize this component.
-       */
-      i18n: {
-        type: Object,
-      },
-
-      /**
-       * Number representing the uploading progress.
-       */
-      progress: {
-        type: Number,
-      },
-
-      /**
-       * Uploading status.
-       */
-      status: {
-        type: String,
-      },
-
-      /**
-       * Indicates whether the element can be focused and where it participates in sequential keyboard navigation.
-       * @protected
-       */
-      tabindex: {
-        type: Number,
-        value: 0,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * True if uploading is in progress, false otherwise.
-       */
-      uploading: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /** @private */
-      _progress: {
-        type: Object,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__updateProgress(_progress, progress, indeterminate)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addController(
-      new SlotController(this, 'progress', 'vaadin-progress-bar', {
-        initializer: (progress) => {
-          this._progress = progress;
-        },
-      }),
-    );
-
-    // Handle moving focus to the button on Tab.
-    this.shadowRoot.addEventListener('focusin', (e) => {
-      const target = e.composedPath()[0];
-
-      if (target.getAttribute('part').endsWith('button')) {
-        this._setFocused(false);
-      }
-    });
-
-    // Handle moving focus from the button on Shift Tab.
-    this.shadowRoot.addEventListener('focusout', (e) => {
-      if (e.relatedTarget === this) {
-        this._setFocused(true);
-      }
-    });
-  }
-
-  /**
-   * Override method inherited from `FocusMixin` to mark the file as focused
-   * only when the host is focused.
-   * @param {Event} event
-   * @return {boolean}
-   * @protected
-   */
-  _shouldSetFocus(event) {
-    return event.composedPath()[0] === this;
-  }
-
-  /** @private */
-  _errorMessageChanged(errorMessage) {
-    this.toggleAttribute('error', Boolean(errorMessage));
-  }
-
-  /** @private */
-  __updateProgress(progress, value, indeterminate) {
-    if (progress) {
-      progress.value = isNaN(value) ? 0 : value / 100;
-      progress.indeterminate = indeterminate;
-    }
-  }
-
-  /** @private */
-  _fireFileEvent(e) {
-    e.preventDefault();
-    return this.dispatchEvent(
-      new CustomEvent(e.target.getAttribute('file-event'), {
-        detail: { file: this.file },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-
   /**
    * Fired when the retry button is pressed. It is listened by `vaadin-upload`
    * which will start a new upload process of this file.

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

@@ -0,0 +1,254 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 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';
+
+export interface UploadFile extends File {
+  uploadTarget: string;
+  elapsed: number;
+  elapsedStr: string;
+  remaining: number;
+  remainingStr: string;
+  progress: number;
+  speed: number;
+  totalStr: string;
+  loaded: number;
+  loadedStr: string;
+  status: string;
+  error: string;
+  abort?: boolean;
+  complete?: boolean;
+  uploading?: boolean;
+}
+
+export interface UploadI18n {
+  dropFiles: {
+    one: string;
+    many: string;
+  };
+  addFiles: {
+    one: string;
+    many: string;
+  };
+  error: {
+    tooManyFiles: string;
+    fileIsTooBig: string;
+    incorrectFileType: string;
+  };
+  uploading: {
+    status: {
+      connecting: string;
+      stalled: string;
+      processing: string;
+      held: string;
+    };
+    remainingTime: {
+      prefix: string;
+      unknown: string;
+    };
+    error: {
+      serverUnavailable: string;
+      unexpectedServerError: string;
+      forbidden: string;
+    };
+  };
+  units: {
+    size: string[];
+    sizeBase?: number;
+  };
+  formatSize?(bytes: number): string;
+  formatTime?(seconds: number, units: number[]): string;
+}
+
+export type UploadMethod = 'POST' | 'PUT';
+
+export declare function UploadMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<UploadMixinClass> & T;
+
+export declare class UploadMixinClass {
+  /**
+   * Define whether the element supports dropping files on it for uploading.
+   * By default it's enabled in desktop and disabled in touch devices
+   * because mobile devices do not support drag events in general. Setting
+   * it false means that drop is enabled even in touch-devices, and true
+   * disables drop in all devices.
+   */
+  nodrop: boolean;
+
+  /**
+   * The server URL. The default value is an empty string, which means that
+   * _window.location_ will be used.
+   */
+  target: string;
+
+  /**
+   * HTTP Method used to send the files. Only POST and PUT are allowed.
+   */
+  method: UploadMethod;
+
+  /**
+   * Key-Value map to send to the server. If you set this property as an
+   * attribute, use a valid JSON string, for example:
+   * ```
+   * <vaadin-upload headers='{"X-Foo": "Bar"}'></vaadin-upload>
+   * ```
+   */
+  headers: object | string | null;
+
+  /**
+   * Max time in milliseconds for the entire upload process, if exceeded the
+   * request will be aborted. Zero means that there is no timeout.
+   */
+  timeout: number;
+
+  /**
+   * The array of files being processed, or already uploaded.
+   *
+   * Each element is a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)
+   * object with a number of extra properties  to track the upload process:
+   * - `uploadTarget`: The target URL used to upload this file.
+   * - `elapsed`: Elapsed time since the upload started.
+   * - `elapsedStr`: Human-readable elapsed time.
+   * - `remaining`: Number of seconds remaining for the upload to finish.
+   * - `remainingStr`: Human-readable remaining time for the upload to finish.
+   * - `progress`: Percentage of the file already uploaded.
+   * - `speed`: Upload speed in kB/s.
+   * - `size`: File size in bytes.
+   * - `totalStr`: Human-readable total size of the file.
+   * - `loaded`: Bytes transferred so far.
+   * - `loadedStr`: Human-readable uploaded size at the moment.
+   * - `status`: Status of the upload process.
+   * - `error`: Error message in case the upload failed.
+   * - `abort`: True if the file was canceled by the user.
+   * - `complete`: True when the file was transferred to the server.
+   * - `uploading`: True while transferring data to the server.
+   */
+  files: UploadFile[];
+
+  /**
+   * Limit of files to upload, by default it is unlimited. If the value is
+   * set to one, native file browser will prevent selecting multiple files.
+   * @attr {number} max-files
+   */
+  maxFiles: number;
+
+  /**
+   * Specifies if the maximum number of files have been uploaded
+   * @attr {boolean} max-files-reached
+   */
+  readonly maxFilesReached: boolean;
+
+  /**
+   * Specifies the types of files that the server accepts.
+   * Syntax: a comma-separated list of MIME type patterns (wildcards are
+   * allowed) or file extensions.
+   * Notice that MIME types are widely supported, while file extensions
+   * are only implemented in certain browsers, so avoid using it.
+   * Example: accept="video/*,image/tiff" or accept=".pdf,audio/mp3"
+   */
+  accept: string;
+
+  /**
+   * Specifies the maximum file size in bytes allowed to upload.
+   * Notice that it is a client-side constraint, which will be checked before
+   * sending the request. Obviously you need to do the same validation in
+   * the server-side and be sure that they are aligned.
+   * @attr {number} max-file-size
+   */
+  maxFileSize: number;
+
+  /**
+   * Specifies the 'name' property at Content-Disposition
+   * @attr {string} form-data-name
+   */
+  formDataName: string;
+
+  /**
+   * Prevents upload(s) from immediately uploading upon adding file(s).
+   * When set, you must manually trigger uploads using the `uploadFiles` method
+   * @attr {boolean} no-auto
+   */
+  noAuto: boolean;
+
+  /**
+   * Set the withCredentials flag on the request.
+   * @attr {boolean} with-credentials
+   */
+  withCredentials: boolean;
+
+  /**
+   * Pass-through to input's capture attribute. Allows user to trigger device inputs
+   * such as camera or microphone immediately.
+   */
+  capture: string | null | undefined;
+
+  /**
+   * The object used to localize this component.
+   * For changing the default localization, change the entire
+   * _i18n_ object or just the property you want to modify.
+   *
+   * The object has the following JSON structure and default values:
+   *
+   * ```
+   * {
+   *   dropFiles: {
+   *     one: 'Drop file here',
+   *     many: 'Drop files here'
+   *   },
+   *   addFiles: {
+   *     one: 'Select File...',
+   *     many: 'Upload Files...'
+   *   },
+   *   error: {
+   *     tooManyFiles: 'Too Many Files.',
+   *     fileIsTooBig: 'File is Too Big.',
+   *     incorrectFileType: 'Incorrect File Type.'
+   *   },
+   *   uploading: {
+   *     status: {
+   *       connecting: 'Connecting...',
+   *       stalled: 'Stalled',
+   *       processing: 'Processing File...',
+   *       held: 'Queued'
+   *     },
+   *     remainingTime: {
+   *       prefix: 'remaining time: ',
+   *       unknown: 'unknown remaining time'
+   *     },
+   *     error: {
+   *       serverUnavailable: 'Server Unavailable',
+   *       unexpectedServerError: 'Unexpected Server Error',
+   *       forbidden: 'Forbidden'
+   *     }
+   *   },
+   *   file: {
+   *     retry: 'Retry',
+   *     start: 'Start',
+   *     remove: 'Remove'
+   *   },
+   *   units: {
+   *     size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+   *     sizeBase: 1000
+   *   },
+   *   formatSize: function(bytes) {
+   *     // returns the size followed by the best suitable unit
+   *   },
+   *   formatTime: function(seconds, [secs, mins, hours]) {
+   *     // returns a 'HH:MM:SS' string
+   *   }
+   * }
+   * ```
+   *
+   * @type {!UploadI18n}
+   * @default {English}
+   */
+  i18n: UploadI18n;
+
+  /**
+   * Triggers the upload of any files that are not completed
+   *
+   * @param files Files being uploaded. Defaults to all outstanding files
+   */
+  uploadFiles(files?: UploadFile | UploadFile[]): void;
+}