@duetds/components 4.30.0 → 4.33.0

package/lib/collection/components/duet-upload/duet-upload.js

@@ -3,16 +3,20 @@
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
+import { debounce } from "../../utils/js-utils";
 import { getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { DuetUploadFileList } from "./duet-upload-file-list";
+import { ErrorItem } from "./duet-upload-editable-item-error";
+import { ProgressItem } from "./duet-upload-editable-item-inprogres";
+import { SuccessItem } from "./duet-upload-editable-item-success";
 import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./duet-upload-validators";
-import { getError } from "./errorcodes.utils";
+import { getError, getI18nError } from "./errorcodes.utils";
 import { makeXhrRequest } from "./xhr.helpers";
 /**
  * @slot header  - named slot - to place content after description / caption
- * @slot fileheader - named slot - to place content above filelist (only displayed when filelist contains items)
- * @slot filefooter - named slot - to place content below filelist (only displayed when filelist contains items)
+ * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
+ * @slot filelist - named slot - should always contain a configurable duet-editable-table or a component that exposes the same functionality
+ * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
  */
 export class DuetUpload {
   constructor() {
@@ -22,9 +26,19 @@ export class DuetUpload {
     this.buttonId = createID("DuetButton");
     this.labelId = createID("DuetLabel");
     this.uploadId = createID("DuetUpload");
+    this.editableTableId = createID("DuetEditableTable");
     this.filesInProgress = new Map();
     this.fileMaxReached = false;
     this.bytesMaxReached = false;
+    //region Internally exposed properties
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
     /**
      * State() variables
      */
@@ -34,9 +48,91 @@ export class DuetUpload {
      * it will be up to you to handle the upload and return progress information to the upload-component
      */
     this.external = false;
+    /**
+     * If set the upload component will not display an upload button, you will have to create on yourself
+     * and call the exposed methods startUpload
+     */
+    this.hideButton = false;
+    /**
+     * Default actions added to all files
+     */
+    this.actions = [
+      {
+        icon: "action-delete",
+        color: "color-danger",
+        color_hover: "category-home",
+        id: "delete",
+        map: ["success", "failure"],
+        label: {
+          fi: "Poista tiedosto",
+          en: "Poista tiedosto",
+          sv: "Ta bort filen",
+        },
+      },
+      {
+        icon: "navigation-close",
+        color: "primary",
+        color_hover: "category-home",
+        id: "cancel",
+        map: ["inprogress"],
+        label: {
+          fi: "Keskeytä lähetys",
+          en: "Cancel the upload",
+          sv: "Stop överföringen",
+        },
+      },
+    ];
+    /**
+     * If enabled the filelist will create links on successfully uploaded items,
+     * this requires the server can respond with link URIs in the correct format
+     */
+    this.showLinks = false;
+    /**
+     * Property to change the aria upload progress text read aloud by screenreaders
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Choose files",
+      }
+     */
+    this.statusLabelDefaults = {
+      fi: {
+        inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
+        inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
+        done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
+        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        files: "tiedostot",
+        file: "tiedosto",
+      },
+      sv: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades",
+        done: "Alla {filesTotal} har lagts till",
+        doneWithErrors: "Handling slutförd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades",
+        files: "filer",
+        file: "fil",
+      },
+      en: {
+        inProgress: "Adding {filesUploaded} of {filesTotal}",
+        inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
+        done: "All {filesTotal} added successfully",
+        doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
+        files: "tiedostoa",
+        file: "tiedosto",
+      },
+    };
+    /**
+     * Strings used for the status aria-label
+     */
+    this.statusMessageLabel = getLocaleString(this.statusLabelDefaults);
     /**
      * Property to change descriptionDefaults defaults on the component.
      * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Add an attachment",
+      }
      */
     this.buttonLabelDefaults = {
       fi: "Lisää liite",
@@ -72,6 +168,10 @@ export class DuetUpload {
      * browser from displaying its own validation errors.
      */
     this.required = false;
+    /**
+     * Visually hides the groups labels in the editable table list used to display the list of files
+     */
+    this.hideGroups = false;
     /**
      * Map of string that contain list of uploaded files.
      */
@@ -83,6 +183,7 @@ export class DuetUpload {
     /**
      * Property to change labelDefaults defaults on the component.
      * normally you would handle these strings on an application level and override @label when needed
+     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
      */
     this.labelDefaults = {
       fi: "Lisää liite",
@@ -97,6 +198,11 @@ export class DuetUpload {
     /**
      * Property to change descriptionDefaults defaults on the component.
      * normally you would handle these strings on an application level and override @label when needed
+     * @default {
+        fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+        sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+        en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+      }
      */
     this.descriptionDefaults = {
       fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
@@ -105,12 +211,20 @@ export class DuetUpload {
     };
     /**
      * Description for the upload component.
-     * @default ...
+     * @default {
+        fi: "Voit liittää {filetypes}-muotoisia tiedostoja sekä yleisimpiä videotiedostoja. Voit lähettää {maxbytes} verran tiedostoja yhdellä kertaa, ja lisätä enintään {maxfiles} liitettä kerrallaan.",
+        sv: "Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer åt gången och lägga till upp till {maxfiles} bilagor åt gången.",
+        en: "You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.",
+      }
      */
     this.description = getLocaleString(this.descriptionDefaults);
     /**
      * Defaults for the filelist's empty state.
-     * @default { fi: "Lisää liite",sv: "Lägg till en bilaga",en: "Add attachments"}
+     * @default {
+        fi: "Ei vielä lisättyjä tiedostoja.",
+        sv: "Inga filer har lagts till ännu.",
+        en: "No files added yet.",
+       }
      */
     this.fileListEmptyDefaults = {
       fi: "Ei vielä lisättyjä tiedostoja.",
@@ -126,21 +240,6 @@ export class DuetUpload {
      * Display the input in error state along with an error message.
      */
     this.error = "";
-    /**
-     * Visually hide the label, but still show it to screen readers.
-     */
-    this.labelHidden = false;
-    /**
-     * if set, allows capture of media from user camera / microphone
-     * The capture attribute value is a string that specifies which camera to use for capture
-     * of image or video data, if the accept attribute indicates that the input should be of
-     * one of those types. A value of user indicates that the user-facing camera and/or
-     * microphone should be used. A value of environment specifies that the outward-facing
-     * camera and/or microphone should be used. If this attribute is missing, the user agent
-     * is free to decide on its own what to do. If the requested facing mode isn't available,
-     * the user agent may fall back to its preferred default mode.
-     */
-    this.capture = undefined;
     /**
      * Use maxBytes to specify the maximum size in Bytes of a file that can be uploaded.
      */
@@ -172,10 +271,95 @@ export class DuetUpload {
      * by default this is off, setting this to true will limit the users choices to what has been explicitly set
      */
     this.limitSelection = false;
+    //region Private functions
     /**
      * Private functions
      */
-    this.kick = () => (this.tick = Date.now()); // will trigger re-render
+    this.listenForActionEvents = () => {
+      this.element.addEventListener("duetEditableItemAction", (e) => {
+        const detail = e.detail;
+        const { action, keyName, originalEvent } = detail;
+        switch (action) {
+          case "delete":
+            this.onDelete(keyName, originalEvent);
+            break;
+          case "cancel":
+            this.onCancel(keyName, originalEvent);
+            break;
+          default:
+          // code block
+        }
+      });
+    };
+    this.verifyValidity = () => {
+      const { invalid, valid } = this.getFilesAsArray();
+      const oldValid = this.valid;
+      this.valid = invalid.length === 0 && valid.length !== 0;
+      if (this.valid !== oldValid) {
+        this.duetState.emit({
+          originalEvent: undefined,
+          data: { valid: this.valid, from: "componentWillRender" },
+          component: "duet-upload",
+        });
+      }
+    };
+    this.getGroupFromItemData = (item) => {
+      if (item.valid && item.progress === 100) {
+        // if the item has a group, move the file to that group instead
+        // of into the standard success group
+        if (item.group) {
+          return item.group;
+        }
+        return this.DefaultGroups.success;
+      }
+      else if (item.progress > 0 && item.progress !== 100) {
+        return this.DefaultGroups.inprogress;
+      }
+      else if (!item.valid) {
+        return this.DefaultGroups.failure;
+      }
+      else if (item.group) {
+        return item.group;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.getItemHTMLFromItemData = (data, group) => {
+      if (group === this.DefaultGroups.success) {
+        return h(SuccessItem, { data: data, showLinks: this.showLinks });
+      }
+      else if (group === this.DefaultGroups.inprogress) {
+        return h(ProgressItem, { progress: data.progress, name: data.item.name });
+      }
+      else if (group === this.DefaultGroups.failure) {
+        return h(ErrorItem, { data: data });
+      }
+      else if (data.group) {
+        return data.html;
+      }
+      else {
+        return "none";
+      }
+    };
+    this.convertToDuetEditableTableItems = () => {
+      // we're always recreating the map - in order to force an update down stream.
+      const itemData = new Map();
+      //walk the files Map and convert to DuetEditableTableItemData
+      this.files.forEach((data, key, _originalMap) => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        itemData.set(key, {
+          uid: data.uid,
+          item,
+          group,
+        });
+      });
+      return itemData;
+    };
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // will trigger re-render
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
       const fileItem = this.files.get(item);
@@ -186,10 +370,14 @@ export class DuetUpload {
       }
     };
     this.updateProgress = (ev, name) => {
-      if (ev.lengthComputable) {
-        const percentComplete = (ev.loaded / ev.total) * 100;
+      console.log(this.filesInProgress.size);
+      const updateProgressHelper = percentComplete => {
         this.updateValueInMap(name, "progress", percentComplete);
         this.onProgress(name, percentComplete, ev);
+      };
+      if (ev.lengthComputable) {
+        const percentComplete = (ev.loaded / ev.total) * 100;
+        updateProgressHelper(percentComplete);
       }
       else {
         console.log("cant read progress");
@@ -228,16 +416,17 @@ export class DuetUpload {
        */
       this.nativeInput.value = "";
     };
-    this.getI18nError = (errorCode) => {
-      const errorFromJson = getError(errorCode);
-      const i18String = getLocaleString(errorFromJson.message);
-      if (i18String === "" || !i18String) {
-        return errorFromJson.system_message;
-      }
-      else {
-        return i18String;
-      }
+    this.startUpload = async (ev, metaData = undefined) => {
+      await this.setFocus();
+      this.metaData = metaData;
+      this.nativeInput.click();
+      this.onUpload(ev, metaData);
+      ev.stopPropagation();
+      ev.preventDefault();
+      return;
     };
+    //endregion
+    //region Eventlisteners for the XHR requests
     /**
      * Eventlisteners for the XHR requests
      */
@@ -247,6 +436,7 @@ export class DuetUpload {
     };
     this.transferDone = (xhr, name, status) => {
       this.updateValueInMap(name, "status", status, false);
+      this.updateValueInMap(name, "uploaded", true, false);
       try {
         const response = JSON.parse(xhr.response);
         this.updateValueInMap(name, "url", response.url);
@@ -260,12 +450,13 @@ export class DuetUpload {
     this.transferDoneWithFailure = (xhr, name, status) => {
       try {
         const { error } = JSON.parse(xhr.response);
-        this.updateValueInMap(name, "error", { message: error.message, type: error.type });
+        this.updateValueInMap(name, "error", { message: error.message, type: error.type }, false);
       }
       catch (e) {
         console.error("Server did not respond with expected response error:{message: string, type: int}");
-        this.updateValueInMap(name, "error", { type: status });
+        this.updateValueInMap(name, "error", { type: status }, false);
       }
+      this.updateValueInMap(name, "valid", false, true);
     };
     this.transferFailed = name => {
       this.updateValueInMap(name, "error", getError("duet-upload-001"));
@@ -296,15 +487,15 @@ export class DuetUpload {
       this.files.delete(key);
       this.validateTotals();
       this.kick();
-      if (!this.external) {
-        this.makeXHRDeleteRequest(deletedItem);
-      }
-      this.resetFormFields();
       this.duetDelete.emit({
         originalEvent: ev,
         data: { deletion: deletedItem },
         component: "duet-upload",
       });
+      if (!this.external) {
+        this.makeXHRDeleteRequest(deletedItem);
+      }
+      this.resetFormFields();
     };
     this.onCancel = (key, ev) => {
       const cancelledItem = this.files.get(key);
@@ -323,9 +514,10 @@ export class DuetUpload {
         component: "duet-upload",
       });
     };
-    this.onUpload = (ev) => {
+    this.onUpload = (ev, metaData) => {
       this.duetUpload.emit({
         originalEvent: ev,
+        metaData,
         component: "duet-upload",
       });
     };
@@ -357,37 +549,26 @@ export class DuetUpload {
         data: { files: this.files },
       });
     };
-    this.startUpload = async (ev) => {
-      await this.setFocus();
-      this.nativeInput.click();
-      this.onUpload(ev);
-      ev.stopPropagation();
-      ev.preventDefault();
-    };
   }
   watchValidHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
       this.kick();
     }
   }
+  //endregion
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.listenForActionEvents();
   }
   componentWillRender() {
-    const { invalid, valid } = this.getFilesAsArray();
-    const oldValid = this.valid;
-    this.valid = invalid.length === 0 && valid.length !== 0;
-    if (this.valid !== oldValid) {
-      this.duetState.emit({
-        originalEvent: undefined,
-        data: { valid: this.valid, from: "componentWillRender" },
-        component: "duet-upload",
-      });
-    }
+    // listen to the events from the component
+    this.verifyValidity();
   }
+  //endregion
+  //region XHR requests
   /**
    * XHR request utilities
    */
@@ -406,23 +587,37 @@ export class DuetUpload {
     xhr.upload.addEventListener("abort", () => {
       this.transferCanceled(name);
     });
-    return makeXhrRequest({ data, name }, { type: "POST", uri: this.uri, xhr, argument: null, headers: null }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
+    return makeXhrRequest({
+      payload: { data, name },
+      options: { type: "POST", uri: this.uri, xhr, argument: null, headers: null },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
   }
   makeXHRDeleteRequest(data) {
     const { uid, item } = data;
     const xhr = new XMLHttpRequest();
     // don't present server issues to user on deletes, just remove them from the visible list
-    return makeXhrRequest({ data: null, name }, {
-      type: "DELETE",
-      xhr,
-      uri: this.uri,
-      arguments: `?key=${uid}&name=${item.name}`,
-      headers: {
-        "x-fileuid": uid,
-        "x-filename": item.name,
-      },
-    }, this.transferDoneWithFailure, this.transferDone, this.trackProgress);
+    return makeXhrRequest({
+      payload: { data: null, name },
+      options: {
+        type: "DELETE",
+        xhr,
+        uri: this.uri,
+        arguments: `?key=${uid}&name=${item.name}`,
+        headers: {
+          "x-fileuid": uid,
+          "x-filename": item.name,
+        },
+      },
+      onFailure: this.transferDoneWithFailure,
+      onSuccess: this.transferDone,
+      onProgress: this.trackProgress,
+    });
   }
+  //endregion
+  //region EventHandlers
   /**
    * Component event handling.
    */
@@ -431,7 +626,7 @@ export class DuetUpload {
     const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
     // FileList is a nice array like structure but
     // to ensure uniqueness of files we use a mapping structure and
-    // key to the name (makes it easier to delete)
+    // key to the name (makes it easier to delete as well)
     if (selectedFiles) {
       for (const item of selectedFiles) {
         const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
@@ -444,6 +639,8 @@ export class DuetUpload {
           uid,
           item: item,
           size: item.size,
+          meta: this.metaData,
+          uploaded: false,
           valid,
           error: {
             type: valid ? undefined : errorType,
@@ -472,8 +669,14 @@ export class DuetUpload {
           data.append("file", item);
           data.append("uid", uid);
           data.append("name", item.name);
-          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size }));
-          fileListItem.xhr = await this.makeXHRPostRequest(data);
+          data.append("metadata", JSON.stringify({ uid, url: this.uri, size: item.size, meta: fileListItem.meta }));
+          try {
+            fileListItem.xhr = await this.makeXHRPostRequest(data);
+          }
+          catch (e) {
+            // in case one of the global maxes have been reached, invalidate the file
+            this.updateValueInMap(item.name, "valid", false, false);
+          }
         }
         // kick the stat to force update
         this.kick();
@@ -481,12 +684,15 @@ export class DuetUpload {
     }
     // reset the form, so that a user may upload a file again (with the same name)
     this.resetFormFields();
+    // reset the internal metaData state
+    this.metaData = undefined;
     this.duetChange.emit({
       originalEvent: ev,
       data: { files: this.files },
       component: "duet-upload",
     });
   }
+  //endregion
   /**
    * Sets focus on the specified `duet-input`. Use this method instead of the global
    * `input.focus()`.
@@ -497,6 +703,15 @@ export class DuetUpload {
     }
     return;
   }
+  /**
+   * Method for invoking the upload sequence
+   */
+  async upload(metaData = undefined) {
+    await this.setFocus();
+    this.metaData = metaData;
+    this.nativeInput.click();
+    return;
+  }
   /**
    * Get list of files, divided in errors and valid sections
    */
@@ -506,6 +721,12 @@ export class DuetUpload {
     }
     return this.getFilesAsArray();
   }
+  /**
+   * Convenience method for updating a of an item in the files attribute
+   */
+  async updateValue(item, key, value) {
+    this.updateValueInMap(item, key, value);
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -518,26 +739,26 @@ export class DuetUpload {
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
       h("duet-fieldset", { label: this.label, caption: caption },
         h("slot", { name: "header" }),
-        h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+        !this.files.size && (h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
             "duet-upload-filelist-empty": !this.files.size,
             "duet-upload-filelist": true,
             "duet-upload-filelist-filled": this.files.size,
-          }, id: this.labelId, for: identifier }, !this.files.size && this.fileListEmpty),
+          }, id: this.labelId, for: identifier }, this.fileListEmpty)),
         !!this.files.size && h("slot", { name: "fileheader" }),
-        h(DuetUploadFileList, { data: this.getFilesAsArray(), onDelete: this.onDelete, onCancel: this.onCancel, getError: this.getI18nError },
-          h("li", null, "testing something")),
+        !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.statusMessageLabel })),
+        !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, items: this.convertToDuetEditableTableItems() })),
         !!this.files.size && h("slot", { name: "filefooter" }),
         h("duet-spacer", { size: "large" }),
-        h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel),
+        !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)),
         h("duet-spacer", { size: "medium" }),
         (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", null,
-          this.fileMaxReached && this.getI18nError("duet-upload-301"),
-          this.bytesMaxReached && this.getI18nError("duet-upload-202"))),
+          this.fileMaxReached && getI18nError("duet-upload-301"),
+          this.bytesMaxReached && getI18nError("duet-upload-202"))),
         h("duet-spacer", { size: "medium" }),
         h("duet-visually-hidden", null,
           h("input", { ref: input => {
               this.nativeInput = input;
-            }, accept: this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
+            }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
               "duet-upload": true,
             }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
   }
@@ -636,6 +857,47 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hideButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set the upload component will not display an upload button, you will have to create on yourself\nand call the exposed methods startUpload"
+      },
+      "attribute": "hide-upload-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "actions": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableActions | string",
+        "resolved": "string | { icon: string; color: string; color_hover: string; id: string; map?: string[]; label?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableActions": {
+            "location": "import",
+            "path": "../duet-editable-table/duet-editable-table-item"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Default actions added to all files"
+      },
+      "attribute": "actions",
+      "reflect": false,
+      "defaultValue": "[\n    {\n      icon: \"action-delete\",\n      color: \"color-danger\",\n      color_hover: \"category-home\",\n      id: \"delete\",\n      map: [\"success\", \"failure\"],\n      label: {\n        fi: \"Poista tiedosto\",\n        en: \"Poista tiedosto\",\n        sv: \"Ta bort filen\",\n      },\n    },\n    {\n      icon: \"navigation-close\",\n      color: \"primary\",\n      color_hover: \"category-home\",\n      id: \"cancel\",\n      map: [\"inprogress\"],\n      label: {\n        fi: \"Keskeyt\u00E4 l\u00E4hetys\",\n        en: \"Cancel the upload\",\n        sv: \"Stop \u00F6verf\u00F6ringen\",\n      },\n    },\n  ]"
+    },
     "uri": {
       "type": "string",
       "mutable": false,
@@ -653,6 +915,24 @@ export class DuetUpload {
       "attribute": "uri",
       "reflect": false
     },
+    "showLinks": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If enabled the filelist will create links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format"
+      },
+      "attribute": "show-links",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "caption": {
       "type": "string",
       "mutable": false,
@@ -670,12 +950,12 @@ export class DuetUpload {
       "attribute": "caption",
       "reflect": false
     },
-    "buttonLabelDefaults": {
-      "type": "unknown",
+    "statusLabelDefaults": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -685,10 +965,62 @@ export class DuetUpload {
       },
       "required": false,
       "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Lis\u00E4\u00E4 liite\",\nsv: \"L\u00E4gg till en bilaga\",\nen: \"Choose files\",\n}"
+          }],
+        "text": "Property to change the aria upload progress text read aloud by screenreaders"
+      },
+      "attribute": "status-label-default",
+      "reflect": false,
+      "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"tiedostoa\",\n      file: \"tiedosto\",\n    },\n  }"
+    },
+    "statusMessageLabel": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "StatusMessage",
+        "resolved": "{ inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
+        "references": {
+          "StatusMessage": {
+            "location": "import",
+            "path": "./duet-upload-aria-status"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
       "docs": {
         "tags": [],
+        "text": "Strings used for the status aria-label"
+      },
+      "defaultValue": "getLocaleString(this.statusLabelDefaults)"
+    },
+    "buttonLabelDefaults": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
+        "references": {
+          "DuetLangObject": {
+            "location": "import",
+            "path": "../../utils/language-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Lis\u00E4\u00E4 liite\",\nsv: \"L\u00E4gg till en bilaga\",\nen: \"Add an attachment\",\n}"
+          }],
         "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
       },
