@duetds/components 4.30.1 → 4.33.1

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

@@ -3,16 +3,19 @@
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
-import { getLocaleString } from "../../utils/language-utils";
+import { debounce } from "../../utils/js-utils";
+import { getLocaleString, sanitizeString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { DuetUploadFileList } from "./duet-upload-file-list";
-import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./duet-upload-validators";
-import { getError } from "./errorcodes.utils";
+import { getError, getI18nError } from "./errorcodes.utils";
+import { ErrorItem } from "./upload-editable-item-error";
+import { ProgressItem } from "./upload-editable-item-inprogres";
+import { SuccessItem } from "./upload-editable-item-success";
+import { validateFile, validateTotalAmountIsAboveMax, validateTotalSizeIsAboveMax } from "./upload-validators";
 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 filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
  */
 export class DuetUpload {
   constructor() {
@@ -22,9 +25,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;
+    this.internalStatusMessageLabel = undefined;
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
     /**
      * State() variables
      */
@@ -35,8 +48,115 @@ export class DuetUpload {
      */
     this.external = false;
     /**
-     * Property to change descriptionDefaults defaults on the component.
-     * normally you would handle these strings on an application level and override @label when needed
+     * If set the upload component will not display an upload button, you will have to create one yourself
+     * and call the exposed method startUpload
+     */
+    this.hideButton = false;
+    /**
+     * Default actions added to the internally used duet-editable-table
+     */
+    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 editable-table will display links on successfully uploaded items,
+     * this requires the server can respond with link URIs in the correct format
+     * and that the files are accessible to the user
+     */
+    this.showLinks = false;
+    /**
+     * Property to change the aria upload progress text read aloud by screenreaders
+     * @default {
+     *     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",
+     *     },
+     *   }
+     */
+    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 button label defaults on the component.
+     * @default {
+        fi: "Lisää liite",
+        sv: "Lägg till en bilaga",
+        en: "Add an attachment",
+      }
      */
     this.buttonLabelDefaults = {
       fi: "Lisää liite",
@@ -49,7 +169,7 @@ export class DuetUpload {
      */
     this.buttonLabel = getLocaleString(this.buttonLabelDefaults);
     /**
-     * accessible Label of button
+     * accessible aria-Label of button
      */
     this.accessibleButtonLabel = undefined;
     /**
@@ -72,17 +192,22 @@ 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.
      */
     this.files = new Map();
     /**
-     * Property to read if filelist contains errors or not
+     * Property to read if the internally used editable-table contains errors or not
      */
     this.valid = !this.required;
     /**
      * 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",
@@ -96,7 +221,11 @@ export class DuetUpload {
     this.label = getLocaleString(this.labelDefaults);
     /**
      * 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 +234,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 +263,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.
      */
@@ -175,7 +297,91 @@ export class DuetUpload {
     /**
      * 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 +392,13 @@ export class DuetUpload {
       }
     };
     this.updateProgress = (ev, name) => {
-      if (ev.lengthComputable) {
-        const percentComplete = (ev.loaded / ev.total) * 100;
+      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");
@@ -226,17 +435,20 @@ export class DuetUpload {
        * We reset the form fields to always be able to re-upload files
        * and because we handle all uploads and states internally in the component (not relying on native form elements)
        */
+      /* TODO: it may be a good idea to just update the list so that this always matches what is in the files map,
+       * TODO: this would remove the capability of Re-uploading, unless we can catch and remove the user file from the form filelist before the upload is canceled by the browser
+       * TODO: but for now we'll just reset the form fields
+       */
       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;
     };
     /**
      * Eventlisteners for the XHR requests
@@ -247,6 +459,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 +473,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 +510,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 +537,10 @@ export class DuetUpload {
         component: "duet-upload",
       });
     };
-    this.onUpload = (ev) => {
+    this.onUpload = (ev, metaData) => {
       this.duetUpload.emit({
         originalEvent: ev,
+        metaData,
         component: "duet-upload",
       });
     };
@@ -357,13 +572,6 @@ 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) {
@@ -374,19 +582,18 @@ export class DuetUpload {
    * Component lifecycle events.
    */
   componentWillLoad() {
+    if (typeof this.statusMessageLabel === "string") {
+      this.internalStatusMessageLabel = sanitizeString(this.groups);
+    }
+    else {
+      this.internalStatusMessageLabel = this.statusMessageLabel;
+    }
     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();
   }
   /**
    * XHR request utilities
@@ -406,22 +613,34 @@ 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,
+    });
   }
   /**
    * Component event handling.
@@ -431,7 +650,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 +663,8 @@ export class DuetUpload {
           uid,
           item: item,
           size: item.size,
+          meta: this.metaData,
+          uploaded: false,
           valid,
           error: {
             type: valid ? undefined : errorType,
@@ -472,8 +693,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,6 +708,8 @@ 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 },
@@ -497,6 +726,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 +744,12 @@ export class DuetUpload {
     }
     return this.getFilesAsArray();
   }
+  /**
+   * Convenience method for updating the value of a key:value inside 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 +762,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.internalStatusMessageLabel })),
+        !!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 +880,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 one yourself\nand call the exposed method 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 the internally used duet-editable-table"
+      },
+      "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 +938,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 editable-table will display links on successfully uploaded items,\nthis requires the server can respond with link URIs in the correct format\nand that the files are accessible to the user"
+      },
+      "attribute": "show-links",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "caption": {
       "type": "string",
       "mutable": false,
@@ -670,12 +973,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 +988,64 @@ export class DuetUpload {
       },
       "required": false,
       "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\ndone: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\ndoneWithErrors:\n\"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\nfiles: \"tiedostot\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Alla {filesTotal} har lagts till\",\ndoneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"All {filesTotal} added successfully\",\ndoneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\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": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "StatusMessage | string",
+        "resolved": "string | { inProgress: string; inProgressWithErrors: string; done: string; doneWithErrors: string; file: string; files: string; }",
+        "references": {
+          "StatusMessage": {
+            "location": "import",
+            "path": "../duet-upload-aria-status/duet-upload-aria-status"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
       "docs": {
         "tags": [],
-        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+        "text": "Strings used for the status aria-label"
+      },
+      "attribute": "status-message-label",
+      "reflect": false,
+      "defaultValue": "getLocaleString(\n    this.statusLabelDefaults\n  )"
+    },
+    "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 button label defaults on the component."
       },
+      "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 +1060,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"
       },
@@ -724,7 +1081,7 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "accessible Label of button"
+        "text": "accessible aria-Label of button"
       },
       "attribute": "accessible-button-label",
       "reflect": false,
@@ -829,6 +1186,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 to use to display files"
+      },
+      "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,
@@ -861,18 +1264,18 @@ export class DuetUpload {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Property to read if filelist contains errors or not"
+        "text": "Property to read if the internally used editable-table contains errors or not"
       },
       "attribute": "valid",
       "reflect": true,
       "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 +1286,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 +1308,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 +1318,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 +1333,14 @@ export class DuetUpload {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Property to change descriptionDefaults defaults on the component.\nnormally you would handle these strings on an application level and override @label when needed"
+        "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."
       },
+      "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 +1355,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 +1365,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 +1381,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 +1402,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 +1429,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 +1446,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 +1512,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 +1533,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 +1611,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 +1630,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 +1649,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 +1668,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 +1687,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 +1706,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 +1725,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 +1744,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 +1763,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 +1794,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 +1828,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 the value of a key:value inside an item in the files attribute",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "element"; }