@vaadin/upload 24.0.0-alpha1 → 24.0.0-alpha10

package/src/vaadin-upload.js

@@ -1,18 +1,74 @@
 /**
  * @license
- * Copyright (c) 2016 - 2022 Vaadin Ltd.
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@polymer/polymer/lib/elements/dom-repeat.js';
 import '@vaadin/button/src/vaadin-button.js';
+import './vaadin-upload-icon.js';
 import './vaadin-upload-icons.js';
-import './vaadin-upload-file.js';
+import './vaadin-upload-file-list.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+class AddButtonController extends SlotController {
+  constructor(host) {
+    super(host, 'add-button', 'vaadin-button');
+  }
+
+  /**
+   * Override method inherited from `SlotController`
+   * to add listeners to default and custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initNode(node) {
+    // Needed by Flow counterpart to apply i18n to custom button
+    if (node._isDefault) {
+      this.defaultNode = node;
+    }
+
+    node.addEventListener('touchend', (e) => {
+      this.host._onAddFilesTouchEnd(e);
+    });
+
+    node.addEventListener('click', (e) => {
+      this.host._onAddFilesClick(e);
+    });
+
+    this.host._addButton = node;
+  }
+}
+
+class DropLabelController extends SlotController {
+  constructor(host) {
+    super(host, 'drop-label', 'span');
+  }
+
+  /**
+   * Override method inherited from `SlotController`
+   * to add listeners to default and custom node.
+   *
+   * @param {Node} node
+   * @protected
+   * @override
+   */
+  initNode(node) {
+    // Needed by Flow counterpart to apply i18n to custom label
+    if (node._isDefault) {
+      this.defaultNode = node;
+    }
+    this.host._dropLabel = node;
+  }
+}
+
 /**
  * `<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.
  *
@@ -26,13 +82,10 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * The following shadow DOM parts are available for styling:
  *
- * Part name | Description
- * ---|---
- * `primary-buttons` | Upload container
- * `upload-button` | Upload button
- * `drop-label` | Label for drop indicator
- * `drop-label-icon` | Icon for drop indicator
- * `file-list` | File list container
+ * Part name          | Description
+ * -------------------|-------------------------------------
+ * `primary-buttons`  | Upload container
+ * `drop-label`       | Element wrapping drop label and icon
  *
  * The following state attributes are available for styling:
  *
@@ -59,10 +112,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @fires {CustomEvent} upload-abort - Fired when upload abort is requested.
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Upload extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -79,38 +133,16 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         [hidden] {
           display: none !important;
         }
-
-        [part='file-list'] {
-          padding: 0;
-          margin: 0;
-          list-style-type: none;
-        }
       </style>
 
       <div part="primary-buttons">
-        <div id="addFiles" on-touchend="_onAddFilesTouchEnd" on-click="_onAddFilesClick">
-          <slot name="add-button">
-            <vaadin-button part="upload-button" id="addButton" disabled="[[maxFilesReached]]">
-              [[_i18nPlural(maxFiles, i18n.addFiles, i18n.addFiles.*)]]
-            </vaadin-button>
-          </slot>
-        </div>
+        <slot name="add-button"></slot>
         <div part="drop-label" hidden$="[[nodrop]]" id="dropLabelContainer" aria-hidden="true">
-          <slot name="drop-label-icon">
-            <div part="drop-label-icon"></div>
-          </slot>
-          <slot name="drop-label" id="dropLabel"> [[_i18nPlural(maxFiles, i18n.dropFiles, i18n.dropFiles.*)]]</slot>
+          <slot name="drop-label-icon"></slot>
+          <slot name="drop-label"></slot>
         </div>
       </div>
-      <slot name="file-list">
-        <ul id="fileList" part="file-list">
-          <template is="dom-repeat" items="[[files]]" as="file">
-            <li>
-              <vaadin-upload-file file="[[file]]" i18n="[[i18n]]"></vaadin-upload-file>
-            </li>
-          </template>
-        </ul>
-      </slot>
+      <slot name="file-list"></slot>
       <slot></slot>
       <input
         type="file"
@@ -429,9 +461,37 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
           };
         },
       },
+
+      /** @private */
+      _addButton: {
+        type: Object,
+      },
+
+      /** @private */
+      _dropLabel: {
+        type: Object,
+      },
+
+      /** @private */
+      _fileList: {
+        type: Object,
+      },
+
+      /** @private */
+      _files: {
+        type: Array,
+      },
     };
   }
 