+      "attribute": "button-label-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 liite\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Add an attachment\",\n  }"
     },
     "buttonLabel": {
@@ -703,8 +1035,8 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ fi: \"Lis\u00E4\u00E4 liite\", sv: \"L\u00E4gg till en bilaga\", en: \"Add an attachment\" }",
-            "name": "default"
+            "name": "default",
+            "text": "{ fi: \"Lis\u00E4\u00E4 liite\", sv: \"L\u00E4gg till en bilaga\", en: \"Add an attachment\" }"
           }],
         "text": "Label of button"
       },
@@ -829,6 +1161,52 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "false"
     },
+    "groups": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetEditableTableGroupNames | string",
+        "resolved": "string | { id: string; label: DuetLangObject; actionLabel?: DuetLangObject; }[]",
+        "references": {
+          "DuetEditableTableGroupNames": {
+            "location": "import",
+            "path": "../duet-editable-table/duet-editable-table"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "required",
+            "text": undefined
+          }, {
+            "name": "example",
+            "text": "[{ id: \"success\", label: {fi: \"Onnistunut\", en: \"Success\", sv: \"Alt klart\", }}]"
+          }],
+        "text": "Array of group names that you want the editable table used to display files to display"
+      },
+      "attribute": "groups",
+      "reflect": false
+    },
+    "hideGroups": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visually hides the groups labels in the editable table list used to display the list of files"
+      },
+      "attribute": "hide-table-labels",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "files": {
       "type": "unknown",
       "mutable": true,
@@ -868,11 +1246,11 @@ export class DuetUpload {
       "defaultValue": "!this.required"
     },
     "labelDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -883,9 +1261,14 @@ export class DuetUpload {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "default",
+            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}"
+          }],
         "text": "Property to change labelDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
       },
