unl · tommyneu · Nov 21, 2025
diff --git a/vite.config.js b/vite.config.js
@@ -124,6 +124,7 @@ export default ({ mode }) => {
                     'plugins/plugin.gallery'              : 'wdn/templates_6.0/js-src/plugins/multi/gallery.js',
                     'plugins/plugin.event-list'           : 'wdn/templates_6.0/js-src/plugins/multi/event-list.js',
                     'plugins/plugin.card-as-link'         : 'wdn/templates_6.0/js-src/plugins/multi/card-as-link.js',
+                    'plugins/plugin.file-size-validator'  : 'wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js',
 
                     'plugins/plugin.idm'                  : 'wdn/templates_6.0/js-src/plugins/single/idm.js',
                     'plugins/plugin.search'               : 'wdn/templates_6.0/js-src/plugins/single/search.js',
@@ -149,12 +150,12 @@ export default ({ mode }) => {
                     'components/component.gallery'              : 'wdn/templates_6.0/js-src/components/unl-gallery.js',
                     'components/component.banner'               : 'wdn/templates_6.0/js-src/components/unl-banner.js',
                     'components/component.alert'                : 'wdn/templates_6.0/js-src/components/unl-alert.js',
-
                     'components/component.idm'                  : 'wdn/templates_6.0/js-src/components/unl-idm.js',
                     'components/component.search'               : 'wdn/templates_6.0/js-src/components/unl-search.js',
                     'components/component.qa'                   : 'wdn/templates_6.0/js-src/components/unl-qa.js',
                     'components/component.event-list'           : 'wdn/templates_6.0/js-src/components/unl-event-list.js',
                     'components/component.card-as-link'         : 'wdn/templates_6.0/js-src/components/unl-card-as-link.js',
+                    'components/component.file-size-validator'  : 'wdn/templates_6.0/js-src/components/unl-file-size-validator.js',
                     'components/component.analytics'            : 'wdn/templates_6.0/js-src/components/unl-analytics.js',
 
                     'lib/unl-utility'      : 'wdn/templates_6.0/js-src/lib/unl-utility.js',

diff --git a/wdn/templates_6.0/examples/file-size-validator.html b/wdn/templates_6.0/examples/file-size-validator.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="color-scheme" content="dark light">
+        <title>File Size Validator</title>
+        <link rel="stylesheet" href="/wdn/templates_6.0/css/critical.css">
+        <link rel="stylesheet" href="/wdn/templates_6.0/css/main.css">
+    </head>
+    <body class="unl">
+        <main>
+            <h1>File Size Validator</h1>
+
+            <form id="test" class="dcf-form">
+                <div class="dcf-form-group">
+                    <label for="inputTest">Test Input<small class="dcf-required">Required</small></label>
+                    <input
+                        id="inputTest"
+                        name="inputTest"
+                        class="dcf-file-size-validator"
+                        data-max-size="2M"
+                        required
+                        type="file"
+                        aria-describedby="profile_input_help"
+                    >
+                    <ul class="dcf-form-help dcf-mt-4" id="profile_input_help">
+                        <li>
+                            Maximum file upload size is <span class="dcf-file-size-validator-size" data-input="inputTest">---</span>.
+                        </li>
+                    </ul>
+                </div>
+                <input class="dcf-btn dcf-btn-primary" type="submit" value="Submit">
+            </form>
+        </main>
+
+        <script src="/wdn/templates_6.0/js/auto-loader.js" type="module"></script>
+    </body>
+</html>
diff --git a/wdn/templates_6.0/js-src/components/unl-file-size-validator.js b/wdn/templates_6.0/js-src/components/unl-file-size-validator.js
@@ -0,0 +1,22 @@
+import DCFFileSizeValidator from '@dcf/js/components/dcf-file-size-validator.js';
+export default class UNLFileSizeValidator extends DCFFileSizeValidator {
+    constructor(fileInput, options = {}) {
+
+        if (!('errorElementClassList' in options)) {
+            options.errorElementClassList = [
+                'dcf-rounded',
+                'unl-bg-scarlet',
+                'unl-cream',
+                'dcf-pt-4',
+                'dcf-pb-4',
+                'dcf-pl-2',
+                'dcf-pr-2',
+                'dcf-mt-3',
+                'dcf-txt-center',
+                'dcf-w-fit-content',
+            ];
+        }
+
+        super(fileInput, options);
+    }
+}
diff --git a/wdn/templates_6.0/js-src/head-2.js b/wdn/templates_6.0/js-src/head-2.js
@@ -17,6 +17,8 @@ import UNLIdmUrl from '@js-src/plugins/single/idm.js?finalUrl';
 import UNLSearchUrl from '@js-src/plugins/single/search.js?finalUrl';
 import UNLQaUrl from '@js-src/plugins/single/qa.js?finalUrl';
 import UNLFontSerifUrl from '@js-src/plugins/single/font-serif.js?finalUrl';
+import UNLFileSizeValidatorUrl from '@js-src/plugins/multi/file-size-validator.js?finalUrl';
+
 
 window.UNL = window.UNL || {};
 window.UNL.autoLoader = {
@@ -159,6 +161,13 @@ window.UNL.autoLoader = {
                 onPluginLoadedElement: null,
                 url: UNLQaUrl,
             },
+            UNLFileSizeValidator: {
+                optOutSelector: null,
+                optInSelector: null,
+                customConfig: {},
+                onPluginLoadedElement: null,
+                url: UNLFileSizeValidatorUrl,
+            },
         },
     },
     loaded: false,

diff --git a/wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js b/wdn/templates_6.0/js-src/plugins/multi/file-size-validator.js
@@ -0,0 +1,107 @@
+/**
+ * This is where the imported class will be stored
+ * @type {?UNLFileSizeValidator}
+ */
+let UNLFileSizeValidator = null;
+
+// Query Selector for the file size validator component class
+const querySelector = '.dcf-file-size-validator:not(.dcf-file-size-validator-initialized)';
+
+// Type of plugin
+const pluginType = 'multi';
+
+// Storing the state whether the plugin is initialized or not
+let isInitialized = false;
+
+/**
+ * Gets the query selector which is used for this plugin's component
+ * @returns { String }
+ */
+export function getQuerySelector() {
+    return querySelector;
+}
+
+/**
+ * Gets the plugin type
+ * @returns { String }
+ */
+export function getPluginType() {
+    return pluginType;
+}
+
+/**
+ * Returns if the plugin has been initialized yet
+ * @returns { Boolean }
+ */
+export function getIsInitialized() {
+    return isInitialized;
+}
+
+/**
+ * Initializes plugin
+ * @returns { Promise<void> }
+ */
+export async function initialize() {
+    if (isInitialized) { return UNLFileSizeValidator; }
+    isInitialized = true;
+
+    const fileSizeValidatorComponent = await import('@js-src/components/unl-file-size-validator.js');
+    UNLFileSizeValidator = fileSizeValidatorComponent.default;
+
+    document.dispatchEvent(new CustomEvent('UNLPluginInitialized', {
+        detail: {
+            pluginType: pluginType,
+            pluginComponent: UNLFileSizeValidator,
+            styleSheetsLoaded: [],
+        },
+    }));
+
+    return UNLFileSizeValidator;
+}
+
+/**
+ * Loads a single instance of the component
+ * @param { HTMLElement } element The element to initialize
+ * @param { Object } options optional parameters to pass in when loading the element
+ * @returns { Promise<UNLFileSizeValidator> }
+ */
+export async function loadElement(element, options) {
+    if (!isInitialized) {
+        await initialize();
+    }
+
+    const loadedElement = new UNLFileSizeValidator(element, options);
+    document.dispatchEvent(new CustomEvent('UNLPluginLoadedElement', {
+        detail: {
+            loadedElement: loadedElement,
+        },
+    }));
+
+    return loadedElement;
+}
+
+/**
+ * Loads components from all elements passed in
+ * @async
+ * @param { HTMLCollectionOf<HTMLElement> | HTMLElement[] } elements 
+ * @param { Object } options optional parameters to pass in when loading the element
+ * @returns { Promise<UNLFileSizeValidator[]> }
+ */
+export async function loadElements(elements, options) {
+    const outputElements = [];
+    for (const singleElement of elements) {
+        outputElements.push(await loadElement(singleElement, options));
+    }
+    return outputElements;
+}
+
+/**
+ * Using the `querySelector` we will load all elements on the page
+ * @async
+ * @param { Object } options optional parameters to pass in when loading the element
+ * @returns { Promise<UNLFileSizeValidator[]> }
+ */
+export async function loadElementsOnPage(options) {
+    const allFileInputs = document.querySelectorAll(querySelector);
+    return await loadElements(allFileInputs, options);
+}