@vaadin/upload 24.6.0-alpha3 → 24.6.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha3",
+  "version": "24.6.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/vaadin-lit-upload-file-list.js",
-    "!src/vaadin-lit-upload-file.js",
-    "!src/vaadin-lit-upload-icon.js",
-    "!src/vaadin-lit-upload.d.ts",
-    "!src/vaadin-lit-upload.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -42,17 +37,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.6.0-alpha3",
-    "@vaadin/button": "24.6.0-alpha3",
-    "@vaadin/component-base": "24.6.0-alpha3",
-    "@vaadin/progress-bar": "24.6.0-alpha3",
-    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha3",
-    "@vaadin/vaadin-material-styles": "24.6.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha3",
+    "@vaadin/a11y-base": "24.6.0-alpha5",
+    "@vaadin/button": "24.6.0-alpha5",
+    "@vaadin/component-base": "24.6.0-alpha5",
+    "@vaadin/progress-bar": "24.6.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha5",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.6.0-alpha3",
+    "@vaadin/chai-plugins": "24.6.0-alpha5",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -60,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "f917e587caaf86b3d55598233811409b0f34ff69"
+  "gitHead": "cbfa46fe276f254dcaa99a622710d56df7f0a539"
 }

package/src/vaadin-lit-upload-file-list.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-upload-file.js';
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { UploadFileListMixin } from './vaadin-upload-file-list-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-upload>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @mixes UploadFileListMixin
+ * @private
+ */
+class UploadFileList extends UploadFileListMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-upload-file-list';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      [part='list'] {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <ul part="list">
+        <slot></slot>
+      </ul>
+    `;
+  }
+}
+
+defineCustomElement(UploadFileList);
+
+export { UploadFileList };

package/src/vaadin-lit-upload-file.js

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
+import './vaadin-upload-icons.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { 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';
+
+/**
+ * LitElement based version of `<vaadin-upload-file>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-upload-file';
+  }
+
+  static get styles() {
+    return uploadFileStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="row">
+        <div part="info">
+          <div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
+          <div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
+
+          <div part="meta">
+            <div part="name" id="name">${this.fileName}</div>
+            <div part="status" ?hidden="${!this.status}" id="status">${this.status}</div>
+            <div part="error" id="error" ?hidden="${!this.errorMessage}">${this.errorMessage}</div>
+          </div>
+        </div>
+        <div part="commands">
+          <button
+            type="button"
+            part="start-button"
+            file-event="file-start"
+            @click="${this._fireFileEvent}"
+            ?hidden="${!this.held}"
+            aria-label="${this.i18n.file.start}"
+            aria-describedby="name"
+          ></button>
+          <button
+            type="button"
+            part="retry-button"
+            file-event="file-retry"
+            @click="${this._fireFileEvent}"
+            ?hidden="${!this.errorMessage}"
+            aria-label="${this.i18n.file.retry}"
+            aria-describedby="name"
+          ></button>
+          <button
+            type="button"
+            part="remove-button"
+            file-event="file-abort"
+            @click="${this._fireFileEvent}"
+            aria-label="${this.i18n.file.remove}"
+            aria-describedby="name"
+          ></button>
+        </div>
+      </div>
+
+      <slot name="progress"></slot>
+    `;
+  }
+}
+
+defineCustomElement(UploadFile);
+
+export { UploadFile };

package/src/vaadin-lit-upload-icon.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-upload>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @private
+ */
+class UploadIcon extends ThemableMixin(LitElement) {
+  static get is() {
+    return 'vaadin-upload-icon';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html``;
+  }
+}
+
+defineCustomElement(UploadIcon);
+
+export { UploadIcon };

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

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-upload.js';

package/src/vaadin-lit-upload.js

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright (c) 2016 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/button/src/vaadin-button.js';
+import './vaadin-lit-upload-icon.js';
+import './vaadin-upload-icons.js';
+import './vaadin-lit-upload-file-list.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';
+
+/**
+ * LitElement based version of `<vaadin-upload>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+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="${this.nodrop}" id="dropLabelContainer" aria-hidden="true">
+          <slot name="drop-label-icon"></slot>
+          <slot name="drop-label"></slot>
+        </div>
+      </div>
+      <slot name="file-list"></slot>
+      <slot></slot>
+      <input
+        type="file"
+        id="fileInput"
+        hidden
+        @change="${this._onFileInputChange}"
+        accept="${this.accept}"
+        ?multiple="${this._isMultiple(this.maxFiles)}"
+        capture="${ifDefined(this.capture)}"
+      />
+    `;
+  }
+}
+
+defineCustomElement(Upload);
+
+export { Upload };

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

@@ -198,7 +198,7 @@ export declare class UploadMixinClass {
    *     many: 'Drop files here'
    *   },
    *   addFiles: {
-   *     one: 'Select File...',
+   *     one: 'Upload File...',
    *     many: 'Upload Files...'
    *   },
    *   error: {
@@ -218,9 +218,9 @@ export declare class UploadMixinClass {
    *       unknown: 'unknown remaining time'
    *     },
    *     error: {
-   *       serverUnavailable: 'Server Unavailable',
-   *       unexpectedServerError: 'Unexpected Server Error',
-   *       forbidden: 'Forbidden'
+   *       serverUnavailable: 'Upload failed, please try again later',
+   *       unexpectedServerError: 'Upload failed due to server error',
+   *       forbidden: 'Upload forbidden'
    *     }
    *   },
    *   file: {

package/src/vaadin-upload-mixin.js

@@ -276,7 +276,7 @@ export const UploadMixin = (superClass) =>
          *     many: 'Drop files here'
          *   },
          *   addFiles: {
-         *     one: 'Select File...',
+         *     one: 'Upload File...',
          *     many: 'Upload Files...'
          *   },
          *   error: {
@@ -296,9 +296,9 @@ export const UploadMixin = (superClass) =>
          *       unknown: 'unknown remaining time'
          *     },
          *     error: {
-         *       serverUnavailable: 'Server Unavailable',
-         *       unexpectedServerError: 'Unexpected Server Error',
-         *       forbidden: 'Forbidden'
+         *       serverUnavailable: 'Upload failed, please try again later',
+         *       unexpectedServerError: 'Upload failed due to server error',
+         *       forbidden: 'Upload forbidden'
          *     }
          *   },
          *   file: {
@@ -558,12 +558,49 @@ export const UploadMixin = (superClass) =>
     }
 
     /** @private */
-    _onDrop(event) {
+    async _onDrop(event) {
       if (!this.nodrop) {
         event.preventDefault();
         this._dragover = this._dragoverValid = false;
-        this._addFiles(event.dataTransfer.files);
+
+        const files = await this.__getFilesFromDropEvent(event);
+        this._addFiles(files);
+      }
+    }
+
+    /**
+     * Get the files from the drop event. The dropped items may contain a
+     * combination of files and directories. If a dropped item is a directory,
+     * it will be recursively traversed to get all files.
+     *
+     * @param {!DragEvent} dropEvent - The drop event
+     * @returns {Promise<File[]>} - The files from the drop event
+     * @private
+     */
+    __getFilesFromDropEvent(dropEvent) {
+      async function getFilesFromEntry(entry) {
+        if (entry.isFile) {
+          return new Promise((resolve) => {
+            // In case of an error, resolve without any files
+            entry.file(resolve, () => resolve([]));
+          });
+        } else if (entry.isDirectory) {
+          const reader = entry.createReader();
+          const entries = await new Promise((resolve) => {
+            // In case of an error, resolve without any files
+            reader.readEntries(resolve, () => resolve([]));
+          });
+          const files = await Promise.all(entries.map(getFilesFromEntry));
+          return files.flat();
+        }
       }
+
+      const filePromises = Array.from(dropEvent.dataTransfer.items)
+        .map((item) => item.webkitGetAsEntry())
+        .filter((entry) => !!entry)
+        .map(getFilesFromEntry);
+
+      return Promise.all(filePromises).then((files) => files.flat());
     }
 
     /** @private */

package/theme/lumo/vaadin-lit-upload.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-upload-styles.js';
+import '../../src/vaadin-lit-upload.js';

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

@@ -0,0 +1,2 @@
+import './vaadin-upload-styles.js';
+import '../../src/vaadin-lit-upload.js';

package/theme/lumo/vaadin-upload-styles.d.ts

@@ -4,5 +4,5 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/progress-bar/theme/lumo/vaadin-progress-bar.js';
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import '@vaadin/progress-bar/theme/lumo/vaadin-progress-bar-styles.js';

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

@@ -4,8 +4,8 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/progress-bar/theme/lumo/vaadin-progress-bar.js';
+import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
+import '@vaadin/progress-bar/theme/lumo/vaadin-progress-bar-styles.js';
 import { fieldButton } from '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 

package/theme/material/vaadin-lit-upload.d.ts

@@ -0,0 +1,2 @@
+import './vaadin-upload-styles.js';
+import '../../src/vaadin-lit-upload.js';

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

@@ -0,0 +1,2 @@
+import './vaadin-upload-styles.js';
+import '../../src/vaadin-lit-upload.js';

package/theme/material/vaadin-upload-styles.d.ts

@@ -1,5 +1,5 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/progress-bar/theme/material/vaadin-progress-bar.js';
+import '@vaadin/button/theme/material/vaadin-button-styles.js';
+import '@vaadin/progress-bar/theme/material/vaadin-progress-bar-styles.js';

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

@@ -1,8 +1,8 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/font-icons.js';
 import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/progress-bar/theme/material/vaadin-progress-bar.js';
+import '@vaadin/button/theme/material/vaadin-button-styles.js';
+import '@vaadin/progress-bar/theme/material/vaadin-progress-bar-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(

package/vaadin-lit-upload.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-upload.js';

package/vaadin-lit-upload.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-upload.js';
+export * from './src/vaadin-lit-upload.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha3",
+  "version": "24.6.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -480,7 +480,7 @@
               },
               {
                 "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: 'Select 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: 'Server Unavailable',\n      unexpectedServerError: 'Unexpected Server Error',\n      forbidden: '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```",
+                "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"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/upload",
-  "version": "24.6.0-alpha3",
+  "version": "24.6.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -210,7 +210,7 @@
             },
             {
               "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: 'Select 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: 'Server Unavailable',\n      unexpectedServerError: 'Unexpected Server Error',\n      forbidden: '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```",
+              "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"
               }