+      "attribute": "label-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Lis\u00E4\u00E4 liite\",\n    sv: \"L\u00E4gg till en bilaga\",\n    en: \"Add attachments\",\n  }"
     },
     "label": {
@@ -900,8 +1283,8 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}"
           }],
         "text": "Label for the input."
       },
@@ -910,11 +1293,11 @@ export class DuetUpload {
       "defaultValue": "getLocaleString(this.labelDefaults)"
     },
     "descriptionDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -925,9 +1308,14 @@ export class DuetUpload {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: \"Voit liitt\u00E4\u00E4 {filetypes}-muotoisia tiedostoja sek\u00E4 yleisimpi\u00E4 videotiedostoja. Voit l\u00E4hett\u00E4\u00E4 {maxbytes} verran tiedostoja yhdell\u00E4 kertaa, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan.\",\nsv: \"Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer \u00E5t g\u00E5ngen och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen.\",\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.\",\n}"
+          }],
         "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
       },
+      "attribute": "description-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Voit liitt\u00E4\u00E4 {filetypes}-muotoisia tiedostoja sek\u00E4 yleisimpi\u00E4 videotiedostoja. Voit l\u00E4hett\u00E4\u00E4 {maxbytes} verran tiedostoja yhdell\u00E4 kertaa, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan.\",\n    sv: \"Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer \u00E5t g\u00E5ngen och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen.\",\n    en: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.\",\n  }"
     },
     "description": {
@@ -942,8 +1330,8 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "...",
-            "name": "default"
+            "name": "default",
+            "text": "{\nfi: \"Voit liitt\u00E4\u00E4 {filetypes}-muotoisia tiedostoja sek\u00E4 yleisimpi\u00E4 videotiedostoja. Voit l\u00E4hett\u00E4\u00E4 {maxbytes} verran tiedostoja yhdell\u00E4 kertaa, ja lis\u00E4t\u00E4 enint\u00E4\u00E4n {maxfiles} liitett\u00E4 kerrallaan.\",\nsv: \"Du kan bifoga filer i flg. formater {filetypes} samt de vanligaste videofilerna. Du kan ladda upp {maxbytes} filer \u00E5t g\u00E5ngen och l\u00E4gga till upp till {maxfiles} bilagor \u00E5t g\u00E5ngen.\",\nen: \"You may attach the following filetypes: {filetypes} - as well as the most common video files. You can upload {maxbytes} of files at a time, and add up to {maxfiles} attachments at a time.\",\n}"
           }],
         "text": "Description for the upload component."
       },
