@ministryofjustice/frontend 4.0.1 → 5.1.0

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

@@ -1,220 +1,391 @@
-import { dragAndDropSupported, formDataSupported, fileApiSupported } from '../../helpers.mjs';
-
-function MultiFileUpload(params) {
-  if (!(dragAndDropSupported() && formDataSupported() && fileApiSupported())) {
-    return
-  }
-
-  this.defaultParams = {
-    uploadFileEntryHook: $.noop,
-    uploadFileExitHook: $.noop,
-    uploadFileErrorHook: $.noop,
-    fileDeleteHook: $.noop,
-    uploadStatusText: 'Uploading files, please wait',
-    dropzoneHintText: 'Drag and drop files here or',
-    dropzoneButtonText: 'Choose files'
-  };
-
-  this.params = $.extend({}, this.defaultParams, params);
-  this.container = $(this.params.container);
-
-  this.container.addClass('moj-multi-file-upload--enhanced');
-
-  this.feedbackContainer = this.container.find(
-    '.moj-multi-file__uploaded-files'
-  );
-  this.setupFileInput();
-  this.setupDropzone();
-  this.setupLabel();
-  this.setupStatusBox();
-  this.container.on(
-    'click',
-    '.moj-multi-file-upload__delete',
-    $.proxy(this, 'onFileDeleteClick')
-  );
-}
+import { ConfigurableComponent } from 'govuk-frontend';
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+
+
+/**
+ * @augments {ConfigurableComponent<MultiFileUploadConfig>}
+ */
+class MultiFileUpload extends ConfigurableComponent {
+  /**
+   * @param {Element | null} $root - HTML element to use for multi file upload
+   * @param {MultiFileUploadConfig} [config] - Multi file upload config
+   */
+  constructor($root, config = {}) {
+    var _this$config$feedback;
+    super($root, config);
+    if (!MultiFileUpload.isSupported()) {
+      return this;
+    }
+    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.$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);
+  }
+  setupLabel() {
+    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.$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);
+  }
+
+  /**
+   * @param {DragEvent} event - Drag event
+   */
+  onDragOver(event) {
+    event.preventDefault();
+    this.$dropzone.classList.add('moj-multi-file-upload--dragover');
+  }
+  onDragLeave() {
+    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.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.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);
+    this.setupFileInput();
+    this.$fileInput.focus();
+  }
+  onFileFocus() {
+    this.$label.classList.add('moj-multi-file-upload--focused');
+  }
+  onFileBlur() {
+    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 = `
+    <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;
+  }
+
+  /**
+   * @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;
+  }
 
-MultiFileUpload.prototype.setupDropzone = function () {
-  this.fileInput.wrap('<div class="moj-multi-file-upload__dropzone" />');
-  this.dropzone = this.container.find('.moj-multi-file-upload__dropzone');
-  this.dropzone.on('dragover', $.proxy(this, 'onDragOver'));
-  this.dropzone.on('dragleave', $.proxy(this, 'onDragLeave'));
-  this.dropzone.on('drop', $.proxy(this, 'onDrop'));
-};
-
-MultiFileUpload.prototype.setupLabel = function () {
-  this.label = $(
-    `<label for="${this.fileInput[0].id}" class="govuk-button govuk-button--secondary">${this.params.dropzoneButtonText}</label>`
-  );
-  this.dropzone.append(
-    `<p class="govuk-body">${this.params.dropzoneHintText}</p>`
-  );
-  this.dropzone.append(this.label);
-};
-
-MultiFileUpload.prototype.setupFileInput = function () {
-  this.fileInput = this.container.find('.moj-multi-file-upload__input');
-  this.fileInput.on('change', $.proxy(this, 'onFileChange'));
-  this.fileInput.on('focus', $.proxy(this, 'onFileFocus'));
-  this.fileInput.on('blur', $.proxy(this, 'onFileBlur'));
-};
-
-MultiFileUpload.prototype.setupStatusBox = function () {
-  this.status = $(
-    '<div aria-live="polite" role="status" class="govuk-visually-hidden" />'
-  );
-  this.dropzone.append(this.status);
-};
-
-MultiFileUpload.prototype.onDragOver = function (e) {
-  e.preventDefault();
-  this.dropzone.addClass('moj-multi-file-upload--dragover');
-};
-
-MultiFileUpload.prototype.onDragLeave = function () {
-  this.dropzone.removeClass('moj-multi-file-upload--dragover');
-};
-
-MultiFileUpload.prototype.onDrop = function (e) {
-  e.preventDefault();
-  this.dropzone.removeClass('moj-multi-file-upload--dragover');
-  this.feedbackContainer.removeClass('moj-hidden');
-  this.status.html(this.params.uploadStatusText);
-  this.uploadFiles(e.originalEvent.dataTransfer.files);
-};
-
-MultiFileUpload.prototype.uploadFiles = function (files) {
-  for (let i = 0; i < files.length; i++) {
-    this.uploadFile(files[i]);
-  }
-};
-
-MultiFileUpload.prototype.onFileChange = function (e) {
-  this.feedbackContainer.removeClass('moj-hidden');
-  this.status.html(this.params.uploadStatusText);
-  this.uploadFiles(e.currentTarget.files);
-  this.fileInput.replaceWith($(e.currentTarget).val('').clone(true));
-  this.setupFileInput();
-  this.fileInput.get(0).focus();
-};
-
-MultiFileUpload.prototype.onFileFocus = function (e) {
-  this.label.addClass('moj-multi-file-upload--focused');
-};
-
-MultiFileUpload.prototype.onFileBlur = function (e) {
-  this.label.removeClass('moj-multi-file-upload--focused');
-};
-
-MultiFileUpload.prototype.getSuccessHtml = function (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>`
-};
-
-MultiFileUpload.prototype.getErrorHtml = function (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>`
-};
-
-MultiFileUpload.prototype.getFileRowHtml = function (file) {
-  const html = `
-    <div class="govuk-summary-list__row moj-multi-file-upload__row">
-      <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>
-    </div>`;
-  return html
-};
-
-MultiFileUpload.prototype.getDeleteButtonHtml = function (file) {
-  return `<button class="moj-multi-file-upload__delete govuk-button govuk-button--secondary govuk-!-margin-bottom-0" type="button" name="delete" value="${file.filename}">
-      Delete <span class="govuk-visually-hidden">${file.originalname}</span>
-    </button>`
-};
-
-MultiFileUpload.prototype.uploadFile = function (file) {
-  this.params.uploadFileEntryHook(this, file);
-  const item = $(this.getFileRowHtml(file));
-  const formData = new FormData();
-  formData.append('documents', file);
-  this.feedbackContainer.find('.moj-multi-file-upload__list').append(item);
-
-  $.ajax({
-    url: this.params.uploadUrl,
-    type: 'post',
-    data: formData,
-    processData: false,
-    contentType: false,
-    success: $.proxy(function (response) {
-      if (response.error) {
-        item
-          .find('.moj-multi-file-upload__message')
-          .html(this.getErrorHtml(response.error));
-        this.status.html(response.error.message);
-      } else {
-        item
-          .find('.moj-multi-file-upload__message')
-          .html(this.getSuccessHtml(response.success));
-        this.status.html(response.success.messageText);
+  /**
+   * @param {File} file
+   */
+  uploadFile(file) {
+    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);
+    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.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.config.hooks.errorHook(this, file, xhr, xhr.responseText, error);
+    };
+    xhr.addEventListener('load', onLoad);
+    xhr.addEventListener('error', onError);
+    xhr.upload.addEventListener('progress', event => {
+      if (!event.lengthComputable) {
+        return;
       }
-      item
-        .find('.moj-multi-file-upload__actions')
-        .append(this.getDeleteButtonHtml(response.file));
-      this.params.uploadFileExitHook(this, file, response);
-    }, this),
-    error: $.proxy(function (jqXHR, textStatus, errorThrown) {
-      this.params.uploadFileErrorHook(
-        this,
-        file,
-        jqXHR,
-        textStatus,
-        errorThrown
-      );
-    }, this),
-    xhr: function () {
-      const xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener(
-        'progress',
-        function (e) {
-          if (e.lengthComputable) {
-            let percentComplete = e.loaded / e.total;
-            percentComplete = parseInt(percentComplete * 100, 10);
-            item
-              .find('.moj-multi-file-upload__progress')
-              .text(` ${percentComplete}%`);
-          }
-        },
-        false
-      );
-      return xhr
+      const percentComplete = Math.round(event.loaded / event.total * 100);
+      $progress.textContent = ` ${percentComplete}%`;
+    });
+    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')) {
+      return;
     }
-  });
-};
-
-MultiFileUpload.prototype.onFileDeleteClick = function (e) {
-  e.preventDefault(); // if user refreshes page and then deletes
-  const button = $(e.currentTarget);
-  const data = {};
-  data[button[0].name] = button[0].value;
-  $.ajax({
-    url: this.params.deleteUrl,
-    type: 'post',
-    dataType: 'json',
-    data,
-    success: $.proxy(function (response) {
-      if (response.error) ; else {
-        button.parents('.moj-multi-file-upload__row').remove();
-        if (
-          this.feedbackContainer.find('.moj-multi-file-upload__row').length ===
-          0
-        ) {
-          this.feedbackContainer.addClass('moj-hidden');
-        }
+    event.preventDefault(); // if user refreshes page and then deletes
+
+    const xhr = new XMLHttpRequest();
+    xhr.addEventListener('load', () => {
+      if (xhr.status < 200 || xhr.status >= 300) {
+        return;
       }
-      this.params.fileDeleteHook(this, response);
-    }, this)
-  });
-};
+      const $rows = Array.from(this.$feedbackContainer.querySelectorAll('.moj-multi-file-upload__row'));
+      if ($rows.length === 1) {
+        this.$feedbackContainer.classList.add('moj-hidden');
+      }
+      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.config.deleteUrl);
+    xhr.setRequestHeader('Content-Type', 'application/json');
+    xhr.responseType = 'json';
+    xhr.send(JSON.stringify({
+      [$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