neo.mjs 5.15.4 → 5.16.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.15.4'
+         * @member {String} version='5.16.0'
          */
-        version: '5.15.4'
+        version: '5.16.0'
     }
 
     /**

package/buildScripts/docs/jsdocx.mjs

@@ -1,9 +1,11 @@
-import fs     from 'fs-extra';
-import helper from 'neo-jsdoc-x/src/lib/helper.js';
-import jsdocx from 'neo-jsdoc-x';
-import path   from 'path';
+import fs       from 'fs-extra';
+import helper   from 'neo-jsdoc-x/src/lib/helper.js';
+import jsdocx   from 'neo-jsdoc-x';
+import path     from 'path';
+import showdown from 'showdown';
 
 const __dirname   = path.resolve(),
+      markdown    = new showdown.Converter(),
       cwd         = process.cwd(),
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.resolve(cwd, 'package.json')),
@@ -324,12 +326,12 @@ jsdocx.parse(options)
             namespace.classData.push(item);
 
             if (item.description) {
-                item.description = item.description.replace(/\n/g, "<br />");
+                item.description = markdown.makeHtml(item.description)
             }
 
             item.params?.forEach(param => {
                 if (param.description) {
-                    param.description = param.description.replace(/\n/g, "<br />");
+                    param.description = markdown.makeHtml(param.description)
                 }
             });
 

package/docs/app/view/classdetails/HeaderComponent.mjs

@@ -38,9 +38,9 @@ class HeaderComponent extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {cn: [
-            {tag: 'span', cls: ['neo-docs-header-text']}
-        ]}
+            {cn: [
+                    {tag: 'span', cls: ['neo-docs-header-text']}
+                ]}
     }
 
     /**

package/docs/app/view/classdetails/MembersList.mjs

@@ -50,7 +50,7 @@ class MembersList extends Base {
          * @member {Object} _vdom={cn: []}
          */
         _vdom:
-        {cn: []}
+            {cn: []}
     }
 
     /**
@@ -329,9 +329,9 @@ class MembersList extends Base {
 
         me.update();
 
-        hasExamples && setTimeout(() => {
+        setTimeout(() => {
             Neo.main.addon.HighlightJS.syntaxHighlightInit();
-        }, 100);
+        }, 100)
     }
 
     /**
@@ -412,7 +412,7 @@ class MembersList extends Base {
                         cn : [{
                             innerHTML: description.innerHTML
                         },
-                        MembersList.createParametersTable(nestedParams)]
+                            MembersList.createParametersTable(nestedParams)]
                     }
                 }
 
@@ -425,7 +425,7 @@ class MembersList extends Base {
                         tag      : 'td',
                         innerHTML: param.type ? MembersList.escapeHtml(param.type.names.join(' | ')) : ''
                     },
-                    description]
+                        description]
                 });
 
                 if (hasDefaultValues) {

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.15.4'
+         * @member {String} version='5.16.0'
          */