@@ -952,11 +1340,11 @@ export class DuetUpload {
       "defaultValue": "getLocaleString(this.descriptionDefaults)"
     },
     "fileListEmptyDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -968,11 +1356,13 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ fi: \"Lis\u00E4\u00E4 liite\",sv: \"L\u00E4gg till en bilaga\",en: \"Add attachments\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{\nfi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",\nsv: \"Inga filer har lagts till \u00E4nnu.\",\nen: \"No files added yet.\",\n}"
           }],
         "text": "Defaults for the filelist's empty state."
       },
+      "attribute": "list-empty-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",\n    sv: \"Inga filer har lagts till \u00E4nnu.\",\n    en: \"No files added yet.\",\n  }"
     },
     "fileListEmpty": {
@@ -987,8 +1377,8 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "{ fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",sv: \"Inga filer har lagts till \u00E4nnu.\",en: \"No files added yet.\"}",
-            "name": "default"
+            "name": "default",
+            "text": "{ fi: \"Ei viel\u00E4 lis\u00E4ttyj\u00E4 tiedostoja.\",sv: \"Inga filer har lagts till \u00E4nnu.\",en: \"No files added yet.\"}"
           }],
         "text": "Label for the filelist's empty state."
       },
@@ -1014,24 +1404,6 @@ export class DuetUpload {
       "reflect": false,
       "defaultValue": "\"\""
     },
