rename fileUpload utility to fileInput utility

static/js/utils/inputs.js

@@ -1,6 +1,8 @@
 (function() {
   'use strict';
 
+  var inputUtilities = [];
+
   var JS_INITIALIZED_CLASS = 'js-inputs-initialized';
 
   window.utils.inputs = function(wrapper, options) {
@@ -53,51 +55,52 @@
 
   /**
    *
-   * FileUpload Utility
+   * FileInput Utility
+   *  wraps native file input
    *
-   * Attribute: uw-file-upload
+   * Attribute: uw-file-input
    *  (element must be an input of type='file')
    *
    * Example usage:
-   * <input type='file' uw-file-upload>
+   * <input type='file' uw-file-input>
    *
    * Internationalization:
    *  This utility expects the following translations to be available:
-   *    »filesSelected«: label of multi-upload button after selection
+   *    »filesSelected«: label of multi-input button after selection
    *      example: "Dateien ausgewählt" (will be prepended by number of selected files)
-   *    »selectFile«: label of single-upload button before selection
+   *    »selectFile«: label of single-input button before selection
    *      example: "Datei auswählen"
-   *    »selectFiles«: label of multi-upload button before selection
+   *    »selectFiles«: label of multi-input button before selection
    *      example: "Datei(en) auswählen"
    *
    */
 
-  var FILE_UPLOAD_UTIL_NAME = 'fileUpload';
+  var FILE_INPUT_UTIL_NAME = 'fileInput';
-  var FILE_UPLOAD_UTIL_SELECTOR = 'input[type="file"][uw-file-upload]';
+  var FILE_INPUT_UTIL_SELECTOR = 'input[type="file"][uw-file-input]';
 
-  var FILE_UPLOAD_CLASS = 'file-input';
+  var FILE_INPUT_CLASS = 'file-input';
-  var FILE_UPLOAD_INITIALIZED_CLASS = 'file-input--initialized';
+  var FILE_INPUT_INITIALIZED_CLASS = 'file-input--initialized';
-  var FILE_UPLOAD_LIST_CLASS = 'file-input__list';
+  var FILE_INPUT_LIST_CLASS = 'file-input__list';
-  var FILE_UPLOAD_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
+  var FILE_INPUT_UNPACK_CHECKBOX_CLASS = 'file-input__unpack';
-  var FILE_UPLOAD_LABEL_CLASS = 'file-input__label';
+  var FILE_INPUT_LABEL_CLASS = 'file-input__label';
 
-  var fileUploadUtil = function(element) {
+  var fileInputUtil = function(element) {
-    var isMultiFileUpload = false;
+    var isMultiFileInput = false;
     var fileList;
     var label;
 
     function init() {
       if (!element) {
-        throw new Error('FileUpload utility cannot be setup without an element!');
+        throw new Error('FileInput utility cannot be setup without an element!');
       }
 
-      if (element.classList.contains(FILE_UPLOAD_INITIALIZED_CLASS)) {
+      if (element.classList.contains(FILE_INPUT_INITIALIZED_CLASS)) {
-        throw new Error('FileUpload utility already initialized!');
+        throw new Error('FileInput utility already initialized!');
       }
 
-      // check if is multi-file upload
+      // check if is multi-file input
-      isMultiFileUpload = element.hasAttribute('multiple');
+      isMultiFileInput = element.hasAttribute('multiple');
-      if (isMultiFileUpload) {
+      if (isMultiFileInput) {
         fileList = createFileList();
       }
 
@@ -111,10 +114,10 @@
       });
 
       // add util class for styling and mark as initialized
-      element.classList.add(FILE_UPLOAD_CLASS, FILE_UPLOAD_INITIALIZED_CLASS);
+      element.classList.add(FILE_INPUT_CLASS, FILE_INPUT_INITIALIZED_CLASS);
 
       return {
-        name: FILE_UPLOAD_UTIL_NAME,
+        name: FILE_INPUT_UTIL_NAME,
         element: element,
         destroy: function() {},
       };
@@ -136,8 +139,8 @@
 
     function createFileList() {
       var list = document.createElement('ol');
-      list.classList.add(FILE_UPLOAD_LIST_CLASS);
+      list.classList.add(FILE_INPUT_LIST_CLASS);
-      var unpackEl = element.parentElement.querySelector('.' + FILE_UPLOAD_UNPACK_CHECKBOX_CLASS);
+      var unpackEl = element.parentElement.querySelector('.' + FILE_INPUT_UNPACK_CHECKBOX_CLASS);
       if (unpackEl) {
         element.parentElement.insertBefore(list, unpackEl);
       } else {
@@ -148,7 +151,7 @@
 
     function createFileLabel() {
       var label = document.createElement('label');
-      label.classList.add(FILE_UPLOAD_LABEL_CLASS);
+      label.classList.add(FILE_INPUT_LABEL_CLASS);
       label.setAttribute('for', element.id);
       element.parentElement.insertBefore(label, element);
       return label;
@@ -157,22 +160,21 @@
     function updateLabel() {
       var files = element.files;
       if (files && files.length) {
-        label.innerText = isMultiFileUpload ? files.length + ' ' + I18n.get('filesSelected') : files[0].name;
+        label.innerText = isMultiFileInput ? files.length + ' ' + I18n.get('filesSelected') : files[0].name;
       } else {
-        label.innerText = isMultiFileUpload ? I18n.get('selectFiles') : I18n.get('selectFile');
+        label.innerText = isMultiFileInput ? I18n.get('selectFiles') : I18n.get('selectFile');
       }
     }
 
     return init();
   }
 
-  if (UtilRegistry) {
+  inputUtilities.push({
-    UtilRegistry.register({
+    name: FILE_INPUT_UTIL_NAME,
-      name: FILE_UPLOAD_UTIL_NAME,
+    selector: FILE_INPUT_UTIL_SELECTOR,
-      selector: FILE_UPLOAD_UTIL_SELECTOR,
+    setup: fileInputUtil,
-      setup: fileUploadUtil,
+  })
-    });
+
-  }
 
   // turns native checkboxes into custom ones
   window.utils.checkbox = function(input) {
@@ -247,4 +249,9 @@
       },
     };
   }
+
+  // register input utilities
+  if (UtilRegistry) {
+    inputUtilities.forEach(UtilRegistry.register);
+  }
 })();

templates/multiFileField.hamlet

@@ -14,7 +14,7 @@ $newline never
   <div .file-uploads-label>_{MsgAddMoreFiles}
 
 $# new files
-<input type="file" uw-file-upload name=#{fieldName} id=#{fieldId} multiple :req:required="required">
+<input type="file" uw-file-input name=#{fieldName} id=#{fieldId} multiple :req:required="required">
 
 <div .file-input__info>
     _{MsgMultiFileUploadInfo}