@vaadin/upload 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "23.1.0-alpha1",
+  "version": "23.1.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,18 +34,18 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha1",
-    "@vaadin/component-base": "23.1.0-alpha1",
-    "@vaadin/progress-bar": "23.1.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
+    "@vaadin/button": "23.1.0-alpha4",
+    "@vaadin/component-base": "23.1.0-alpha4",
+    "@vaadin/progress-bar": "23.1.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/form-layout": "23.1.0-alpha1",
+    "@vaadin/form-layout": "23.1.0-alpha4",
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.0"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
+  "gitHead": "aacdb7fe09811894751f0378ff7fb66071892c71"
 }

package/src/vaadin-upload-file.js

@@ -143,8 +143,8 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
       tabindex: {
         type: Number,
         value: 0,
-        reflectToAttribute: true
-      }
+        reflectToAttribute: true,
+      },
     };
   }
 
@@ -154,7 +154,7 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
       '_toggleHostAttribute(file.error, "error")',
       '_toggleHostAttribute(file.indeterminate, "indeterminate")',
       '_toggleHostAttribute(file.uploading, "uploading")',
-      '_toggleHostAttribute(file.complete, "complete")'
+      '_toggleHostAttribute(file.complete, "complete")',
     ];
   }
 
@@ -203,8 +203,8 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
       new CustomEvent('file-remove', {
         detail: { file: this.file },
         bubbles: true,
-        composed: true
-      })
+        composed: true,
+      }),
     );
   }
 
@@ -220,8 +220,8 @@ class UploadFile extends FocusMixin(ThemableMixin(PolymerElement)) {
       new CustomEvent(e.target.getAttribute('file-event'), {
         detail: { file: this.file },
         bubbles: true,
-        composed: true
-      })
+        composed: true,
+      }),
     );
   }
 

package/src/vaadin-upload.d.ts

@@ -401,13 +401,13 @@ declare class Upload extends ThemableMixin(ElementMixin(HTMLElement)) {
   addEventListener<K extends keyof UploadEventMap>(
     type: K,
     listener: (this: Upload, ev: UploadEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof UploadEventMap>(
     type: K,
     listener: (this: Upload, ev: UploadEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-upload.js

@@ -143,7 +143,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       nodrop: {
         type: Boolean,
         reflectToAttribute: true,
-        value: isTouch
+        value: isTouch,
       },
 
       /**
@@ -153,7 +153,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       target: {
         type: String,
-        value: ''
+        value: '',
       },
 
       /**
@@ -162,7 +162,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       method: {
         type: String,
-        value: 'POST'
+        value: 'POST',
       },
 
       /**
@@ -175,7 +175,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       headers: {
         type: Object,
-        value: {}
+        value: {},
       },
 
       /**
@@ -185,14 +185,14 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       timeout: {
         type: Number,
-        value: 0
+        value: 0,
       },
 
       /** @private */
       _dragover: {
         type: Boolean,
         value: false,
-        observer: '_dragoverChanged'
+        observer: '_dragoverChanged',
       },
 
       /**
@@ -223,7 +223,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         notify: true,
         value: function () {
           return [];
-        }
+        },
       },
 
       /**
@@ -234,7 +234,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       maxFiles: {
         type: Number,
-        value: Infinity
+        value: Infinity,
       },
 
       /**
@@ -248,7 +248,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         notify: true,
         readOnly: true,
         reflectToAttribute: true,
-        computed: '_maxFilesAdded(maxFiles, files.length)'
+        computed: '_maxFilesAdded(maxFiles, files.length)',
       },
 
       /**
@@ -262,7 +262,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       accept: {
         type: String,
-        value: ''
+        value: '',
       },
 
       /**
@@ -275,7 +275,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       maxFileSize: {
         type: Number,
-        value: Infinity
+        value: Infinity,
       },
 
       /**
@@ -286,7 +286,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
       _dragoverValid: {
         type: Boolean,
         value: false,
-        observer: '_dragoverValidChanged'
+        observer: '_dragoverValidChanged',
       },
 
       /**
@@ -296,7 +296,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       formDataName: {
         type: String,
-        value: 'file'
+        value: 'file',
       },
 
       /**
@@ -307,7 +307,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       noAuto: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -317,7 +317,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
        */
       withCredentials: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -392,45 +392,45 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
           return {
             dropFiles: {
               one: 'Drop file here',
-              many: 'Drop files here'
+              many: 'Drop files here',
             },
             addFiles: {
               one: 'Upload File...',
-              many: 'Upload Files...'
+              many: 'Upload Files...',
             },
             error: {
               tooManyFiles: 'Too Many Files.',
               fileIsTooBig: 'File is Too Big.',
-              incorrectFileType: 'Incorrect File Type.'
+              incorrectFileType: 'Incorrect File Type.',
             },
             uploading: {
               status: {
                 connecting: 'Connecting...',
                 stalled: 'Stalled',
                 processing: 'Processing File...',
-                held: 'Queued'
+                held: 'Queued',
               },
               remainingTime: {
                 prefix: 'remaining time: ',
-                unknown: 'unknown remaining time'
+                unknown: 'unknown remaining time',
               },
               error: {
                 serverUnavailable: 'Upload failed, please try again later',
                 unexpectedServerError: 'Upload failed due to server error',
-                forbidden: 'Upload forbidden'
-              }
+                forbidden: 'Upload forbidden',
+              },
             },
             file: {
               retry: 'Retry',
               start: 'Start',
-              remove: 'Remove'
+              remove: 'Remove',
             },
             units: {
-              size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-            }
+              size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+            },
           };
-        }
-      }
+        },
+      },
     };
   }
 