-    "labelHidden": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Visually hide the label, but still show it to screen readers."
-      },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "false"
-    },
     "name": {
       "type": "string",
       "mutable": false,
@@ -1049,24 +1421,6 @@ export class DuetUpload {
       "attribute": "name",
       "reflect": false
     },
-    "capture": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "string | boolean",
-        "resolved": "boolean | string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "if set, allows capture of media from user camera / microphone\nThe capture attribute value is a string that specifies which camera to use for capture\nof image or video data, if the accept attribute indicates that the input should be of\none of those types. A value of user indicates that the user-facing camera and/or\nmicrophone should be used. A value of environment specifies that the outward-facing\ncamera and/or microphone should be used. If this attribute is missing, the user agent\nis free to decide on its own what to do. If the requested facing mode isn't available,\nthe user agent may fall back to its preferred default mode."
-      },
-      "attribute": "capture",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
     "maxBytes": {
       "type": "number",
       "mutable": false,
@@ -1133,8 +1487,8 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": ": .pdf,.doc,.docx",
-            "name": "example"
+            "name": "example",
+            "text": ": .pdf,.doc,.docx"
           }],
         "text": "A string of commaseperated file type values that are allowed"
       },
@@ -1154,8 +1508,8 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": ": image/*,application/msword,",
-            "name": "example"
+            "name": "example",
+            "text": ": image/*,application/msword,"
           }],
         "text": "A string of commaseperated mime type values that are allowed"
       },
@@ -1232,7 +1586,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1251,7 +1605,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1270,7 +1624,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1289,7 +1643,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1308,7 +1662,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1327,7 +1681,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1346,7 +1700,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1365,7 +1719,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1384,7 +1738,7 @@ export class DuetUpload {
       },
       "complexType": {
         "original": "DuetUploadEvent",
-        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-upload\"; }",
+        "resolved": "{ originalEvent?: Event; data?: Record<string, any>; metaData?: Record<string, any>; component: \"duet-upload\"; }",
         "references": {
           "DuetUploadEvent": {
             "location": "local"
@@ -1415,6 +1769,25 @@ export class DuetUpload {
         "tags": []
       }
     },
+    "upload": {
+      "complexType": {
+        "signature": "(metaData?: any | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method for invoking the upload sequence",
+        "tags": []
+      }
+    },
     "getFiles": {
       "complexType": {
         "signature": "() => Promise<false | { valid: any[]; invalid: any[]; }>",
@@ -1430,6 +1803,31 @@ export class DuetUpload {
         "text": "Get list of files, divided in errors and valid sections",
         "tags": []
       }
+    },
+    "updateValue": {
+      "complexType": {
+        "signature": "(item: string, key: string, value: any) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Convenience method for updating a of an item in the files attribute",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "element"; }