@vaadin/upload 24.8.0-alpha8 → 25.0.0-alpha1

package/src/vaadin-upload-mixin.js

@@ -5,8 +5,50 @@
  */
 import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { isTouch } from '@vaadin/component-base/src/browser-utils.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
+const DEFAULT_I18N = {
+  dropFiles: {
+    one: 'Drop file here',
+    many: 'Drop files here',
+  },
+  addFiles: {
+    one: 'Upload 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: 'Upload failed, please try again later',
+      unexpectedServerError: 'Upload failed due to server error',
+      forbidden: 'Upload forbidden',
+    },
+  },
+  file: {
+    retry: 'Retry',
+    start: 'Start',
+    remove: 'Remove',
+  },
+  units: {
+    size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+  },
+};
+
 class AddButtonController extends SlotController {
   constructor(host) {
     super(host, 'add-button', 'vaadin-button');
@@ -64,7 +106,7 @@ class DropLabelController extends SlotController {
  * @polymerMixin
  */
 export const UploadMixin = (superClass) =>
-  class UploadMixin extends superClass {
+  class UploadMixin extends I18nMixin(DEFAULT_I18N, superClass) {
     static get properties() {
       return {
         /**
@@ -272,112 +314,6 @@ export const UploadMixin = (superClass) =>
          */
         capture: String,
 
-        /**
-         * 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: 'Upload 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: 'Upload failed, please try again later',
-         *       unexpectedServerError: 'Upload failed due to server error',
-         *       forbidden: 'Upload 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: {
-          type: Object,
-          value() {
-            return {
-              dropFiles: {
-                one: 'Drop file here',
-                many: 'Drop files here',
-              },
-              addFiles: {
-                one: 'Upload 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: 'Upload failed, please try again later',
-                  unexpectedServerError: 'Upload failed due to server error',
-                  forbidden: 'Upload forbidden',
-                },
-              },
-              file: {
-                retry: 'Retry',
-                start: 'Start',
-                remove: 'Remove',
-              },
-              units: {
-                size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-              },
-            };
-          },
-        },
-
         /** @private */
         _addButton: {
           type: Object,
@@ -402,13 +338,79 @@ export const UploadMixin = (superClass) =>
 
     static get observers() {
       return [
-        '__updateAddButton(_addButton, maxFiles, i18n, maxFilesReached, disabled)',
-        '__updateDropLabel(_dropLabel, maxFiles, i18n)',
-        '__updateFileList(_fileList, files, i18n, disabled)',
+        '__updateAddButton(_addButton, maxFiles, __effectiveI18n, maxFilesReached, disabled)',
+        '__updateDropLabel(_dropLabel, maxFiles, __effectiveI18n)',
+        '__updateFileList(_fileList, files, __effectiveI18n, disabled)',
         '__updateMaxFilesReached(maxFiles, files)',
       ];
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following JSON structure and default values:
+     *
+     * ```
+     * {
+     *   dropFiles: {
+     *     one: 'Drop file here',
+     *     many: 'Drop files here'
+     *   },
+     *   addFiles: {
+     *     one: 'Upload 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: 'Upload failed, please try again later',
+     *       unexpectedServerError: 'Upload failed due to server error',
+     *       forbidden: 'Upload 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
+     *   }
+     * }
+     * ```
+     * @return {!UploadI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /** @private */
     get __acceptRegexp() {
       if (!this.accept) {
@@ -462,16 +464,16 @@ export const UploadMixin = (superClass) =>
 
     /** @private */
     _formatSize(bytes) {
-      if (typeof this.i18n.formatSize === 'function') {
-        return this.i18n.formatSize(bytes);
+      if (typeof this.__effectiveI18n.formatSize === 'function') {
+        return this.__effectiveI18n.formatSize(bytes);
       }
 
       // https://wiki.ubuntu.com/UnitsPolicy
-      const base = this.i18n.units.sizeBase || 1000;
+      const base = this.__effectiveI18n.units.sizeBase || 1000;
       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.__effectiveI18n.units.size[unit]}`;
     }
 
     /** @private */
@@ -489,8 +491,8 @@ export const UploadMixin = (superClass) =>
 
     /** @private */
     _formatTime(seconds, split) {
-      if (typeof this.i18n.formatTime === 'function') {
-        return this.i18n.formatTime(seconds, split);
+      if (typeof this.__effectiveI18n.formatTime === 'function') {
+        return this.__effectiveI18n.formatTime(seconds, split);
       }
 
       // Fill HH:MM:SS with leading zeros
@@ -510,8 +512,8 @@ export const UploadMixin = (superClass) =>
     _formatFileProgress(file) {
       const remainingTime =
         file.loaded > 0
-          ? this.i18n.uploading.remainingTime.prefix + file.remainingStr
-          : this.i18n.uploading.remainingTime.unknown;
+          ? this.__effectiveI18n.uploading.remainingTime.prefix + file.remainingStr
+          : this.__effectiveI18n.uploading.remainingTime.unknown;
 
       return `${file.totalStr}: ${file.progress}% (${remainingTime})`;
     }
@@ -522,30 +524,30 @@ export const UploadMixin = (superClass) =>
     }
 
     /** @private */
-    __updateAddButton(addButton, maxFiles, i18n, maxFilesReached, disabled) {
+    __updateAddButton(addButton, maxFiles, effectiveI18n, maxFilesReached, disabled) {
       if (addButton) {
         addButton.disabled = disabled || maxFilesReached;
 
         // Only update text content for the default button element
         if (addButton === this._addButtonController.defaultNode) {
-          addButton.textContent = this._i18nPlural(maxFiles, i18n.addFiles);
+          addButton.textContent = this._i18nPlural(maxFiles, effectiveI18n.addFiles);
         }
       }
     }
 
     /** @private */
-    __updateDropLabel(dropLabel, maxFiles, i18n) {
+    __updateDropLabel(dropLabel, maxFiles, effectiveI18n) {
       // Only update text content for the default label element
       if (dropLabel && dropLabel === this._dropLabelController.defaultNode) {
-        dropLabel.textContent = this._i18nPlural(maxFiles, i18n.dropFiles);
+        dropLabel.textContent = this._i18nPlural(maxFiles, effectiveI18n.dropFiles);
       }
     }
 
     /** @private */
-    __updateFileList(list, files, i18n, disabled) {
+    __updateFileList(list, files, effectiveI18n, disabled) {
       if (list) {
         list.items = [...files];
-        list.i18n = i18n;
+        list.i18n = effectiveI18n;
         list.disabled = disabled;
       }
     }
@@ -606,6 +608,19 @@ export const UploadMixin = (superClass) =>
         }
       }
 
+      // In some cases (like dragging attachments from Outlook on Windows), "webkitGetAsEntry"
+      // can return null for "dataTransfer" items. Also, there is no reason to check for
+      // "webkitGetAsEntry" when there are no folders. Therefore, "dataTransfer.files" is used
+      // to handle such cases.
+      const containsFolders = Array.from(dropEvent.dataTransfer.items)
+        .filter((item) => !!item)
+        .filter((item) => typeof item.webkitGetAsEntry === 'function')
+        .map((item) => item.webkitGetAsEntry())
+        .some((entry) => !!entry && entry.isDirectory);
+      if (!containsFolders) {
+        return Promise.resolve(dropEvent.dataTransfer.files ? Array.from(dropEvent.dataTransfer.files) : []);
+      }
+
       const filePromises = Array.from(dropEvent.dataTransfer.items)
         .map((item) => item.webkitGetAsEntry())
         .filter((entry) => !!entry)
@@ -691,12 +706,12 @@ export const UploadMixin = (superClass) =>
           if (progress < 100) {
             this._setStatus(file, total, loaded, elapsed);
             stalledId = setTimeout(() => {
-              file.status = this.i18n.uploading.status.stalled;
+              file.status = this.__effectiveI18n.uploading.status.stalled;
               this._renderFileList();
             }, 2000);
           } else {
             file.loadedStr = file.totalStr;
-            file.status = this.i18n.uploading.status.processing;
+            file.status = this.__effectiveI18n.uploading.status.processing;
           }
         }
 
@@ -726,11 +741,11 @@ export const UploadMixin = (superClass) =>
             return;
           }
           if (xhr.status === 0) {
-            file.error = this.i18n.uploading.error.serverUnavailable;
+            file.error = this.__effectiveI18n.uploading.error.serverUnavailable;
           } else if (xhr.status >= 500) {
-            file.error = this.i18n.uploading.error.unexpectedServerError;
+            file.error = this.__effectiveI18n.uploading.error.unexpectedServerError;
           } else if (xhr.status >= 400) {
-            file.error = this.i18n.uploading.error.forbidden;
+            file.error = this.__effectiveI18n.uploading.error.forbidden;
           }
 
           file.complete = !file.error;
@@ -765,7 +780,7 @@ export const UploadMixin = (superClass) =>
       xhr.open(this.method, file.uploadTarget, true);
       this._configureXhr(xhr);
 
-      file.status = this.i18n.uploading.status.connecting;
+      file.status = this.__effectiveI18n.uploading.status.connecting;
       file.uploading = file.indeterminate = true;
       file.complete = file.abort = file.error = file.held = false;
 
@@ -824,7 +839,7 @@ export const UploadMixin = (superClass) =>
 
     /** @private */
     _renderFileList() {
-      if (this._fileList) {
+      if (this._fileList && typeof this._fileList.requestContentUpdate === 'function') {
         this._fileList.requestContentUpdate();
       }
     }
@@ -844,7 +859,7 @@ export const UploadMixin = (superClass) =>
       if (this.maxFilesReached) {
         this.dispatchEvent(
           new CustomEvent('file-reject', {
-            detail: { file, error: this.i18n.error.tooManyFiles },
+            detail: { file, error: this.__effectiveI18n.error.tooManyFiles },
           }),
         );
         return;
@@ -852,7 +867,7 @@ export const UploadMixin = (superClass) =>
       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.__effectiveI18n.error.fileIsTooBig },
           }),
         );
         return;
@@ -861,14 +876,14 @@ export const UploadMixin = (superClass) =>
       if (re && !(re.test(file.type) || re.test(file.name))) {
         this.dispatchEvent(
           new CustomEvent('file-reject', {
-            detail: { file, error: this.i18n.error.incorrectFileType },
+            detail: { file, error: this.__effectiveI18n.error.incorrectFileType },
           }),
         );
         return;
       }
       file.loaded = 0;
       file.held = true;
-      file.status = this.i18n.uploading.status.held;
+      file.status = this.__effectiveI18n.uploading.status.held;
       this.files = [file, ...this.files];
 
       if (!this.noAuto) {

package/src/vaadin-upload.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2016 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { type UploadFile, UploadMixin } from './vaadin-upload-mixin.js';
@@ -157,7 +156,7 @@ export interface UploadEventMap extends HTMLElementEventMap, UploadCustomEventMa
  * @fires {CustomEvent} upload-retry - Fired when retry upload is requested.
  * @fires {CustomEvent} upload-abort - Fired when upload abort is requested.
  */
-declare class Upload extends UploadMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
+declare class Upload extends UploadMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   addEventListener<K extends keyof UploadEventMap>(
     type: K,
     listener: (this: Upload, ev: UploadEventMap[K]) => void,

package/src/vaadin-upload.js

@@ -7,10 +7,11 @@ import '@vaadin/button/src/vaadin-button.js';
 import './vaadin-upload-icon.js';
 import './vaadin-upload-icons.js';
 import './vaadin-upload-file-list.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { UploadMixin } from './vaadin-upload-mixin.js';
 
@@ -59,33 +60,39 @@ import { UploadMixin } from './vaadin-upload-mixin.js';
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  * @mixes UploadMixin
  */
-class Upload extends UploadMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          position: relative;
-          box-sizing: border-box;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        [hidden] {
-          display: none !important;
-        }
-      </style>
+class Upload extends UploadMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-upload';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    `;
+  }
 
+  /** @protected */
+  render() {
+    return html`
       <div part="primary-buttons">
         <slot name="add-button"></slot>
-        <div part="drop-label" hidden$="[[nodrop]]" id="dropLabelContainer" aria-hidden="true">
+        <div part="drop-label" ?hidden="${this.nodrop}" id="dropLabelContainer" aria-hidden="true">
           <slot name="drop-label-icon"></slot>
           <slot name="drop-label"></slot>
         </div>
@@ -96,18 +103,14 @@ class Upload extends UploadMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
         type="file"
         id="fileInput"
         hidden
-        on-change="_onFileInputChange"
-        accept$="{{accept}}"
-        multiple$="[[_isMultiple(maxFiles)]]"
-        capture$="[[capture]]"
+        @change="${this._onFileInputChange}"
+        accept="${this.accept}"
+        ?multiple="${this._isMultiple(this.maxFiles)}"
+        capture="${ifDefined(this.capture)}"
       />
     `;
   }
 
-  static get is() {
-    return 'vaadin-upload';
-  }
-
   /**
    * Fired when a file cannot be added to the queue due to a constrain:
    *  file-size, file-type or maxFiles

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -389,6 +389,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "i18n",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  dropFiles: {\n    one: 'Drop file here',\n    many: 'Drop files here'\n  },\n  addFiles: {\n    one: 'Upload File...',\n    many: 'Upload Files...'\n  },\n  error: {\n    tooManyFiles: 'Too Many Files.',\n    fileIsTooBig: 'File is Too Big.',\n    incorrectFileType: 'Incorrect File Type.'\n  },\n  uploading: {\n    status: {\n      connecting: 'Connecting...',\n      stalled: 'Stalled',\n      processing: 'Processing File...',\n      held: 'Queued'\n    },\n    remainingTime: {\n      prefix: 'remaining time: ',\n      unknown: 'unknown remaining time'\n    },\n    error: {\n      serverUnavailable: 'Upload failed, please try again later',\n      unexpectedServerError: 'Upload failed due to server error',\n      forbidden: 'Upload forbidden'\n    }\n  },\n  file: {\n    retry: 'Retry',\n    start: 'Start',\n    remove: 'Remove'\n  },\n  units: {\n    size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n    sizeBase: 1000\n  },\n  formatSize: function(bytes) {\n    // returns the size followed by the best suitable unit\n  },\n  formatTime: function(seconds, [secs, mins, hours]) {\n    // returns a 'HH:MM:SS' string\n  }\n}\n```",
+                "value": {
+                  "type": [
+                    "UploadI18n"
+                  ]
+                }
+              },
               {
                 "name": "disabled",
                 "description": "If true, the user cannot interact with this element.",
@@ -517,15 +526,6 @@
                     "undefined"
                   ]
                 }
-              },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  dropFiles: {\n    one: 'Drop file here',\n    many: 'Drop files here'\n  },\n  addFiles: {\n    one: 'Upload File...',\n    many: 'Upload Files...'\n  },\n  error: {\n    tooManyFiles: 'Too Many Files.',\n    fileIsTooBig: 'File is Too Big.',\n    incorrectFileType: 'Incorrect File Type.'\n  },\n  uploading: {\n    status: {\n      connecting: 'Connecting...',\n      stalled: 'Stalled',\n      processing: 'Processing File...',\n      held: 'Queued'\n    },\n    remainingTime: {\n      prefix: 'remaining time: ',\n      unknown: 'unknown remaining time'\n    },\n    error: {\n      serverUnavailable: 'Upload failed, please try again later',\n      unexpectedServerError: 'Upload failed due to server error',\n      forbidden: 'Upload forbidden'\n    }\n  },\n  file: {\n    retry: 'Retry',\n    start: 'Start',\n    remove: 'Remove'\n  },\n  units: {\n    size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n    sizeBase: 1000\n  },\n  formatSize: function(bytes) {\n    // returns the size followed by the best suitable unit\n  },\n  formatTime: function(seconds, [secs, mins, hours]) {\n    // returns a 'HH:MM:SS' string\n  }\n}\n```",
-                "value": {
-                  "type": [
-                    "UploadI18n"
-                  ]
-                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -152,6 +152,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".i18n",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  dropFiles: {\n    one: 'Drop file here',\n    many: 'Drop files here'\n  },\n  addFiles: {\n    one: 'Upload File...',\n    many: 'Upload Files...'\n  },\n  error: {\n    tooManyFiles: 'Too Many Files.',\n    fileIsTooBig: 'File is Too Big.',\n    incorrectFileType: 'Incorrect File Type.'\n  },\n  uploading: {\n    status: {\n      connecting: 'Connecting...',\n      stalled: 'Stalled',\n      processing: 'Processing File...',\n      held: 'Queued'\n    },\n    remainingTime: {\n      prefix: 'remaining time: ',\n      unknown: 'unknown remaining time'\n    },\n    error: {\n      serverUnavailable: 'Upload failed, please try again later',\n      unexpectedServerError: 'Upload failed due to server error',\n      forbidden: 'Upload forbidden'\n    }\n  },\n  file: {\n    retry: 'Retry',\n    start: 'Start',\n    remove: 'Remove'\n  },\n  units: {\n    size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n    sizeBase: 1000\n  },\n  formatSize: function(bytes) {\n    // returns the size followed by the best suitable unit\n  },\n  formatTime: function(seconds, [secs, mins, hours]) {\n    // returns a 'HH:MM:SS' string\n  }\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".target",
               "description": "The server URL. The default value is an empty string, which means that\n_window.location_ will be used.",
@@ -222,13 +229,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  dropFiles: {\n    one: 'Drop file here',\n    many: 'Drop files here'\n  },\n  addFiles: {\n    one: 'Upload File...',\n    many: 'Upload Files...'\n  },\n  error: {\n    tooManyFiles: 'Too Many Files.',\n    fileIsTooBig: 'File is Too Big.',\n    incorrectFileType: 'Incorrect File Type.'\n  },\n  uploading: {\n    status: {\n      connecting: 'Connecting...',\n      stalled: 'Stalled',\n      processing: 'Processing File...',\n      held: 'Queued'\n    },\n    remainingTime: {\n      prefix: 'remaining time: ',\n      unknown: 'unknown remaining time'\n    },\n    error: {\n      serverUnavailable: 'Upload failed, please try again later',\n      unexpectedServerError: 'Upload failed due to server error',\n      forbidden: 'Upload forbidden'\n    }\n  },\n  file: {\n    retry: 'Retry',\n    start: 'Start',\n    remove: 'Remove'\n  },\n  units: {\n    size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n    sizeBase: 1000\n  },\n  formatSize: function(bytes) {\n    // returns the size followed by the best suitable unit\n  },\n  formatTime: function(seconds, [secs, mins, hours]) {\n    // returns a 'HH:MM:SS' string\n  }\n}\n```",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@file-reject",
               "description": "Fired when a file cannot be added to the queue due to a constrain:\n file-size, file-type or maxFiles",