@@ -461,7 +461,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     const unit = ~~(Math.log(bytes) / Math.log(base));
     const dec = Math.max(0, Math.min(3, unit - 1));
     const size = parseFloat((bytes / base ** unit).toFixed(dec));
-    return size + ' ' + this.i18n.units.size[unit];
+    return `${size} ${this.i18n.units.size[unit]}`;
   }
 
   /** @private */
@@ -498,16 +498,12 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   _formatFileProgress(file) {
-    return (
-      file.totalStr +
-      ': ' +
-      file.progress +
-      '% (' +
-      (file.loaded > 0
+    const remainingTime =
+      file.loaded > 0
         ? this.i18n.uploading.remainingTime.prefix + file.remainingStr
-        : this.i18n.uploading.remainingTime.unknown) +
-      ')'
-    );
+        : this.i18n.uploading.remainingTime.unknown;
+
+    return `${file.totalStr}: ${file.progress}% (${remainingTime})`;
   }
 
   /** @private */
@@ -549,7 +545,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   _configureXhr(xhr) {
-    if (typeof this.headers == 'string') {
+    if (typeof this.headers === 'string') {
       try {
         this.headers = JSON.parse(this.headers);
       } catch (e) {
@@ -635,7 +631,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
 
     // More reliable than xhr.onload
     xhr.onreadystatechange = () => {
-      if (xhr.readyState == 4) {
+      if (xhr.readyState === 4) {
         clearTimeout(stalledId);
         file.indeterminate = file.uploading = false;
         if (file.abort) {
@@ -648,8 +644,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         const evt = this.dispatchEvent(
           new CustomEvent('upload-response', {
             detail: { file, xhr },
-            cancelable: true
-          })
+            cancelable: true,
+          }),
         );
 
         if (!evt) {
@@ -666,8 +662,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
         file.complete = !file.error;
         this.dispatchEvent(
           new CustomEvent(`upload-${file.error ? 'error' : 'success'}`, {
-            detail: { file, xhr }
-          })
+            detail: { file, xhr },
+          }),
         );
         this._notifyFileChanges(file);
       }
@@ -681,8 +677,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     const evt = this.dispatchEvent(
       new CustomEvent('upload-before', {
         detail: { file, xhr },
-        cancelable: true
-      })
+        cancelable: true,
+      }),
     );
     if (!evt) {
       return;
@@ -700,8 +696,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     xhr.upload.onloadstart = () => {
       this.dispatchEvent(
         new CustomEvent('upload-start', {
-          detail: { file, xhr }
-        })
+          detail: { file, xhr },
+        }),
       );
       this._notifyFileChanges(file);
     };
@@ -711,8 +707,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     const uploadEvt = this.dispatchEvent(
       new CustomEvent('upload-request', {
         detail: { file, xhr, formData },
-        cancelable: true
-      })
+        cancelable: true,
+      }),
     );
     if (uploadEvt) {
       xhr.send(formData);
@@ -724,8 +720,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     const evt = this.dispatchEvent(
       new CustomEvent('upload-retry', {
         detail: { file, xhr: file.xhr },
-        cancelable: true
-      })
+        cancelable: true,
+      }),
     );
     if (evt) {
       this._uploadFile(file);
@@ -737,8 +733,8 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     const evt = this.dispatchEvent(
       new CustomEvent('upload-abort', {
         detail: { file, xhr: file.xhr },
-        cancelable: true
-      })
+        cancelable: true,
+      }),
     );
     if (evt) {
       file.abort = true;
@@ -751,7 +747,7 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   _notifyFileChanges(file) {
-    var p = 'files.' + this.files.indexOf(file) + '.';
+    var p = `files.${this.files.indexOf(file)}.`;
     for (const i in file) {
       // eslint-disable-next-line no-prototype-builtins
       if (file.hasOwnProperty(i)) {
@@ -775,26 +771,26 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
     if (this.maxFilesReached) {
       this.dispatchEvent(
         new CustomEvent('file-reject', {
-          detail: { file, error: this.i18n.error.tooManyFiles }
-        })
+          detail: { file, error: this.i18n.error.tooManyFiles },
+        }),
       );
       return;
     }
     if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {
       this.dispatchEvent(
         new CustomEvent('file-reject', {
-          detail: { file, error: this.i18n.error.fileIsTooBig }
-        })
+          detail: { file, error: this.i18n.error.fileIsTooBig },
+        }),
       );
       return;
     }
     const fileExt = file.name.match(/\.[^.]*$|$/)[0];