-        version: '5.15.4'
+        version: '5.16.0'
     }
 
     /**

package/examples/form/field/fileupload/MainContainer.mjs

@@ -1,9 +1,7 @@
-import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
 import FileUploadField       from '../../../../src/form/field/FileUpload.mjs';
 import NumberField           from '../../../../src/form/field/Number.mjs';
-import Radio                 from '../../../../src/form/field/Radio.mjs';
-import TextField             from '../../../../src/form/field/Text.mjs';
+import Panel                  from '../../../../src/container/Panel.mjs';
 
 /**
  * @class Neo.examples.form.field.text.MainContainer
@@ -24,19 +22,79 @@ class MainContainer extends ConfigurationViewport {
             module   : NumberField,
             labelText: 'width',
             listeners: {change: me.onConfigChange.bind(me, 'width')},
-            maxValue : 300,
-            minValue : 50,
+            maxValue : 350,
+            minValue : 200,
             stepSize : 5,
             style    : {marginTop: '10px'},
             value    : me.exampleComponent.width
-        }]
+        }];
     }
 
     createExampleComponent() {
-        return Neo.create(FileUploadField, {
-            height:  50,
-            width : 200
-        })
+        return Neo.create(Panel, {
+            style : 'padding:1em',
+            items : [{
+                module            : FileUploadField,
+                id                : 'my-downloadable-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-downloadable',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-not-downloadable-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-not-downloadable',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-upload-fail-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test-fail',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-scan-fail-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-fail',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }]
+        });
     }
 }
 

package/examples/form/field/fileupload/README.md

@@ -0,0 +1,9 @@
+# How to run this example
+You need to install the following npm packages:
+- cors
+- express
+
+To start the dummy backend, you need to use:
+```
+node ./examples/form/field/fileupload/server.mjs
+```

package/examples/form/field/fileupload/server.mjs

@@ -0,0 +1,49 @@
+import express from "express";
+import cors from "cors"
+
+const app = express();
+const port = 3000;
+
+app.use(cors());
+
+app.post('/file-upload-test', async (req, res) => {
+
+    await new Promise(resolve => setTimeout(resolve, 3000));
+
+    res.set('Content-Type', 'application/json');
+    res.send('{"success":true,"documentId":"1"}');
+  })
+
+app.post('/file-upload-test-fail', async (req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"success":false,"message":"Something went wrong"}');
+});
+
+app.get('/document-status', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"scanning"}');
+});
+
+app.get('/document-delete', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('');
+});
+
+app.get('/document-status-fail', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"scan-failed"}');
+});
+
+app.get('/document-status-downloadable', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"downloadable"}');
+});
+
+app.get('/document-status-not-downloadable', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"not-downloadable"}');
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`)
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.15.4",
+    "version": "5.16.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -57,6 +57,7 @@
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.27",
         "sass": "^1.65.1",
+        "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "4.15.1",

package/resources/scss/src/apps/docs/classdetails/HeaderComponent.scss

@@ -9,6 +9,8 @@
 
 .neo-docs-classdetails-headercomponent {
     background-color: v(docs-classdetails-headercomponent-background-color);
+    overflow-y      : auto;
+    max-height      : 250px;
     padding         : 15px;
 
     .neo-docs-header-description {
@@ -23,4 +25,4 @@
         font-weight    : 800;
         text-shadow    : 2px 2px 3px rgba(200,200,200,0.1);
     }
-}
+}

package/resources/scss/src/form/field/FileUpload.scss

@@ -1,4 +1,250 @@
 .neo-file-upload-field {
-    background-color: v(fileuploadfield-background-color);
-    color           : v(fileuploadfield-color);
+    background-color : v(fileuploadfield-background-color);
+    border-color     : v(fileuploadfield-border-color);
+    color            : v(fileuploadfield-color);
+}
+
+.neo-file-upload-field {
+    --upload-icon-codepoint   : "\f062";
+    --cancel-icon-codepoint   : "\f00d";
+    --delete-icon-codepoint   : "\f014";
+    --success-icon-codepoint  : "\f00c";
+    --download-icon-codepoint : "\f019";
+
+    min-height    : 3.5rem;
+    position      : relative;
+    display       : flex;
+    align-items   : center;
+    padding       : 0.5rem;
+    gap           : 0.5rem;
+    border        : 1px solid var(--fileuploadfield-border-color);
+    border-radius : 2px;
+
+    // Space for any error message
+    margin-bottom : 2.5rem;
+
+    &:focus-within {
+        &::after {
+            content        : "";
+            pointer-events : none;
+            position       : absolute;
+            top            : -2px;
+            right          : -2px;
+            bottom         : -2px;
+            left           : -2px;
+            border         : 1px solid var(--fileuploadfield-focus-color);
+            border-radius  : 3px;
+        }
+    }
+
+    // Icons
+    i, button {
+        font-style      : normal;
+        font-size       : 18px;
+        flex            : 0 0 2rem;
+        height          : 2rem;
+        border-radius   : 50%;
+        font-family     : var(--fa-style-family,"Font Awesome 6 Free");
+        display         : flex;
+        align-items     : center;
+        justify-content : center;
+        border          : 0 none;
+        background      : transparent;
+        color           : inherit;
+
+        &::after {
+            font-weight      : var(--fa-style, 900);
+            display          : flex;
+            align-items      : center;
+            justify-content  : center;
+            aspect-ratio     : 1;
+            border-radius    : 50%;
+        }
+    }
+
+    // Cursor appearance is invitation to click
+    .neo-file-upload-action-button {
+        cursor : pointer;
+        &:hover {
+            background-color: var(--fileuploadfield-hover-color);
+        }
+        &:active {
+            background-color: var(--fileuploadfield-pressed-color);
+        }
+    }
+
+    .neo-file-upload-filename {
+        font-weight   : bold;
+    }
+
+    .neo-file-upload-filename, .neo-file-upload-state {
+        white-space   : nowrap;
+        overflow      : hidden;
+        text-overflow : ellipsis;
+        color         : inherit; // For when it becomes a link
+    }
+
+    // The file input is only visible in the ready state
+    &:not(.neo-file-upload-state-ready) {
+        input[type="file"] {
+            display : none;
+        }
+    }
+
+    &.neo-invalid {
+        .neo-file-upload-error-message {
+            display : initial;
+        }
+    }
+}
+
+// During upload, it's a progress circle.
+// Of the upload fails, the process circle stops but remains visible
+.neo-file-upload-state-uploading, .neo-file-upload-state-upload-failed {
+    .neo-file-upload-state-icon {
+        background-image : conic-gradient(
+            var(--fileuploadfield-progress-color) 0 var(--upload-progress),
+            transparent var(--upload-progress) 1turn
+        );
+
+        &::after {
+            background-color : var(--fileuploadfield-background-color);
+            content          : var(--upload-icon-codepoint);
+            flex             : 0 0 calc(100% - 6px);
+        }
+    }
+}
+
+.neo-file-upload-state-processing {
+    .neo-file-upload-state-icon {
+        background-image : conic-gradient(
+            from 0deg, transparent 0deg,
+            var(--fileuploadfield-progress-color) 180deg,
+            transparent 180deg
+        );
+        animation: spinner-rotation 3s linear infinite;
+
+        &::after {
+            content : "";
+            flex    : 0 0 calc(100% - 6px);
+        }
+    }
+}
+
+// While uploading and scanning, we can abort the whole upload/scan process
+.neo-file-upload-state-uploading, .neo-file-upload-state-processing {
+    .neo-file-upload-action-button {
+        &::after {
+            content : var(--cancel-icon-codepoint);
+        }
+    }
+}
+
+// If the upload or scan failed, we show an error UI and the action button cancels
+.neo-file-upload-state-upload-failed, .neo-file-upload-state-scan-failed {
+    --fileuploadfield-progress-color : var(--fileuploadfield-error-color);
+    border-color                     : var(--fileuploadfield-error-color);
+
+    .neo-file-upload-state-icon, .neo-file-upload-action-button  {
+        &::after {
+            content : var(--cancel-icon-codepoint );
+        }
+    }
+
+    .neo-file-upload-state-icon, .neo-file-upload-state {
+        color : var(--fileuploadfield-error-color);
+    }
+}
+
+.neo-file-upload-state-scan-failed {
+    .neo-file-upload-state-icon {
+        border : 3px solid var(--fileuploadfield-error-color);
+    }
+}
+
+.neo-file-upload-state-not-downloadable {
+    .neo-file-upload-state-icon {
+        color  : var(--fileuploadfield-success-color);
+        border : 3px solid var(--fileuploadfield-success-color);
+
+        &::after {
+            content : var(--success-icon-codepoint);
+        }
+    }
+    .neo-file-upload-action-button {
+        &::after {
+            content : var(--delete-icon-codepoint);
+        }
+    }
+}
+
+.neo-file-upload-state-downloadable {
+    &:has(.neo-file-upload-filename:hover) {
+        background-color: var(--fileuploadfield-hover-color);
+    }
+    &:has(.neo-file-upload-filename:active) {
+        background-color: var(--fileuploadfield-pressed-color);
+    }
+    .neo-file-upload-state-icon {
+        background-color : var(--fileuploadfield-downloadable-state-color);
+        border           : 0 none;
+
+        &::after {
+            content : var(--download-icon-codepoint);
+            background-color: transparent;
+        }
+    }
+    .neo-file-upload-action-button {
+        &::after {
+            content : var(--delete-icon-codepoint);
+        }
+    }
+}
+
+.neo-file-upload-state-ready {
+    // Only the input field is visible when in ready state
+    // It takes up the whole component, and is the only interactive item
+    :not(input[type="file"]) {
+        display : none;
+    }
+    input::file-selector-button {
+        position         : absolute;
+        border           : 0 none;
+        margin           : 0;
+        top              : 0;
+        left             : 0;
+        right            : 0;
+        bottom           : 0;
+        background-color : var(--fileuploadfield-background-color);
+        color            : var(--fileuploadfield-color);
+        cursor           : pointer;
+    }
+}
+
+.neo-file-upload-body {
+    flex        : 1 1 0%;
+    display     : flex;
+    flex-flow   : column nowrap;
+    line-height : 1;
+    gap         : 0.2rem;
+    overflow    : hidden;
+    align-items : flex-start;}
+
+.neo-file-upload-error-message {
+    display            : none;
+    position           : absolute;
+    inset-inline-start : 0;
+    white-space        : nowrap;
+    top                : 100%;
+    padding            : 0.5rem;
+    color              : var(--fileuploadfield-error-color);
+}
+
+@keyframes spinner-rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
 }

package/resources/scss/theme-dark/form/field/FileUpload.scss

@@ -1,11 +1,27 @@
 $neoMap: map-merge($neoMap, (
-    'fileuploadfield-background-color': red,
-    'fileuploadfield-color'           : #fff
+    'fileuploadfield-background-color'         : rgb(62, 51, 51),
+    'fileuploadfield-color'                    : #fff,
+    'fileuploadfield-border-color'             : #d5d5d5,
+    'fileuploadfield-progress-color'           : #fff,
+    'fileuploadfield-error-color'              : #f00,
+    'fileuploadfield-success-color'            : rgb(71, 226, 71),
+    'fileuploadfield-hover-color'              : #0f0f0f,
+    'fileuploadfield-pressed-color'            : #0e0e0e,
+    'fileuploadfield-downloadable-state-color' : #181818,
+    'fileuploadfield-focus-color'              : #80d3f4
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-dark { // .neo-fileuploadfield
-        --fileuploadfield-background-color: #{neo(fileuploadfield-background-color)};
-        --fileuploadfield-color           : #{neo(fileuploadfield-color)};
+        --fileuploadfield-background-color         : #{neo(fileuploadfield-background-color)};
+        --fileuploadfield-color                    : #{neo(fileuploadfield-color)};
+        --fileuploadfield-border-color             : #{neo(fileuploadfield-border-color)};
+        --fileuploadfield-progress-color           : #{neo(fileuploadfield-progress-color)};
+        --fileuploadfield-error-color              : #{neo(fileuploadfield-error-color)};
+        --fileuploadfield-success-color            : #{neo(fileuploadfield-success-color)};
+        --fileuploadfield-hover-color              : #{neo(fileuploadfield-hover-color)};
+        --fileuploadfield-pressed-color            : #{neo(fileuploadfield-pressed-color)};
+        --fileuploadfield-downloadable-state-color : #{neo(fileuploadfield-pressed-color)};
+        --fileuploadfield-focus-color              : #{neo(fileuploadfield-focus-color)};
     }
 }

package/resources/scss/theme-light/form/field/FileUpload.scss

@@ -1,11 +1,27 @@
 $neoMap: map-merge($neoMap, (
-    'fileuploadfield-background-color': darkblue,
-    'fileuploadfield-color'           : #fff
+    'fileuploadfield-background-color'         : #fff,
+    'fileuploadfield-color'                    : #000,
+    'fileuploadfield-border-color'             : #d5d5d5,
+    'fileuploadfield-progress-color'           : #5d94f3,
+    'fileuploadfield-error-color'              : #f00,
+    'fileuploadfield-success-color'            : rgb(112, 169, 112),
+    'fileuploadfield-hover-color'              : #f0f0f0,
+    'fileuploadfield-pressed-color'            : #e0e0e0,
+    'fileuploadfield-downloadable-state-color' : #d9d9d9,
+    'fileuploadfield-focus-color'              : #80d3f4
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-light { // .neo-fileuploadfield
-        --fileuploadfield-background-color: #{neo(fileuploadfield-background-color)};
-        --fileuploadfield-color           : #{neo(fileuploadfield-color)};
+        --fileuploadfield-background-color         : #{neo(fileuploadfield-background-color)};
+        --fileuploadfield-color                    : #{neo(fileuploadfield-color)};
+        --fileuploadfield-border-color             : #{neo(fileuploadfield-border-color)};
+        --fileuploadfield-progress-color           : #{neo(fileuploadfield-progress-color)};
+        --fileuploadfield-error-color              : #{neo(fileuploadfield-error-color)};
+        --fileuploadfield-success-color            : #{neo(fileuploadfield-success-color)};
+        --fileuploadfield-hover-color              : #{neo(fileuploadfield-hover-color)};
+        --fileuploadfield-pressed-color            : #{neo(fileuploadfield-pressed-color)};
+        --fileuploadfield-downloadable-state-color : #{neo(fileuploadfield-pressed-color)};
+        --fileuploadfield-focus-color              : #{neo(fileuploadfield-focus-color)};
     }
 }

package/src/DefaultConfig.mjs

@@ -245,12 +245,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.15.4'
+     * @default '5.16.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.15.4'
+    version: '5.16.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/field/FileUpload.mjs

@@ -1,6 +1,81 @@
 import Base from '../../form/field/Base.mjs';
+import NeoArray from '../../util/Array.mjs';
+
+const
+    sizeRE         = /^(\d+)(kb|mb|gb)?$/i,
+    sizeMultiplier = {
+        unit : 1,
+        kb   : 1000,
+        mb   : 1000000,
+        gb   : 1000000000
+    };
 
 /**
+ * An accessible file uploading widget which automatically commences an upload as soon as
+ * a file is selected using the UI.
+ *
+ * The URL to which the file must be uploaded is specified in the {@link #member-uploadUrl} property.
+ * This service must return a JSON status response in the following form for successful uploads:
+ *
+ * ```json
+ * {
+ *     "success" : true,
+ *     "documentId" : 1
+ * }
+ * ```
+ *
+ * And the following form for unsuccessful uploads:
+ *
+ * ```json
+ * {
+ *     "success" : false,
+ *     "message" : "Why the upload was rejected"
+ * }
+ * ```
+ *
+ * The name of the `documentId` property is configured in {@link #member-documentIdParameter}.
+ * It defaults to `'documentId'`.
+ *
+ * The `documentId` is used when requesting the document malware scan status, and when requesting
+ * that the document be deleted, or downloaded.
+ *
+ * If the upload is successful, then the {@link #member-documentStatusUrl} is polled until the
+ * malware scan. The document id returned from the upload is passed in the parameter named
+ * by the {@link #member-documentIdParameter}. It defaults to `'documentId'`.
+ *
+ * This service must return a JSON status response in the following if the scan is still progressing:
+ *
+ * ```json
+ * {
+ *     "status" : "scanning"
+ * }
+ * ```
+ *
+ * And the following form is malware was detected:
+ *
+ * ```json
+ * {
+ *     "status" : "scan-failed"
+ * }
+ * ```
+ *
+ * After a successful scan, a document may or may not be downloadable.
+ *
+ * For a downloadable document, the response must be:
+ *
+ * ```json
+ * {
+ *     "status" : "downloadable"
+ * }
+ * ```
+ *
+ * For a non-downloadable document, the response must be:
+ *
+ * ```json
+ * {
+ *     "status" : "not-downloadable"
+ * }
+ * ```
  * @class Neo.form.field.FileUpload
  * @extends Neo.form.field.Base
  */