+  static get observers() {
+    return [
+      '__updateAddButton(_addButton, maxFiles, i18n, maxFilesReached)',
+      '__updateDropLabel(_dropLabel, maxFiles, i18n)',
+      '__updateFileList(_fileList, files, i18n)',
+    ];
+  }
+
   /** @protected */
   ready() {
     super.ready();
@@ -440,12 +500,27 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     this.addEventListener('drop', this._onDrop.bind(this));
     this.addEventListener('file-retry', this._onFileRetry.bind(this));
     this.addEventListener('file-abort', this._onFileAbort.bind(this));
-    this.addEventListener('file-remove', this._onFileRemove.bind(this));
     this.addEventListener('file-start', this._onFileStart.bind(this));
     this.addEventListener('file-reject', this._onFileReject.bind(this));
     this.addEventListener('upload-start', this._onUploadStart.bind(this));
     this.addEventListener('upload-success', this._onUploadSuccess.bind(this));
     this.addEventListener('upload-error', this._onUploadError.bind(this));
+
+    this._addButtonController = new AddButtonController(this);
+    this.addController(this._addButtonController);
+
+    this._dropLabelController = new DropLabelController(this);
+    this.addController(this._dropLabelController);
+
+    this.addController(
+      new SlotController(this, 'file-list', 'vaadin-upload-file-list', {
+        initializer: (list) => {
+          this._fileList = list;
+        },
+      }),
+    );
+
+    this.addController(new SlotController(this, 'drop-label-icon', 'vaadin-upload-icon'));
   }
 
   /** @private */
@@ -509,6 +584,34 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     return maxFiles >= 0 && numFiles >= maxFiles;
   }
 
+  /** @private */
+  __updateAddButton(addButton, maxFiles, i18n, maxFilesReached) {
+    if (addButton) {
+      addButton.disabled = maxFilesReached;
+
+      // Only update text content for the default button element
+      if (addButton === this._addButtonController.defaultNode) {
+        addButton.textContent = this._i18nPlural(maxFiles, i18n.addFiles);
+      }
+    }
+  }
+
+  /** @private */
+  __updateDropLabel(dropLabel, maxFiles, i18n) {
+    // Only update text content for the default label element
+    if (dropLabel && dropLabel === this._dropLabelController.defaultNode) {
+      dropLabel.textContent = this._i18nPlural(maxFiles, i18n.dropFiles);
+    }
+  }
+
+  /** @private */
+  __updateFileList(list, files, i18n) {
+    if (list) {
+      list.items = [...files];
+      list.i18n = i18n;
+    }
+  }
+
   /** @private */
   _onDragover(event) {
     event.preventDefault();
@@ -576,11 +679,10 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
    *
    * @param {!UploadFile | !Array<!UploadFile>=} files - Files being uploaded. Defaults to all outstanding files
    */
-  uploadFiles(files) {
+  uploadFiles(files = this.files) {
     if (files && !Array.isArray(files)) {
       files = [files];
     }
-    files = files || this.files;
     files = files.filter((file) => !file.complete);
     Array.prototype.forEach.call(files, this._uploadFile.bind(this));
   }
@@ -615,7 +717,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
           this._setStatus(file, total, loaded, elapsed);
           stalledId = setTimeout(() => {
             file.status = this.i18n.uploading.status.stalled;
-            this._notifyFileChanges(file);
+            this._renderFileList();
           }, 2000);
         } else {
           file.loadedStr = file.totalStr;
@@ -623,7 +725,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         }
       }
 
-      this._notifyFileChanges(file);
+      this._renderFileList();
       this.dispatchEvent(new CustomEvent('upload-progress', { detail: { file, xhr } }));
     };
 
@@ -633,7 +735,6 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         clearTimeout(stalledId);
         file.indeterminate = file.uploading = false;
         if (file.abort) {
-          this._notifyFileChanges(file);
           return;
         }
         file.status = '';
@@ -663,7 +764,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
             detail: { file, xhr },
           }),
         );
-        this._notifyFileChanges(file);
+        this._renderFileList();
       }
     };
 
@@ -697,7 +798,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
           detail: { file, xhr },
         }),
       );
-      this._notifyFileChanges(file);
+      this._renderFileList();
     };
 
     // Custom listener could modify the xhr just before sending it
@@ -739,16 +840,15 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       if (file.xhr) {
         file.xhr.abort();
       }
-      this._notifyFileChanges(file);
+      this._removeFile(file);
     }
   }
 
   /** @private */
-  _notifyFileChanges(file) {
-    const p = `files.${this.files.indexOf(file)}.`;
-    Object.keys(file).forEach((i) => {
-      this.notifyPath(p + i, file[i]);
-    });
+  _renderFileList() {
+    if (this._fileList) {
+      this._fileList.requestContentUpdate();
+    }
   }
 
   /** @private */
@@ -779,11 +879,11 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       );
       return;
     }
-    const fileExt = file.name.match(/\.[^.]*$|$/)[0];
+    const fileExt = file.name.match(/\.[^.]*$|$/u)[0];
     // Escape regex operators common to mime types
-    const escapedAccept = this.accept.replace(/[+.]/g, '\\$&');
+    const escapedAccept = this.accept.replace(/[+.]/gu, '\\$&');
     // Create accept regex that can match comma separated patterns, star (*) wildcards