-    const re = new RegExp('^(' + this.accept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*') + ')$', 'i');
+    const re = new RegExp(`^(${this.accept.replace(/[, ]+/g, '|').replace(/\/\*/g, '/.*')})$`, 'i');
     if (this.accept && !(re.test(file.type) || re.test(fileExt))) {
       this.dispatchEvent(
         new CustomEvent('file-reject', {
-          detail: { file, error: this.i18n.error.incorrectFileType }
-        })
+          detail: { file, error: this.i18n.error.incorrectFileType },
+        }),
       );
       return;
     }
@@ -884,22 +880,30 @@ class Upload extends ElementMixin(ThemableMixin(PolymerElement)) {
 
   /** @private */
   _dragoverChanged(dragover) {
-    dragover ? this.setAttribute('dragover', dragover) : this.removeAttribute('dragover');
+    if (dragover) {
+      this.setAttribute('dragover', dragover);
+    } else {
+      this.removeAttribute('dragover');
+    }
   }
 
   /** @private */
   _dragoverValidChanged(dragoverValid) {
-    dragoverValid ? this.setAttribute('dragover-valid', dragoverValid) : this.removeAttribute('dragover-valid');
+    if (dragoverValid) {
+      this.setAttribute('dragover-valid', dragoverValid);
+    } else {
+      this.removeAttribute('dragover-valid');
+    }
   }
 
   /** @private */
   _i18nPlural(value, plural) {
-    return value == 1 ? plural.one : plural.many;
+    return value === 1 ? plural.one : plural.many;
   }
 
   /** @private */
   _isMultiple(maxFiles) {
-    return maxFiles != 1;
+    return maxFiles !== 1;
   }
 
   /**

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

@@ -67,7 +67,7 @@ registerStyles(
       border-top: 1px solid var(--lumo-contrast-10pct);
     }
   `,
-  { moduleId: 'lumo-upload' }
+  { moduleId: 'lumo-upload' },
 );
 
 const uploadFile = css`

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

@@ -93,7 +93,7 @@ registerStyles(
       transition-delay: 0s, 0s;
     }
   `,
-  { moduleId: 'material-upload' }
+  { moduleId: 'material-upload' },
 );
 
 registerStyles(
@@ -247,5 +247,5 @@ registerStyles(
       display: none;
     }
   `,
-  { moduleId: 'material-upload-file' }
+  { moduleId: 'material-upload-file' },
 );