file-upload.js

  1. import { queryOne, formatBytes } from '@ecl/dom-utils';
  3. /**
  4.  * @param {HTMLElement} element DOM element for component instantiation and scope
  5.  * @param {Object} options
  6.  * @param {String} options.groupSelector Selector for file upload form group
  7.  * @param {String} options.buttonSelector Selector for file upload button
  8.  * @param {String} options.listSelector Selector for list of file names
  9.  * @param {String} options.labelChoose Label choose state
  10.  * @param {String} options.labelReplace Label replace state
  11.  * @param {Boolean} options.attachChangeListener Whether or not to bind change events on toggle
  12.  */
  13. export class FileUpload {
  14.   /**
  15.    * @static
  16.    * Shorthand for instance creation and initialisation.
  17.    *
  18.    * @param {HTMLElement} root DOM element for component instantiation and scope
  19.    *
  20.    * @return {FileUpload} An instance of FileUpload.
  21.    */
  22.   static autoInit(root, { FILE_UPLOAD: defaultOptions = {} } = {}) {
  23.     const fileUpload = new FileUpload(root, defaultOptions);
  24.     fileUpload.init();
  25.     root.ECLFileUpload = fileUpload;
  26.     return fileUpload;
  27.   }
  29.   constructor(
  30.     element,
  31.     {
  32.       groupSelector = '[data-ecl-file-upload-group]',
  33.       buttonSelector = '[data-ecl-file-upload-button]',
  34.       listSelector = '[data-ecl-file-upload-list]',
  35.       labelChoose = 'data-ecl-file-upload-label-choose',
  36.       labelReplace = 'data-ecl-file-upload-label-replace',
  37.       attachChangeListener = true,
  38.     } = {},
  39.   ) {
  40.     // Check element
  41.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  42.       throw new TypeError(
  43.         'DOM element should be given to initialize this widget.',
  44.       );
  45.     }
  47.     this.element = element;
  49.     // Options
  50.     this.groupSelector = groupSelector;
  51.     this.buttonSelector = buttonSelector;
  52.     this.listSelector = listSelector;
  53.     this.labelChoose = labelChoose;
  54.     this.labelReplace = labelReplace;
  55.     this.attachChangeListener = attachChangeListener;
  57.     // Private variables
  58.     this.fileUploadGroup = null;
  59.     this.fileUploadInput = null;
  60.     this.fileUploadButton = null;
  61.     this.fileUploadList = null;
  63.     // Bind `this` for use in callbacks
  64.     this.handleChange = this.handleChange.bind(this);
  65.   }
  67.   /**
  68.    * Initialise component.
  69.    */
  70.   init() {
  71.     if (!ECL) {
  72.       throw new TypeError('Called init but ECL is not present');
  73.     }
  74.     ECL.components = ECL.components || new Map();
  76.     this.fileUploadGroup = this.element.closest(this.groupSelector);
  77.     this.fileUploadInput = this.element;
  78.     this.fileUploadButton = queryOne(this.buttonSelector, this.fileUploadGroup);
  79.     this.fileUploadList = queryOne(this.listSelector, this.fileUploadGroup);
  81.     // Bind events on input
  82.     if (this.attachChangeListener && this.fileUploadInput) {
  83.       this.fileUploadInput.addEventListener('change', this.handleChange);
  84.     }
  86.     // Set ecl initialized attribute
  87.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  88.     ECL.components.set(this.element, this);
  89.   }
  91.   /**
  92.    * Destroy component.
  93.    */
  94.   destroy() {
  95.     if (this.attachChangeListener && this.fileUploadInput) {
  96.       this.fileUploadInput.removeEventListener('change', this.handleChange);
  97.     }
  98.     if (this.element) {
  99.       this.element.removeAttribute('data-ecl-auto-initialized');
  100.       ECL.components.delete(this.element);
  101.     }
  102.   }
  104.   /**
  105.    * @param {Event} e
  106.    */
  107.   handleChange(e) {
  108.     if (!('files' in e.target)) {
  109.       if (this.fileUploadButton.hasAttribute(this.labelChoose)) {
  110.         this.fileUploadButton.innerHTML = this.fileUploadButton.getAttribute(
  111.           this.labelChoose,
  112.         );
  113.       }
  114.       return;
  115.     }
  117.     let fileList = '';
  119.     // Get file names
  120.     Array.prototype.forEach.call(e.target.files, (file) => {
  121.       const fileSize = formatBytes(file.size, 1);
  122.       const fileExtension = file.name.split('.').pop();
  123.       fileList += `<li class="ecl-file-upload__item">
  124.       <span class="ecl-file-upload__item-name">${file.name}</span>
  125.       <span class="ecl-file-upload__item-meta">(${fileSize} - ${fileExtension})</span>
  126.       </li>`;
  127.     });
  129.     // Update file list
  130.     this.fileUploadList.innerHTML = fileList;
  132.     // Update button label
  133.     if (this.fileUploadButton.hasAttribute(this.labelReplace)) {
  134.       this.fileUploadButton.innerHTML = this.fileUploadButton.getAttribute(
  135.         this.labelReplace,
  136.       );
  137.     }
  138.   }
  139. }
  141. export default FileUpload;