-    const re = new RegExp(`^(${escapedAccept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*')})$`, 'i');
+    const re = new RegExp(`^(${escapedAccept.replace(/[, ]+/gu, '|').replace(/\/\*/gu, '/.*')})$`, 'iu');
     if (this.accept && !(re.test(file.type) || re.test(fileExt))) {
       this.dispatchEvent(
         new CustomEvent('file-reject', {
@@ -810,6 +910,14 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
   _removeFile(file) {
     if (this.files.indexOf(file) > -1) {
       this.files = this.files.filter((i) => i !== file);
+
+      this.dispatchEvent(
+        new CustomEvent('file-remove', {
+          detail: { file },
+          bubbles: true,
+          composed: true,
+        }),
+      );
     }
   }
 
@@ -851,11 +959,6 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     this._abortFileUpload(event.detail.file);
   }
 
-  /** @private */
-  _onFileRemove(event) {
-    this._removeFile(event.detail.file);
-  }
-
   /** @private */
   _onFileReject(event) {
     announce(`${event.detail.file.name}: ${event.detail.file.error}`, { mode: 'alert' });

package/theme/lumo/vaadin-upload-styles.js

@@ -24,11 +24,6 @@ registerStyles(
       transition: background-color 0.6s, border-color 0.6s;
     }
 
-    [part='primary-buttons'] > * {
-      display: inline-block;
-      white-space: nowrap;
-    }
-
     [part='drop-label'] {
       display: inline-block;
       white-space: normal;
@@ -50,24 +45,32 @@ registerStyles(
     :host([max-files-reached]) [part='drop-label'] {
       color: var(--lumo-disabled-text-color);
     }
+  `,
+  { moduleId: 'lumo-upload' },
+);
 
-    [part='drop-label-icon'] {
-      display: inline-block;
-    }
-
-    [part='drop-label-icon']::before {
+registerStyles(
+  'vaadin-upload-icon',
+  css`
+    :host::before {
       content: var(--lumo-icons-upload);
       font-family: lumo-icons;
       font-size: var(--lumo-icon-size-m);
       line-height: 1;
       vertical-align: -0.25em;
     }
+  `,
+  { moduleId: 'lumo-upload-icon' },
+);
 
-    [part='file-list'] > *:not(:first-child) > * {
+registerStyles(
+  'vaadin-upload-file-list',
+  css`
+    ::slotted(li:not(:first-of-type)) {
       border-top: 1px solid var(--lumo-contrast-10pct);
     }
   `,
-  { moduleId: 'lumo-upload' },
+  { moduleId: 'lumo-upload-file-list' },
 );
 
 const uploadFile = css`
@@ -172,16 +175,11 @@ const uploadFile = css`
     color: var(--lumo-error-text-color);
   }
 
-  [part='progress'] {
+  ::slotted([slot='progress']) {
     width: auto;
     margin-left: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
     margin-right: calc(var(--lumo-icon-size-m) + var(--lumo-space-xs));
   }
-
-  [part='progress'][complete],
-  [part='progress'][error] {
-    display: none;
-  }
 `;
 
 registerStyles('vaadin-upload-file', [fieldButton, uploadFile], { moduleId: 'lumo-upload-file' });

package/theme/material/vaadin-upload-styles.js

@@ -23,14 +23,7 @@ registerStyles(
       align-items: baseline;
     }
 
-    /* TODO(jouni): unsupported selector (not sure why there's #addFiles element wrapping the upload button) */
-    [part='primary-buttons'] > * {
-      display: block;
-      flex-grow: 1;
-    }
-
-    [part='upload-button'] {
-      display: block;
+    ::slotted([slot='add-button']) {
       margin: 0 -8px;
     }
 
@@ -56,18 +49,6 @@ registerStyles(
       color: var(--material-disabled-text-color);
     }
 
-    [part='drop-label-icon'] {
-      display: inline-block;
-      margin-right: 8px;
-    }
-
-    [part='drop-label-icon']::before {
-      content: var(--material-icons-upload);
-      font-family: material-icons;
-      font-size: var(--material-icon-font-size);
-      line-height: 1;
-    }
-
     /* Ripple */
 
     :host::before {
@@ -96,6 +77,23 @@ registerStyles(
   { moduleId: 'material-upload' },
 );
 
+registerStyles(
+  'vaadin-upload-icon',
+  css`
+    :host {
+      margin-right: 8px;
+    }
+
+    :host::before {
+      content: var(--material-icons-upload);
+      font-family: material-icons;
+      font-size: var(--material-icon-font-size);
+      line-height: 1;
+    }
+  `,
+  { moduleId: 'material-upload-icon' },
+);
+
 registerStyles(
   'vaadin-upload-file',
   css`
@@ -237,15 +235,10 @@ registerStyles(
       color: var(--material-error-text-color);
     }
 
-    [part='progress'] {
+    ::slotted([slot='progress']) {
       width: auto;
       margin-left: 28px;
     }
-
-    [part='progress'][complete],
-    [part='progress'][error] {
-      display: none;
-    }
   `,
   { moduleId: 'material-upload-file' },
 );