@@ -17,15 +92,448 @@ class FileUpload extends Base {
          */
         ntype: 'file-upload-field',
         /**
-         * @member {String[]}} baseCls=['neo-file-upload-field']
+         * @member {String[]} baseCls=['neo-file-upload-field']
          * @protected
          */
         baseCls: ['neo-file-upload-field'],
         /**
-         * @member {Object}} _vdom
+         * @member {Object} _vdom
          */
-        _vdom:
-        {tag: 'input', type: 'file'}
+        _vdom: {
+            cn : [
+                {
+                    tag : 'i',
+                    cls : 'neo-file-upload-state-icon'
+                },
+                {
+                    cls : 'neo-file-upload-body',
+                    cn  : [{
+                        cls : 'neo-file-upload-filename'
+                    }, {
+                        cls : 'neo-file-upload-state'
+                    }]
+                },
+                {
+                    cls : 'neo-file-upload-action-button',
+                    tag : 'button'
+                },
+                {
+                    cls  : 'neo-file-upload-input',
+                    tag  : 'input',
+                    type : 'file'
+                },
+                {
+                    cls : 'neo-file-upload-error-message'
+                }
+            ]
+        },
+
+        cls : [],
+
+        /**
+         * The URL of the file upload service to which the selected file is sent.
+         *
+         * This service must return a JSON response of the form:
+         *
+         * ```json
+         * {
+         *     "success"    : true,
+         *     "message"    : "Only needed if the success property is false",
+         *     "documentId" : 1
+         * }
+         * ```
+         *
+         * The document id is needed so that this widget can follow up and request the results of the
+         * scan operation to see if the file was accepted, and whether it is to be subsequently downloadable.
+         *
+         * The document status request URL must be configured in {@link #member-documentStatusUrl}
+         * @member {String} uploadUrl
+         */
+        uploadUrl_ : null,
+
+        /**
+         * The name of the JSON property in which the document id is returned in the upload response
+         * JSON packet and the HTTP parameter which is used when requesting a malware scan and a document
+         * deletion.
+         *
+         * @member {String} downloadUrl
+         */
+        documentIdParameter : 'documentId',
+
+        /**
+         * The URL from which the file may be downloaded after it has finished its scan.
+         *
+         * The document id returned from the {@link #member-uploadUrl upload} is passed in the parameter named
+         * by the {@link #member-documentIdParameter}. It defaults to `'documentId'`.
+         *
+         * @member {String} downloadUrl
+         */
+        downloadUrl_ : null,
+
+        /**
+         * The URL of the file status reporting service.
+         *
+         * This widget will use this service after a successful upload to determine its next
+         * state.
+         *
+         * This service must return a JSON response of the form:
+         *
+         * ```json
+         * {
+         *     "status" : "scanning" or "scan-failed" or "downloadable or "not-downloadable"
+         * }
+         * ```
+         *
+         * @member {String} documentStatusUrl
+         */
+        documentStatusUrl : null,
+
+        /**
+         * The URL of the file deletion service.
+         *
+         * This widget will use this service after a successful upload to determine its next
+         * state.
+         *
+         * If this service yields an HTTP 200 status, the deletion is taken to have been successful.
+         *
+         * @member {String} documentDeleteUrl
+         */
+        documentDeleteUrl : null,
+
+        headers_ : {},
+
+        /**
+         * @member {String} state_=null
+         */
+        state_: 'ready',
+
+        /**
+         * @member {Object} types=null
+         */
+        types_ : null,
+
+        /**
+         * @member {String|Number} maxSize
+         */
+        maxSize_: null
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        const me = this;
+
+        me.addDomListeners([
+            { input : me.onInputValueChange, scope: me},
+            { click : me.onActionButtonClick, delegate : '.neo-file-upload-action-button', scope : me}
+        ]);
+    }
+
+    async clear() {
+        const me = this;
+
+        me.vdom.cn[3] = {
+            cls   : 'neo-file-upload-input',
+            tag   : 'input',
+            type  : 'file',
+            value : ''
+        };
+        me.state = 'ready';
+        me.error = '';
+
+        // We have to wait for the DOM to have changed, and the input field to be visible
+        await new Promise(resolve => setTimeout(resolve, 100));
+        me.focus(me.vdom.cn[3].id);
+    }
+
+    /**
+     * @param {Object} data
+     * @protected
+     */
+    onInputValueChange({ files }) {
+        const
+            me        = this,
+            { types } = me;
+
+        if (files.length) {
+            const
+                file     = files.item(0),
+                pointPos = file.name.lastIndexOf('.'),
+                type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '';
+
+            if (me.types && !types[type]) {
+                me.error = `Please use these file types: .${Object.keys(types).join(' .')}`;
+            }
+            else if (file.size > me.maxSize) {
+                me.error = `File size exceeds ${String(me._maxSize).toUpperCase()}`;
+            }
+            // If it passes the type and maxSize check, upload it
+            else {
+                me.fileSize = me.formatSize(file.size);
+                me.error = '';
+                me.upload(file);
+            }
+        }
+        // If cleared, we go back to ready state
+        else {
+            me.state = 'ready';
+        }
+    }
+
+    async upload(file) {
+        const
+            me         = this,
+            xhr        = me.xhr = new XMLHttpRequest(),
+            { upload } = xhr,
+            fileData   = new FormData();
+
+        // Show the action button
+        me.state = 'starting';
+
+        // We have to wait for the DOM to have changed, and the action button to be visible
+        await new Promise(resolve => setTimeout(resolve, 100));
+        me.focus(me.vdom.cn[2].id);
+
+        me.vdom.cn[1].cn[0].innerHTML = file.name;
+        me.update();
+        me.state = 'uploading';
+
+        fileData.append("file", file);
+
+        // React to upload state changes
+        upload.addEventListener('progress', me.onUploadProgress.bind(me));
+        upload.addEventListener('error',    me.onUploadError.bind(me));
+        upload.addEventListener('abort',    me.onUploadAbort.bind(me));
+        xhr.addEventListener('loadend',     me.onUploadDone.bind(me));
+
+        xhr.open("POST", me.uploadUrl, true);
+
+        xhr.send(fileData);
+    }
+
+    onUploadProgress({ loaded, total }) {
+        const
+            progress = this.progress = loaded / total,
+            { vdom } = this;
+
+        (vdom.style || (vdom.style = {}))['--upload-progress'] = `${progress}turn`;
+
+        vdom.cn[1].cn[1].innerHTML = `Uploading... (${Math.round(progress * 100)}%)`;
+
+        this.uploadSize = loaded;
+        this.update();
+    }
+
+    onUploadAbort(e) {
+        this.xhr = null;
+        this.clear();
+    }
+
+    onUploadError(e) {
+        this.xhr = null;
+        this.state = 'upload-failed';
+        this.error = e.type;
+    }
+
+    onUploadDone({ loaded, target : xhr }) {
+        const me = this;
+
+        me.xhr = null;
+
+        if (loaded !== 0) {
+            const response = JSON.parse(xhr.response);
+
+            if (response.success) {
+                me.documentId = response[me.documentIdParameter];
+
+                // The status check phase is optional.
+                // If no URL specified, the file is taken to be downloadable.
+                if (me.documentStatusUrl) {
+                    me.state = 'processing';
+
+                    // Start polling the server to see when the scan has a result;
+                    me.checkDocumentStatus();
+                }
+                else {
+                    me.state = 'downloadable';
+                }
+            }
+            else {
+                me.error = response.message;
+                me.state = 'upload-failed';
+            }
+        }
+    }
+
+    onActionButtonClick() {
+        const
+            me        = this,
+            { state } = me;
+
+        // When they click the action button, depending on which state we are in, we go to
+        // different states.
+        switch (state) {
+            // During upload, its an abort
+            case 'uploading':
+                me.abortUpload();
+                break;
+
+            // If the upload or the scan failed, the document will not have been
+            // saved, so we just go back to ready state
+            case 'upload-failed':
+            case 'scan-failed':
+                me.clear();
+                me.state = 'ready';
+                break;
+
+            // During scanning and for stored documents, we need to tell the server the document
+            // is not required.
+            case 'processing':
+            case 'downloadable':
+            case 'not-downloadable':
+                me.deleteDocument();
+                break;
+        }
+    }
+
+    abortUpload() {
+        this.xhr?.abort();
+    }
+
+    async deleteDocument() {
+        // We ask the server to delete using our this.documentId
+        const statusResponse = await fetch(`${this.documentDeleteUrl}?${this.documentIdParameter}=${this.documentId}`);
+
+        // Success
+        if (String(statusResponse.status).slice(0, 1) === '2') {
+            this.clear();
+            this.state = 'ready';
+        }
+        else {
+            this.error = `Document delete service error: ${statusResponse.statusText}`;
+        }
+    }
+
+    async checkDocumentStatus() {
+        const me = this;
+
+        if (this.state === 'processing') {
+            const statusResponse = await fetch(`${this.documentStatusUrl}?${me.documentIdParameter}=${this.documentId}`);
+
+            // Success
+            if (String(statusResponse.status).slice(0, 1) === '2') {
+                const status = (await statusResponse.json()).status;
+
+                switch (status) {
+                    case 'scanning':
+                        setTimeout(() => me.checkDocumentStatus(), 2000);
+                        break;
+                    default:
+                        me.state = status;
+                }
+            }
+            else {
+                this.error = `Document status service error: ${statusResponse.statusText}`;
+            }
+        }
+    }
+
+    /**
+     * Triggered after the state config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetState(value, oldValue) {
+        const
+            me      = this,
+            {
+                vdom
+            } = me,
+            anchor  = vdom.cn[1].cn[0],
+            status  = vdom.cn[1].cn[1];
+
+        switch (value) {
+            case 'ready':
+                anchor.tag = 'div';
+                anchor.href = '';
+                break;
+            case 'upload-failed':
+                status.innerHTML = `Upload failed... (${Math.round(me.progress * 100)}%)`;
+                break;
+            case 'processing':
+                status.innerHTML = `Scanning... (${me.formatSize(me.uploadSize)})`;
+                break;
+            case 'scan-failed':
+                status.innerHTML = `Malware found in file. \u2022 ${me.fileSize}`;
+                me.error = 'Please check the file and try again';
+                break;
+            case 'downloadable':
+                anchor.tag = 'a';
+                anchor.href = `${me.downloadUrl}?${me.documentIdParameter}=${me.documentId}`;
+                status.innerHTML = me.fileSize;
+                break;
+            case 'not-downloadable':
+                status.innerHTML = `Successfully uploaded \u2022 ${me.fileSize}`;
+        }
+
+        me.update();
+
+        // Processing above may mutate cls
+        const { cls } = me;
+
+        NeoArray.remove(cls, 'neo-file-upload-state-' + oldValue);
+        NeoArray.add(cls, 'neo-file-upload-state-' + value);
+        me.cls = cls;
+    }
+
+    beforeGetMaxSize(maxSize) {
+        // Not configured means no limit
+        if (maxSize == null) {
+            return Number.MAX_SAFE_INTEGER;
+        }
+
+        // Split eg "100mb" into the numeric and units parts
+        const sizeParts = sizeRE.exec(maxSize);
+
+        if (sizeParts) {
+            // Convert mb to 1000000 etc
+            const multiplier = sizeMultiplier[(sizeParts[2]||'unit').toLowerCase()];
+
+            return parseInt(sizeParts[1]) * multiplier;
+        }
+    }
+
+    set error(text) {
+        const { cls } = this;
+
+        if (text) {
+            this.vdom.cn[4].cn = [{
+                vtype : 'text',
+                html  : text
+            }];
+            NeoArray.add(cls, 'neo-invalid');
+        }
+        else {
+            NeoArray.remove(cls, 'neo-invalid');
+        }
+
+        this.cls = cls;
+        this.update();
+    }
+
+    formatSize(bytes, separator = '', postFix = '') {
+        if (bytes) {
+            const
+                sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'],
+                i     = Math.min(parseInt(Math.floor(Math.log(bytes) / Math.log(1024)).toString(), 10), sizes.length - 1);
+
+            return `${(bytes / (1024 ** i)).toFixed(i ? 1 : 0)}${separator}${sizes[i]}${postFix}`;
+        }
+        return 'n/a';
     }
 }
 

package/src/main/addon/Markdown.mjs

@@ -44,7 +44,7 @@ class Markdown extends Base {
      */
     construct(config) {
         super.construct(config);
-        DomAccess.addScript({src: this.showdownPath});
+        DomAccess.addScript({src: this.showdownPath})
     }
 
     /**
@@ -55,7 +55,7 @@ class Markdown extends Base {
     markdownToHtml(markdown) {
         let converter = new showdown.Converter();
 
-        return converter.makeHtml(markdown);
+        return converter.makeHtml(markdown)
     }
 }
 

package/src/main/addon/ResizeObserver.mjs

@@ -0,0 +1,79 @@
+import Base      from '../../core/Base.mjs';
+import DomAccess from '../DomAccess.mjs'
+
+/**
+ * @class Neo.main.addon.ResizeObserver
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class ResizeObserver extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.ResizeObserver'
+         * @protected
+         */
+        className: 'Neo.main.addon.ResizeObserver',
+        /**
+         * @member {#ResizeObserver|null} instance=null
+         * @protected
+         */
+        instance: null,
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'register',
+                'unregister'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        let me = this;
+
+        me.resizeObserver = new ResizeObserver(me.onResize.bind(me))
+    }
+
+    /**
+     * Internal callback for the ResizeObserver instance
+     * @param {HTMLElement[]} entries
+     * @param {ResizeObserver} observer
+     * @protected
+     */
+    onResize(entries, observer) {
+        console.log('onResize', entries)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    register(data) {
+        this.instance.observe(DomAccess.getElement(data.id))
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    unregister(data) {
+        this.instance.unobserve(DomAccess.getElement(data.id))
+    }
+}
+
+Neo.applyClassConfig(ResizeObserver);
+
+let instance = Neo.applyClassConfig(ResizeObserver);
+
+export default instance;

package/src/manager/DomEvent.mjs

@@ -30,6 +30,7 @@ const globalDomEvents = [
     'mouseenter',
     'mouseleave',
     'mouseup',
+    'scroll',
     'wheel'
 ];