@vaadin/vaadin-upload 4.4.2 → 4.4.4

package/README.md

@@ -1,6 +1,6 @@
 # <vaadin-upload>
 
-> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-upload) monorepository.
+> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/main/packages/upload) monorepository.
 > This repository contains the source code and releases of `<vaadin-upload>` for the Vaadin versions 10 to 19.
 
 [&lt;vaadin-upload&gt;](https://vaadin.com/components/vaadin-upload) is a Web Component for uploading files, part of the [Vaadin components](https://vaadin.com/components).

package/package.json

@@ -10,7 +10,7 @@
   "repository": "vaadin/vaadin-upload",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-upload",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "main": "vaadin-upload.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",
@@ -25,8 +25,6 @@
     "theme"
   ],
   "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
     "inherits": "2.0.3",
     "samsam": "1.1.3",
     "supports-color": "3.1.2",
@@ -41,10 +39,9 @@
     "@vaadin/vaadin-material-styles": "^1.1.0",
     "@vaadin/vaadin-element-mixin": "^2.4.1"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
   "devDependencies": {
+    "@web-padawan/gen-typescript-declarations": "^1.6.2",
+    "web-component-tester": "6.9.2",
     "@polymer/iron-component-page": "^4.0.0",
     "@polymer/iron-test-helpers": "^3.0.0",
     "mock-http-request": "git://github.com/abuinitski/MockHttpRequest#npm_fix",
@@ -52,5 +49,9 @@
     "wct-browser-legacy": "^1.0.1",
     "@vaadin/vaadin-demo-helpers": "^3.1.0",
     "@polymer/iron-icons": "^3.0.0"
+  },
+  "scripts": {
+    "generate-typings": "gen-typescript-declarations --outDir . --verify",
+    "test": "wct --npm"
   }
 }

package/src/vaadin-upload.d.ts

@@ -49,6 +49,7 @@ import {html} from '@polymer/polymer/lib/utils/html-tag.js';
  * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
  * `dragover` | A file is being dragged over the element | `:host`
  * `dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`
+ * `max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`
  *
  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
  */

package/src/vaadin-upload.js

@@ -42,6 +42,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
  * `nodrop` | Set when drag and drop is disabled (e. g., on touch devices) | `:host`
  * `dragover` | A file is being dragged over the element | `:host`
  * `dragover-valid` | A dragged file is valid with `maxFiles` and `accept` criteria | `:host`
+ * `max-files-reached` | The maximum number of files that the user is allowed to add to the upload has been reached | `:host`
  *
  * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
  *
@@ -102,7 +103,7 @@ class UploadElement extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   static get version() {
-    return '4.4.2';
+    return '4.4.4';
   }
 
   static get properties() {
@@ -230,6 +231,7 @@ class UploadElement extends ElementMixin(ThemableMixin(PolymerElement)) {
         value: false,
         notify: true,
         readOnly: true,
+        reflectToAttribute: true,
         computed: '_maxFilesAdded(maxFiles, files.length)'
       },
 
@@ -751,7 +753,10 @@ class UploadElement extends ElementMixin(ThemableMixin(PolymerElement)) {
       return;
     }
     const fileExt = file.name.match(/\.[^\.]*$|$/)[0];
-    const re = new RegExp('^(' + this.accept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*') + ')$', 'i');
+    // Escape regex operators common to mime types
+    const escapedAccept = this.accept.replace(/[+.]/g, '\\$&');
+    // Create accept regex that can match comma separated patterns, star (*) wildcards
+    const re = new RegExp(`^(${escapedAccept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*')})$`, 'i');
     if (this.accept && !(re.test(file.type) || re.test(fileExt))) {
       this.dispatchEvent(
         new CustomEvent('file-reject', {

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

@@ -47,6 +47,10 @@ const $_documentContainer = html`<dom-module id="lumo-upload" theme-for="vaadin-
         color: var(--lumo-primary-text-color);
       }
 
+      :host([max-files-reached]) [part='drop-label'] {
+        color: var(--lumo-disabled-text-color);
+      }
+
       [part="drop-label-icon"] {
         display: inline-block;
       }

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

@@ -52,6 +52,10 @@ const $_documentContainer = html`<dom-module id="material-upload" theme-for="vaa
         color: var(--material-primary-text-color);
       }
 
+      :host([max-files-reached]) [part='drop-label'] {
+        color: var(--material-disabled-text-color);
+      }
+
       [part="drop-label-icon"] {
         display: inline-block;
         margin-right: 8px;