@ministryofjustice/frontend 5.0.0 → 5.1.0

package/moj/components/multi-file-upload/multi-file-upload.mjs

@@ -1,162 +1,190 @@
-import { dragAndDropSupported, formDataSupported, fileApiSupported } from '../../helpers.mjs';
+import { ConfigurableComponent } from 'govuk-frontend';
 
 /* eslint-disable @typescript-eslint/no-empty-function */
 
-class MultiFileUpload {
+
+/**
+ * @augments {ConfigurableComponent<MultiFileUploadConfig>}
+ */
+class MultiFileUpload extends ConfigurableComponent {
   /**
-   * @param {MultiFileUploadConfig} [params] - Multi file upload config
+   * @param {Element | null} $root - HTML element to use for multi file upload
+   * @param {MultiFileUploadConfig} [config] - Multi file upload config
    */
-  constructor(params = {}) {
-    const {
-      container
-    } = params;
-    if (!container || !(container instanceof HTMLElement) || !(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
+  constructor($root, config = {}) {
+    var _this$config$feedback;
+    super($root, config);
+    if (!MultiFileUpload.isSupported()) {
       return this;
     }
-    this.container = container;
-    this.container.classList.add('moj-multi-file-upload--enhanced');
-    this.defaultParams = {
-      uploadFileEntryHook: () => {},
-      uploadFileExitHook: () => {},
-      uploadFileErrorHook: () => {},
-      fileDeleteHook: () => {},
-      uploadStatusText: 'Uploading files, please wait',
-      dropzoneHintText: 'Drag and drop files here or',
-      dropzoneButtonText: 'Choose files'
-    };
-    this.params = Object.assign({}, this.defaultParams, params);
-    this.feedbackContainer = /** @type {HTMLDivElement} */
-    this.container.querySelector('.moj-multi-file__uploaded-files');
+    const $feedbackContainer = (_this$config$feedback = this.config.feedbackContainer.element) != null ? _this$config$feedback : this.$root.querySelector(this.config.feedbackContainer.selector);
+    if (!$feedbackContainer || !($feedbackContainer instanceof HTMLElement)) {
+      return this;
+    }
+    this.$feedbackContainer = $feedbackContainer;
     this.setupFileInput();
     this.setupDropzone();
     this.setupLabel();
     this.setupStatusBox();
-    this.container.addEventListener('click', this.onFileDeleteClick.bind(this));
+    this.$root.addEventListener('click', this.onFileDeleteClick.bind(this));
+    this.$root.classList.add('moj-multi-file-upload--enhanced');
   }
   setupDropzone() {
-    this.dropzone = document.createElement('div');
-    this.dropzone.classList.add('moj-multi-file-upload__dropzone');
-    this.dropzone.addEventListener('dragover', this.onDragOver.bind(this));
-    this.dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
-    this.dropzone.addEventListener('drop', this.onDrop.bind(this));
-    this.fileInput.replaceWith(this.dropzone);
-    this.dropzone.appendChild(this.fileInput);
+    this.$dropzone = document.createElement('div');
+    this.$dropzone.classList.add('moj-multi-file-upload__dropzone');
+    this.$dropzone.addEventListener('dragover', this.onDragOver.bind(this));
+    this.$dropzone.addEventListener('dragleave', this.onDragLeave.bind(this));
+    this.$dropzone.addEventListener('drop', this.onDrop.bind(this));
+    this.$fileInput.replaceWith(this.$dropzone);
+    this.$dropzone.appendChild(this.$fileInput);
   }
   setupLabel() {
-    const label = document.createElement('label');
-    label.setAttribute('for', this.fileInput.id);
-    label.classList.add('govuk-button', 'govuk-button--secondary');
-    label.textContent = this.params.dropzoneButtonText;
-    const hint = document.createElement('p');
-    hint.classList.add('govuk-body');
-    hint.textContent = this.params.dropzoneHintText;
-    this.label = label;
-    this.dropzone.append(hint);
-    this.dropzone.append(label);
+    const $label = document.createElement('label');
+    $label.setAttribute('for', this.$fileInput.id);
+    $label.classList.add('govuk-button', 'govuk-button--secondary');
+    $label.textContent = this.config.dropzoneButtonText;
+    const $hint = document.createElement('p');
+    $hint.classList.add('govuk-body');
+    $hint.textContent = this.config.dropzoneHintText;
+    this.$label = $label;
+    this.$dropzone.append($hint);
+    this.$dropzone.append($label);
   }
   setupFileInput() {
-    this.fileInput = /** @type {HTMLInputElement} */
-    this.container.querySelector('.moj-multi-file-upload__input');
-    this.fileInput.addEventListener('change', this.onFileChange.bind(this));
-    this.fileInput.addEventListener('focus', this.onFileFocus.bind(this));
-    this.fileInput.addEventListener('blur', this.onFileBlur.bind(this));
+    this.$fileInput = /** @type {HTMLInputElement} */
+    this.$root.querySelector('.moj-multi-file-upload__input');
+    this.$fileInput.addEventListener('change', this.onFileChange.bind(this));
+    this.$fileInput.addEventListener('focus', this.onFileFocus.bind(this));
+    this.$fileInput.addEventListener('blur', this.onFileBlur.bind(this));
   }
   setupStatusBox() {
-    this.status = document.createElement('div');
-    this.status.classList.add('govuk-visually-hidden');
-    this.status.setAttribute('aria-live', 'polite');
-    this.status.setAttribute('role', 'status');
-    this.dropzone.append(this.status);
+    this.$status = document.createElement('div');
+    this.$status.classList.add('govuk-visually-hidden');
+    this.$status.setAttribute('aria-live', 'polite');
+    this.$status.setAttribute('role', 'status');
+    this.$dropzone.append(this.$status);
   }
+
+  /**
+   * @param {DragEvent} event - Drag event
+   */
   onDragOver(event) {
     event.preventDefault();
-    this.dropzone.classList.add('moj-multi-file-upload--dragover');
+    this.$dropzone.classList.add('moj-multi-file-upload--dragover');
   }
   onDragLeave() {
-    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
+    this.$dropzone.classList.remove('moj-multi-file-upload--dragover');
   }
+
+  /**
+   * @param {DragEvent} event - Drag event
+   */
   onDrop(event) {
     event.preventDefault();
-    this.dropzone.classList.remove('moj-multi-file-upload--dragover');
-    this.feedbackContainer.classList.remove('moj-hidden');
-    this.status.textContent = this.params.uploadStatusText;
+    this.$dropzone.classList.remove('moj-multi-file-upload--dragover');
+    this.$feedbackContainer.classList.remove('moj-hidden');
+    this.$status.textContent = this.config.uploadStatusText;
     this.uploadFiles(event.dataTransfer.files);
   }
+
+  /**
+   * @param {FileList} files - File list
+   */
   uploadFiles(files) {
     for (const file of Array.from(files)) {
       this.uploadFile(file);
     }
   }
   onFileChange() {
-    this.feedbackContainer.classList.remove('moj-hidden');
-    this.status.textContent = this.params.uploadStatusText;
-    this.uploadFiles(this.fileInput.files);
-    const fileInput = this.fileInput.cloneNode(true);
-    if (!fileInput || !(fileInput instanceof HTMLInputElement)) {
+    this.$feedbackContainer.classList.remove('moj-hidden');
+    this.$status.textContent = this.config.uploadStatusText;
+    this.uploadFiles(this.$fileInput.files);
+    const $fileInput = this.$fileInput.cloneNode(true);
+    if (!$fileInput || !($fileInput instanceof HTMLInputElement)) {
       return;
     }
-    fileInput.value = '';
-    this.fileInput.replaceWith(fileInput);
+    $fileInput.value = '';
+    this.$fileInput.replaceWith($fileInput);
     this.setupFileInput();
-    this.fileInput.focus();
+    this.$fileInput.focus();
   }
   onFileFocus() {
-    this.label.classList.add('moj-multi-file-upload--focused');
+    this.$label.classList.add('moj-multi-file-upload--focused');
   }
   onFileBlur() {
-    this.label.classList.remove('moj-multi-file-upload--focused');
+    this.$label.classList.remove('moj-multi-file-upload--focused');
   }
+
+  /**
+   * @param {UploadResponseSuccess['success']} success
+   */
   getSuccessHtml(success) {
     return `<span class="moj-multi-file-upload__success"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"/></svg>${success.messageHtml}</span>`;
   }
+
+  /**
+   * @param {UploadResponseError['error']} error
+   */
   getErrorHtml(error) {
     return `<span class="moj-multi-file-upload__error"> <svg class="moj-banner__icon" fill="currentColor" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" height="25" width="25"><path d="M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"/></svg>${error.message}</span>`;
   }
+
+  /**
+   * @param {File} file
+   */
   getFileRow(file) {
-    const row = document.createElement('div');
-    row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
-    row.innerHTML = `
+    const $row = document.createElement('div');
+    $row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row');
+    $row.innerHTML = `
     <div class="govuk-summary-list__value moj-multi-file-upload__message">
       <span class="moj-multi-file-upload__filename">${file.name}</span>
       <span class="moj-multi-file-upload__progress">0%</span>
     </div>
     <div class="govuk-summary-list__actions moj-multi-file-upload__actions"></div>
   `;
-    return row;
+    return $row;
   }
+
+  /**
+   * @param {UploadResponseFile} file
+   */
   getDeleteButton(file) {
-    const button = document.createElement('button');
-    button.setAttribute('type', 'button');
-    button.setAttribute('name', 'delete');
-    button.setAttribute('value', file.filename);
-    button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
-    button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
-    return button;
+    const $button = document.createElement('button');
+    $button.setAttribute('type', 'button');
+    $button.setAttribute('name', 'delete');
+    $button.setAttribute('value', file.filename);
+    $button.classList.add('moj-multi-file-upload__delete', 'govuk-button', 'govuk-button--secondary', 'govuk-!-margin-bottom-0');
+    $button.innerHTML = `Delete <span class="govuk-visually-hidden">${file.originalname}</span>`;
+    return $button;
   }
+
+  /**
+   * @param {File} file
+   */
   uploadFile(file) {
-    this.params.uploadFileEntryHook(this, file);
-    const item = this.getFileRow(file);
-    const message = item.querySelector('.moj-multi-file-upload__message');
-    const actions = item.querySelector('.moj-multi-file-upload__actions');
-    const progress = item.querySelector('.moj-multi-file-upload__progress');
+    this.config.hooks.entryHook(this, file);
+    const $item = this.getFileRow(file);
+    const $message = $item.querySelector('.moj-multi-file-upload__message');
+    const $actions = $item.querySelector('.moj-multi-file-upload__actions');
+    const $progress = $item.querySelector('.moj-multi-file-upload__progress');
     const formData = new FormData();
     formData.append('documents', file);
-    this.feedbackContainer.querySelector('.moj-multi-file-upload__list').append(item);
+    this.$feedbackContainer.querySelector('.moj-multi-file-upload__list').append($item);
     const xhr = new XMLHttpRequest();
     const onLoad = () => {
       if (xhr.status < 200 || xhr.status >= 300 || !('success' in xhr.response)) {
         return onError();
       }
-      message.innerHTML = this.getSuccessHtml(xhr.response.success);
-      this.status.textContent = xhr.response.success.messageText;
-      actions.append(this.getDeleteButton(xhr.response.file));
-      this.params.uploadFileExitHook(this, file, xhr, xhr.responseText);
+      $message.innerHTML = this.getSuccessHtml(xhr.response.success);
+      this.$status.textContent = xhr.response.success.messageText;
+      $actions.append(this.getDeleteButton(xhr.response.file));
+      this.config.hooks.exitHook(this, file, xhr, xhr.responseText);
     };
     const onError = () => {
       const error = new Error(xhr.response && 'error' in xhr.response ? xhr.response.error.message : xhr.statusText || 'Upload failed');
-      message.innerHTML = this.getErrorHtml(error);
-      this.status.textContent = error.message;
-      this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error);
+      $message.innerHTML = this.getErrorHtml(error);
+      this.$status.textContent = error.message;
+      this.config.hooks.errorHook(this, file, xhr, xhr.responseText, error);
     };
     xhr.addEventListener('load', onLoad);
     xhr.addEventListener('error', onError);
@@ -165,15 +193,19 @@ class MultiFileUpload {
         return;
       }
       const percentComplete = Math.round(event.loaded / event.total * 100);
-      progress.textContent = ` ${percentComplete}%`;
+      $progress.textContent = ` ${percentComplete}%`;
     });
-    xhr.open('POST', this.params.uploadUrl);
+    xhr.open('POST', this.config.uploadUrl);
     xhr.responseType = 'json';
     xhr.send(formData);
   }
+
+  /**
+   * @param {MouseEvent} event - Click event
+   */
   onFileDeleteClick(event) {
-    const button = event.target;
-    if (!button || !(button instanceof HTMLButtonElement) || !button.classList.contains('moj-multi-file-upload__delete')) {
+    const $button = event.target;
+    if (!$button || !($button instanceof HTMLButtonElement) || !$button.classList.contains('moj-multi-file-upload__delete')) {
       return;
     }
     event.preventDefault(); // if user refreshes page and then deletes
@@ -183,22 +215,177 @@ class MultiFileUpload {
       if (xhr.status < 200 || xhr.status >= 300) {
         return;
       }
-      const rows = Array.from(this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
-      if (rows.length === 1) {
-        this.feedbackContainer.classList.add('moj-hidden');
+      const $rows = Array.from(this.$feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
+      if ($rows.length === 1) {
+        this.$feedbackContainer.classList.add('moj-hidden');
       }
-      const row = rows.find(row => row.contains(button));
-      if (row) row.remove();
-      this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText);
+      const $rowDelete = $rows.find($row => $row.contains($button));
+      if ($rowDelete) $rowDelete.remove();
+      this.config.hooks.deleteHook(this, undefined, xhr, xhr.responseText);
     });
-    xhr.open('POST', this.params.deleteUrl);
+    xhr.open('POST', this.config.deleteUrl);
     xhr.setRequestHeader('Content-Type', 'application/json');
     xhr.responseType = 'json';
     xhr.send(JSON.stringify({
-      [button.name]: button.value
+      [$button.name]: $button.value
     }));
   }
+  static isSupported() {
+    return this.isDragAndDropSupported() && this.isFormDataSupported() && this.isFileApiSupported();
+  }
+  static isDragAndDropSupported() {
+    const div = document.createElement('div');
+    return typeof div.ondrop !== 'undefined';
+  }
+  static isFormDataSupported() {
+    return typeof FormData === 'function';
+  }
+  static isFileApiSupported() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    return typeof input.files !== 'undefined';
+  }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
 }
 
+/**
+ * Multi file upload config
+ *
+ * @typedef {object} MultiFileUploadConfig
+ * @property {string} [uploadUrl] - File upload URL
+ * @property {string} [deleteUrl] - File delete URL
+ * @property {string} [uploadStatusText] - Upload status text
+ * @property {string} [dropzoneHintText] - Dropzone hint text
+ * @property {string} [dropzoneButtonText] - Dropzone button text
+ * @property {object} [feedbackContainer] - Feedback container config
+ * @property {string} [feedbackContainer.selector] - Selector for feedback container
+ * @property {Element | null} [feedbackContainer.element] - HTML element for feedback container
+ * @property {MultiFileUploadHooks} [hooks] - Upload hooks
+ */
+
+/**
+ * Multi file upload hooks
+ *
+ * @typedef {object} MultiFileUploadHooks
+ * @property {OnUploadFileEntryHook} [entryHook] - File upload entry hook
+ * @property {OnUploadFileExitHook} [exitHook] - File upload exit hook
+ * @property {OnUploadFileErrorHook} [errorHook] - File upload error hook
+ * @property {OnUploadFileDeleteHook} [deleteHook] - File delete hook
+ */
+
+/**
+ * Upload hook: File entry
+ *
+ * @callback OnUploadFileEntryHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} file - File upload
+ */
+
+/**
+ * Upload hook: File exit
+ *
+ * @callback OnUploadFileExitHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} file - File upload
+ * @param {XMLHttpRequest} xhr - XMLHttpRequest
+ * @param {string} textStatus - Text status
+ */
+
+/**
+ * Upload hook: File error
+ *
+ * @callback OnUploadFileErrorHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} file - File upload
+ * @param {XMLHttpRequest} xhr - XMLHttpRequest
+ * @param {string} textStatus - Text status
+ * @param {Error} errorThrown - Error thrown
+ */
+
+/**
+ * Upload hook: File delete
+ *
+ * @callback OnUploadFileDeleteHook
+ * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload
+ * @param {File} [file] - File upload
+ * @param {XMLHttpRequest} xhr - XMLHttpRequest
+ * @param {string} textStatus - Text status
+ */
+
+/**
+ * @typedef {object} UploadResponseSuccess
+ * @property {{ messageText: string, messageHtml: string }} success - Response success
+ * @property {UploadResponseFile} file - Response file
+ */
+
+/**
+ * @typedef {object} UploadResponseError
+ * @property {{ message: string }} error - Response error
+ * @property {UploadResponseFile} file - Response file
+ */
+
+/**
+ * @typedef {object} UploadResponseFile
+ * @property {string} filename - File name
+ * @property {string} originalname - Original file name
+ */
+
+/**
+ * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'
+ */
+MultiFileUpload.moduleName = 'moj-multi-file-upload';
+/**
+ * Multi file upload default config
+ *
+ * @type {MultiFileUploadConfig}
+ */
+MultiFileUpload.defaults = Object.freeze({
+  uploadStatusText: 'Uploading files, please wait',
+  dropzoneHintText: 'Drag and drop files here or',
+  dropzoneButtonText: 'Choose files',
+  feedbackContainer: {
+    selector: '.moj-multi-file__uploaded-files'
+  },
+  hooks: {
+    entryHook: () => {},
+    exitHook: () => {},
+    errorHook: () => {},
+    deleteHook: () => {}
+  }
+});
+/**
+ * Multi file upload config schema
+ *
+ * @satisfies {Schema<MultiFileUploadConfig>}
+ */
+MultiFileUpload.schema = Object.freeze(/** @type {const} */{
+  properties: {
+    uploadUrl: {
+      type: 'string'
+    },
+    deleteUrl: {
+      type: 'string'
+    },
+    uploadStatusText: {
+      type: 'string'
+    },
+    dropzoneHintText: {
+      type: 'string'
+    },
+    dropzoneButtonText: {
+      type: 'string'
+    },
+    feedbackContainer: {
+      type: 'object'
+    },
+    hooks: {
+      type: 'object'
+    }
+  }
+});
+
 export { MultiFileUpload };
 //# sourceMappingURL=multi-file-upload.mjs.map

package/moj/components/multi-file-upload/multi-file-upload.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"multi-file-upload.mjs","sources":["../../../../src/moj/components/multi-file-upload/multi-file-upload.mjs"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n\nimport {\n  dragAndDropSupported,\n  fileApiSupported,\n  formDataSupported\n} from '../../helpers.mjs'\n\nexport class MultiFileUpload {\n  /**\n   * @param {MultiFileUploadConfig} [params] - Multi file upload config\n   */\n  constructor(params = {}) {\n    const { container } = params\n\n    if (\n      !container ||\n      !(container instanceof HTMLElement) ||\n      !(dragAndDropSupported() && formDataSupported() && fileApiSupported())\n    ) {\n      return this\n    }\n\n    this.container = container\n    this.container.classList.add('moj-multi-file-upload--enhanced')\n\n    this.defaultParams = {\n      uploadFileEntryHook: () => {},\n      uploadFileExitHook: () => {},\n      uploadFileErrorHook: () => {},\n      fileDeleteHook: () => {},\n      uploadStatusText: 'Uploading files, please wait',\n      dropzoneHintText: 'Drag and drop files here or',\n      dropzoneButtonText: 'Choose files'\n    }\n\n    this.params = Object.assign({}, this.defaultParams, params)\n\n    this.feedbackContainer = /** @type {HTMLDivElement} */ (\n      this.container.querySelector('.moj-multi-file__uploaded-files')\n    )\n\n    this.setupFileInput()\n    this.setupDropzone()\n    this.setupLabel()\n    this.setupStatusBox()\n\n    this.container.addEventListener('click', this.onFileDeleteClick.bind(this))\n  }\n\n  setupDropzone() {\n    this.dropzone = document.createElement('div')\n    this.dropzone.classList.add('moj-multi-file-upload__dropzone')\n\n    this.dropzone.addEventListener('dragover', this.onDragOver.bind(this))\n    this.dropzone.addEventListener('dragleave', this.onDragLeave.bind(this))\n    this.dropzone.addEventListener('drop', this.onDrop.bind(this))\n\n    this.fileInput.replaceWith(this.dropzone)\n    this.dropzone.appendChild(this.fileInput)\n  }\n\n  setupLabel() {\n    const label = document.createElement('label')\n    label.setAttribute('for', this.fileInput.id)\n    label.classList.add('govuk-button', 'govuk-button--secondary')\n    label.textContent = this.params.dropzoneButtonText\n\n    const hint = document.createElement('p')\n    hint.classList.add('govuk-body')\n    hint.textContent = this.params.dropzoneHintText\n\n    this.label = label\n    this.dropzone.append(hint)\n    this.dropzone.append(label)\n  }\n\n  setupFileInput() {\n    this.fileInput = /** @type {HTMLInputElement} */ (\n      this.container.querySelector('.moj-multi-file-upload__input')\n    )\n    this.fileInput.addEventListener('change', this.onFileChange.bind(this))\n    this.fileInput.addEventListener('focus', this.onFileFocus.bind(this))\n    this.fileInput.addEventListener('blur', this.onFileBlur.bind(this))\n  }\n\n  setupStatusBox() {\n    this.status = document.createElement('div')\n    this.status.classList.add('govuk-visually-hidden')\n    this.status.setAttribute('aria-live', 'polite')\n    this.status.setAttribute('role', 'status')\n    this.dropzone.append(this.status)\n  }\n\n  onDragOver(event) {\n    event.preventDefault()\n    this.dropzone.classList.add('moj-multi-file-upload--dragover')\n  }\n\n  onDragLeave() {\n    this.dropzone.classList.remove('moj-multi-file-upload--dragover')\n  }\n\n  onDrop(event) {\n    event.preventDefault()\n    this.dropzone.classList.remove('moj-multi-file-upload--dragover')\n    this.feedbackContainer.classList.remove('moj-hidden')\n    this.status.textContent = this.params.uploadStatusText\n    this.uploadFiles(event.dataTransfer.files)\n  }\n\n  uploadFiles(files) {\n    for (const file of Array.from(files)) {\n      this.uploadFile(file)\n    }\n  }\n\n  onFileChange() {\n    this.feedbackContainer.classList.remove('moj-hidden')\n    this.status.textContent = this.params.uploadStatusText\n    this.uploadFiles(this.fileInput.files)\n\n    const fileInput = this.fileInput.cloneNode(true)\n    if (!fileInput || !(fileInput instanceof HTMLInputElement)) {\n      return\n    }\n\n    fileInput.value = ''\n    this.fileInput.replaceWith(fileInput)\n\n    this.setupFileInput()\n    this.fileInput.focus()\n  }\n\n  onFileFocus() {\n    this.label.classList.add('moj-multi-file-upload--focused')\n  }\n\n  onFileBlur() {\n    this.label.classList.remove('moj-multi-file-upload--focused')\n  }\n\n  getSuccessHtml(success) {\n    return `<span class=\"moj-multi-file-upload__success\"> <svg class=\"moj-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\"><path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"/></svg>${success.messageHtml}</span>`\n  }\n\n  getErrorHtml(error) {\n    return `<span class=\"moj-multi-file-upload__error\"> <svg class=\"moj-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\"><path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"/></svg>${error.message}</span>`\n  }\n\n  getFileRow(file) {\n    const row = document.createElement('div')\n\n    row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row')\n\n    row.innerHTML = `\n    <div class=\"govuk-summary-list__value moj-multi-file-upload__message\">\n      <span class=\"moj-multi-file-upload__filename\">${file.name}</span>\n      <span class=\"moj-multi-file-upload__progress\">0%</span>\n    </div>\n    <div class=\"govuk-summary-list__actions moj-multi-file-upload__actions\"></div>\n  `\n\n    return row\n  }\n\n  getDeleteButton(file) {\n    const button = document.createElement('button')\n\n    button.setAttribute('type', 'button')\n    button.setAttribute('name', 'delete')\n    button.setAttribute('value', file.filename)\n\n    button.classList.add(\n      'moj-multi-file-upload__delete',\n      'govuk-button',\n      'govuk-button--secondary',\n      'govuk-!-margin-bottom-0'\n    )\n\n    button.innerHTML = `Delete <span class=\"govuk-visually-hidden\">${file.originalname}</span>`\n\n    return button\n  }\n\n  uploadFile(file) {\n    this.params.uploadFileEntryHook(this, file)\n\n    const item = this.getFileRow(file)\n    const message = item.querySelector('.moj-multi-file-upload__message')\n    const actions = item.querySelector('.moj-multi-file-upload__actions')\n    const progress = item.querySelector('.moj-multi-file-upload__progress')\n\n    const formData = new FormData()\n    formData.append('documents', file)\n\n    this.feedbackContainer\n      .querySelector('.moj-multi-file-upload__list')\n      .append(item)\n\n    const xhr = new XMLHttpRequest()\n\n    const onLoad = () => {\n      if (\n        xhr.status < 200 ||\n        xhr.status >= 300 ||\n        !('success' in xhr.response)\n      ) {\n        return onError()\n      }\n\n      message.innerHTML = this.getSuccessHtml(xhr.response.success)\n      this.status.textContent = xhr.response.success.messageText\n\n      actions.append(this.getDeleteButton(xhr.response.file))\n      this.params.uploadFileExitHook(this, file, xhr, xhr.responseText)\n    }\n\n    const onError = () => {\n      const error = new Error(\n        xhr.response && 'error' in xhr.response\n          ? xhr.response.error.message\n          : xhr.statusText || 'Upload failed'\n      )\n\n      message.innerHTML = this.getErrorHtml(error)\n      this.status.textContent = error.message\n\n      this.params.uploadFileErrorHook(this, file, xhr, xhr.responseText, error)\n    }\n\n    xhr.addEventListener('load', onLoad)\n    xhr.addEventListener('error', onError)\n\n    xhr.upload.addEventListener('progress', (event) => {\n      if (!event.lengthComputable) {\n        return\n      }\n\n      const percentComplete = Math.round((event.loaded / event.total) * 100)\n      progress.textContent = ` ${percentComplete}%`\n    })\n\n    xhr.open('POST', this.params.uploadUrl)\n    xhr.responseType = 'json'\n\n    xhr.send(formData)\n  }\n\n  onFileDeleteClick(event) {\n    const button = event.target\n\n    if (\n      !button ||\n      !(button instanceof HTMLButtonElement) ||\n      !button.classList.contains('moj-multi-file-upload__delete')\n    ) {\n      return\n    }\n\n    event.preventDefault() // if user refreshes page and then deletes\n\n    const xhr = new XMLHttpRequest()\n\n    xhr.addEventListener('load', () => {\n      if (xhr.status < 200 || xhr.status >= 300) {\n        return\n      }\n\n      const rows = Array.from(\n        this.feedbackContainer.querySelectorAll('.moj-multi-file-upload__row')\n      )\n\n      if (rows.length === 1) {\n        this.feedbackContainer.classList.add('moj-hidden')\n      }\n\n      const row = rows.find((row) => row.contains(button))\n      if (row) row.remove()\n\n      this.params.fileDeleteHook(this, undefined, xhr, xhr.responseText)\n    })\n\n    xhr.open('POST', this.params.deleteUrl)\n    xhr.setRequestHeader('Content-Type', 'application/json')\n    xhr.responseType = 'json'\n\n    xhr.send(\n      JSON.stringify({\n        [button.name]: button.value\n      })\n    )\n  }\n}\n"],"names":["MultiFileUpload","constructor","params","container","HTMLElement","dragAndDropSupported","formDataSupported","fileApiSupported","classList","add","defaultParams","uploadFileEntryHook","uploadFileExitHook","uploadFileErrorHook","fileDeleteHook","uploadStatusText","dropzoneHintText","dropzoneButtonText","Object","assign","feedbackContainer","querySelector","setupFileInput","setupDropzone","setupLabel","setupStatusBox","addEventListener","onFileDeleteClick","bind","dropzone","document","createElement","onDragOver","onDragLeave","onDrop","fileInput","replaceWith","appendChild","label","setAttribute","id","textContent","hint","append","onFileChange","onFileFocus","onFileBlur","status","event","preventDefault","remove","uploadFiles","dataTransfer","files","file","Array","from","uploadFile","cloneNode","HTMLInputElement","value","focus","getSuccessHtml","success","messageHtml","getErrorHtml","error","message","getFileRow","row","innerHTML","name","getDeleteButton","button","filename","originalname","item","actions","progress","formData","FormData","xhr","XMLHttpRequest","onLoad","response","onError","messageText","responseText","Error","statusText","upload","lengthComputable","percentComplete","Math","round","loaded","total","open","uploadUrl","responseType","send","target","HTMLButtonElement","contains","rows","querySelectorAll","length","find","undefined","deleteUrl","setRequestHeader","JSON","stringify"],"mappings":"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"}
+{"version":3,"file":"multi-file-upload.mjs","sources":["../../../../src/moj/components/multi-file-upload/multi-file-upload.mjs"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n\nimport { ConfigurableComponent } from 'govuk-frontend'\n\n/**\n * @augments {ConfigurableComponent<MultiFileUploadConfig>}\n */\nexport class MultiFileUpload extends ConfigurableComponent {\n  /**\n   * @param {Element | null} $root - HTML element to use for multi file upload\n   * @param {MultiFileUploadConfig} [config] - Multi file upload config\n   */\n  constructor($root, config = {}) {\n    super($root, config)\n\n    if (!MultiFileUpload.isSupported()) {\n      return this\n    }\n\n    const $feedbackContainer =\n      this.config.feedbackContainer.element ??\n      this.$root.querySelector(this.config.feedbackContainer.selector)\n\n    if (!$feedbackContainer || !($feedbackContainer instanceof HTMLElement)) {\n      return this\n    }\n\n    this.$feedbackContainer = $feedbackContainer\n\n    this.setupFileInput()\n    this.setupDropzone()\n    this.setupLabel()\n    this.setupStatusBox()\n\n    this.$root.addEventListener('click', this.onFileDeleteClick.bind(this))\n    this.$root.classList.add('moj-multi-file-upload--enhanced')\n  }\n\n  setupDropzone() {\n    this.$dropzone = document.createElement('div')\n    this.$dropzone.classList.add('moj-multi-file-upload__dropzone')\n\n    this.$dropzone.addEventListener('dragover', this.onDragOver.bind(this))\n    this.$dropzone.addEventListener('dragleave', this.onDragLeave.bind(this))\n    this.$dropzone.addEventListener('drop', this.onDrop.bind(this))\n\n    this.$fileInput.replaceWith(this.$dropzone)\n    this.$dropzone.appendChild(this.$fileInput)\n  }\n\n  setupLabel() {\n    const $label = document.createElement('label')\n    $label.setAttribute('for', this.$fileInput.id)\n    $label.classList.add('govuk-button', 'govuk-button--secondary')\n    $label.textContent = this.config.dropzoneButtonText\n\n    const $hint = document.createElement('p')\n    $hint.classList.add('govuk-body')\n    $hint.textContent = this.config.dropzoneHintText\n\n    this.$label = $label\n    this.$dropzone.append($hint)\n    this.$dropzone.append($label)\n  }\n\n  setupFileInput() {\n    this.$fileInput = /** @type {HTMLInputElement} */ (\n      this.$root.querySelector('.moj-multi-file-upload__input')\n    )\n    this.$fileInput.addEventListener('change', this.onFileChange.bind(this))\n    this.$fileInput.addEventListener('focus', this.onFileFocus.bind(this))\n    this.$fileInput.addEventListener('blur', this.onFileBlur.bind(this))\n  }\n\n  setupStatusBox() {\n    this.$status = document.createElement('div')\n    this.$status.classList.add('govuk-visually-hidden')\n    this.$status.setAttribute('aria-live', 'polite')\n    this.$status.setAttribute('role', 'status')\n    this.$dropzone.append(this.$status)\n  }\n\n  /**\n   * @param {DragEvent} event - Drag event\n   */\n  onDragOver(event) {\n    event.preventDefault()\n    this.$dropzone.classList.add('moj-multi-file-upload--dragover')\n  }\n\n  onDragLeave() {\n    this.$dropzone.classList.remove('moj-multi-file-upload--dragover')\n  }\n\n  /**\n   * @param {DragEvent} event - Drag event\n   */\n  onDrop(event) {\n    event.preventDefault()\n    this.$dropzone.classList.remove('moj-multi-file-upload--dragover')\n    this.$feedbackContainer.classList.remove('moj-hidden')\n    this.$status.textContent = this.config.uploadStatusText\n    this.uploadFiles(event.dataTransfer.files)\n  }\n\n  /**\n   * @param {FileList} files - File list\n   */\n  uploadFiles(files) {\n    for (const file of Array.from(files)) {\n      this.uploadFile(file)\n    }\n  }\n\n  onFileChange() {\n    this.$feedbackContainer.classList.remove('moj-hidden')\n    this.$status.textContent = this.config.uploadStatusText\n    this.uploadFiles(this.$fileInput.files)\n\n    const $fileInput = this.$fileInput.cloneNode(true)\n    if (!$fileInput || !($fileInput instanceof HTMLInputElement)) {\n      return\n    }\n\n    $fileInput.value = ''\n    this.$fileInput.replaceWith($fileInput)\n\n    this.setupFileInput()\n    this.$fileInput.focus()\n  }\n\n  onFileFocus() {\n    this.$label.classList.add('moj-multi-file-upload--focused')\n  }\n\n  onFileBlur() {\n    this.$label.classList.remove('moj-multi-file-upload--focused')\n  }\n\n  /**\n   * @param {UploadResponseSuccess['success']} success\n   */\n  getSuccessHtml(success) {\n    return `<span class=\"moj-multi-file-upload__success\"> <svg class=\"moj-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\"><path d=\"M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z\"/></svg>${success.messageHtml}</span>`\n  }\n\n  /**\n   * @param {UploadResponseError['error']} error\n   */\n  getErrorHtml(error) {\n    return `<span class=\"moj-multi-file-upload__error\"> <svg class=\"moj-banner__icon\" fill=\"currentColor\" role=\"presentation\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\"><path d=\"M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z\"/></svg>${error.message}</span>`\n  }\n\n  /**\n   * @param {File} file\n   */\n  getFileRow(file) {\n    const $row = document.createElement('div')\n\n    $row.classList.add('govuk-summary-list__row', 'moj-multi-file-upload__row')\n\n    $row.innerHTML = `\n    <div class=\"govuk-summary-list__value moj-multi-file-upload__message\">\n      <span class=\"moj-multi-file-upload__filename\">${file.name}</span>\n      <span class=\"moj-multi-file-upload__progress\">0%</span>\n    </div>\n    <div class=\"govuk-summary-list__actions moj-multi-file-upload__actions\"></div>\n  `\n\n    return $row\n  }\n\n  /**\n   * @param {UploadResponseFile} file\n   */\n  getDeleteButton(file) {\n    const $button = document.createElement('button')\n\n    $button.setAttribute('type', 'button')\n    $button.setAttribute('name', 'delete')\n    $button.setAttribute('value', file.filename)\n\n    $button.classList.add(\n      'moj-multi-file-upload__delete',\n      'govuk-button',\n      'govuk-button--secondary',\n      'govuk-!-margin-bottom-0'\n    )\n\n    $button.innerHTML = `Delete <span class=\"govuk-visually-hidden\">${file.originalname}</span>`\n\n    return $button\n  }\n\n  /**\n   * @param {File} file\n   */\n  uploadFile(file) {\n    this.config.hooks.entryHook(this, file)\n\n    const $item = this.getFileRow(file)\n    const $message = $item.querySelector('.moj-multi-file-upload__message')\n    const $actions = $item.querySelector('.moj-multi-file-upload__actions')\n    const $progress = $item.querySelector('.moj-multi-file-upload__progress')\n\n    const formData = new FormData()\n    formData.append('documents', file)\n\n    this.$feedbackContainer\n      .querySelector('.moj-multi-file-upload__list')\n      .append($item)\n\n    const xhr = new XMLHttpRequest()\n\n    const onLoad = () => {\n      if (\n        xhr.status < 200 ||\n        xhr.status >= 300 ||\n        !('success' in xhr.response)\n      ) {\n        return onError()\n      }\n\n      $message.innerHTML = this.getSuccessHtml(xhr.response.success)\n      this.$status.textContent = xhr.response.success.messageText\n\n      $actions.append(this.getDeleteButton(xhr.response.file))\n      this.config.hooks.exitHook(this, file, xhr, xhr.responseText)\n    }\n\n    const onError = () => {\n      const error = new Error(\n        xhr.response && 'error' in xhr.response\n          ? xhr.response.error.message\n          : xhr.statusText || 'Upload failed'\n      )\n\n      $message.innerHTML = this.getErrorHtml(error)\n      this.$status.textContent = error.message\n\n      this.config.hooks.errorHook(this, file, xhr, xhr.responseText, error)\n    }\n\n    xhr.addEventListener('load', onLoad)\n    xhr.addEventListener('error', onError)\n\n    xhr.upload.addEventListener('progress', (event) => {\n      if (!event.lengthComputable) {\n        return\n      }\n\n      const percentComplete = Math.round((event.loaded / event.total) * 100)\n      $progress.textContent = ` ${percentComplete}%`\n    })\n\n    xhr.open('POST', this.config.uploadUrl)\n    xhr.responseType = 'json'\n\n    xhr.send(formData)\n  }\n\n  /**\n   * @param {MouseEvent} event - Click event\n   */\n  onFileDeleteClick(event) {\n    const $button = event.target\n\n    if (\n      !$button ||\n      !($button instanceof HTMLButtonElement) ||\n      !$button.classList.contains('moj-multi-file-upload__delete')\n    ) {\n      return\n    }\n\n    event.preventDefault() // if user refreshes page and then deletes\n\n    const xhr = new XMLHttpRequest()\n\n    xhr.addEventListener('load', () => {\n      if (xhr.status < 200 || xhr.status >= 300) {\n        return\n      }\n\n      const $rows = Array.from(\n        this.$feedbackContainer.querySelectorAll('.moj-multi-file-upload__row')\n      )\n\n      if ($rows.length === 1) {\n        this.$feedbackContainer.classList.add('moj-hidden')\n      }\n\n      const $rowDelete = $rows.find(($row) => $row.contains($button))\n      if ($rowDelete) $rowDelete.remove()\n\n      this.config.hooks.deleteHook(this, undefined, xhr, xhr.responseText)\n    })\n\n    xhr.open('POST', this.config.deleteUrl)\n    xhr.setRequestHeader('Content-Type', 'application/json')\n    xhr.responseType = 'json'\n\n    xhr.send(\n      JSON.stringify({\n        [$button.name]: $button.value\n      })\n    )\n  }\n\n  static isSupported() {\n    return (\n      this.isDragAndDropSupported() &&\n      this.isFormDataSupported() &&\n      this.isFileApiSupported()\n    )\n  }\n\n  static isDragAndDropSupported() {\n    const div = document.createElement('div')\n    return typeof div.ondrop !== 'undefined'\n  }\n\n  static isFormDataSupported() {\n    return typeof FormData === 'function'\n  }\n\n  static isFileApiSupported() {\n    const input = document.createElement('input')\n    input.type = 'file'\n    return typeof input.files !== 'undefined'\n  }\n\n  /**\n   * Name for the component used when initialising using data-module attributes.\n   */\n  static moduleName = 'moj-multi-file-upload'\n\n  /**\n   * Multi file upload default config\n   *\n   * @type {MultiFileUploadConfig}\n   */\n  static defaults = Object.freeze({\n    uploadStatusText: 'Uploading files, please wait',\n    dropzoneHintText: 'Drag and drop files here or',\n    dropzoneButtonText: 'Choose files',\n    feedbackContainer: {\n      selector: '.moj-multi-file__uploaded-files'\n    },\n    hooks: {\n      entryHook: () => {},\n      exitHook: () => {},\n      errorHook: () => {},\n      deleteHook: () => {}\n    }\n  })\n\n  /**\n   * Multi file upload config schema\n   *\n   * @satisfies {Schema<MultiFileUploadConfig>}\n   */\n  static schema = Object.freeze(\n    /** @type {const} */ ({\n      properties: {\n        uploadUrl: { type: 'string' },\n        deleteUrl: { type: 'string' },\n        uploadStatusText: { type: 'string' },\n        dropzoneHintText: { type: 'string' },\n        dropzoneButtonText: { type: 'string' },\n        feedbackContainer: { type: 'object' },\n        hooks: { type: 'object' }\n      }\n    })\n  )\n}\n\n/**\n * Multi file upload config\n *\n * @typedef {object} MultiFileUploadConfig\n * @property {string} [uploadUrl] - File upload URL\n * @property {string} [deleteUrl] - File delete URL\n * @property {string} [uploadStatusText] - Upload status text\n * @property {string} [dropzoneHintText] - Dropzone hint text\n * @property {string} [dropzoneButtonText] - Dropzone button text\n * @property {object} [feedbackContainer] - Feedback container config\n * @property {string} [feedbackContainer.selector] - Selector for feedback container\n * @property {Element | null} [feedbackContainer.element] - HTML element for feedback container\n * @property {MultiFileUploadHooks} [hooks] - Upload hooks\n */\n\n/**\n * Multi file upload hooks\n *\n * @typedef {object} MultiFileUploadHooks\n * @property {OnUploadFileEntryHook} [entryHook] - File upload entry hook\n * @property {OnUploadFileExitHook} [exitHook] - File upload exit hook\n * @property {OnUploadFileErrorHook} [errorHook] - File upload error hook\n * @property {OnUploadFileDeleteHook} [deleteHook] - File delete hook\n */\n\n/**\n * Upload hook: File entry\n *\n * @callback OnUploadFileEntryHook\n * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload\n * @param {File} file - File upload\n */\n\n/**\n * Upload hook: File exit\n *\n * @callback OnUploadFileExitHook\n * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload\n * @param {File} file - File upload\n * @param {XMLHttpRequest} xhr - XMLHttpRequest\n * @param {string} textStatus - Text status\n */\n\n/**\n * Upload hook: File error\n *\n * @callback OnUploadFileErrorHook\n * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload\n * @param {File} file - File upload\n * @param {XMLHttpRequest} xhr - XMLHttpRequest\n * @param {string} textStatus - Text status\n * @param {Error} errorThrown - Error thrown\n */\n\n/**\n * Upload hook: File delete\n *\n * @callback OnUploadFileDeleteHook\n * @param {InstanceType<typeof MultiFileUpload>} upload - Multi file upload\n * @param {File} [file] - File upload\n * @param {XMLHttpRequest} xhr - XMLHttpRequest\n * @param {string} textStatus - Text status\n */\n\n/**\n * @typedef {object} UploadResponseSuccess\n * @property {{ messageText: string, messageHtml: string }} success - Response success\n * @property {UploadResponseFile} file - Response file\n */\n\n/**\n * @typedef {object} UploadResponseError\n * @property {{ message: string }} error - Response error\n * @property {UploadResponseFile} file - Response file\n */\n\n/**\n * @typedef {object} UploadResponseFile\n * @property {string} filename - File name\n * @property {string} originalname - Original file name\n */\n\n/**\n * @import { Schema } from 'govuk-frontend/dist/govuk/common/configuration.mjs'\n */\n"],"names":["MultiFileUpload","ConfigurableComponent","constructor","$root","config","_this$config$feedback","isSupported","$feedbackContainer","feedbackContainer","element","querySelector","selector","HTMLElement","setupFileInput","setupDropzone","setupLabel","setupStatusBox","addEventListener","onFileDeleteClick","bind","classList","add","$dropzone","document","createElement","onDragOver","onDragLeave","onDrop","$fileInput","replaceWith","appendChild","$label","setAttribute","id","textContent","dropzoneButtonText","$hint","dropzoneHintText","append","onFileChange","onFileFocus","onFileBlur","$status","event","preventDefault","remove","uploadStatusText","uploadFiles","dataTransfer","files","file","Array","from","uploadFile","cloneNode","HTMLInputElement","value","focus","getSuccessHtml","success","messageHtml","getErrorHtml","error","message","getFileRow","$row","innerHTML","name","getDeleteButton","$button","filename","originalname","hooks","entryHook","$item","$message","$actions","$progress","formData","FormData","xhr","XMLHttpRequest","onLoad","status","response","onError","messageText","exitHook","responseText","Error","statusText","errorHook","upload","lengthComputable","percentComplete","Math","round","loaded","total","open","uploadUrl","responseType","send","target","HTMLButtonElement","contains","$rows","querySelectorAll","length","$rowDelete","find","deleteHook","undefined","deleteUrl","setRequestHeader","JSON","stringify","isDragAndDropSupported","isFormDataSupported","isFileApiSupported","div","ondrop","input","type","moduleName","defaults","Object","freeze","schema","properties"],"mappings":"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"}

package/moj/components/multi-file-upload/template.njk

@@ -1,4 +1,4 @@
-<div class="moj-multi-file-upload {{- " " + params.classes if params.classes}}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+<div class="moj-multi-file-upload {{- " " + params.classes if params.classes}}" data-module="moj-multi-file-upload" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="moj-multi-file__uploaded-files {% if params.uploadedFiles.items.length == 0 %}moj-hidden{% endif%}">
     <h2 class="govuk-heading-m">{{ params.uploadedFiles.heading.html | safe if params.uploadedFiles.heading.html else params.uploadedFiles.heading.text }}</h2>
     <div class="govuk-summary-list moj-multi-file-upload__list">