all: implement form input file

The FormInput now can be set to FormInputKindFile that will rendered
as "<input type='file' ...>" on the web user interface.

Once submitted, the file name, type, size, and lastModification will
be stored under FormInput Filename, Filetype, Filesize, and Filemodms.

Implements: https://todo.sr.ht/~shulhan/trunks/1

4 files changed, 60 insertions, 1 deletions

diff --git a/_www/functions.js b/_www/functions.js
index 220228e..4b677d4 100644
--- a/_www/functions.js
+++ b/_www/functions.js
@@ -1,8 +1,9 @@
 // SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
 // SPDX-License-Identifier: GPL-3.0-or-later
+import { WuiInputFile } from "./wui/input/file.js";
 import { WuiInputNumber } from "./wui/input/number.js";
 import { WuiInputString } from "./wui/input/string.js";
-import { CLASS_INPUT, CLASS_INPUT_LABEL, FormInputKindNumber, } from "./interface.js";
+import { CLASS_INPUT, CLASS_INPUT_LABEL, FormInputKindFile, FormInputKindNumber, } from "./interface.js";
 export function getDocumentHeight() {
     const D = document;
     return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
@@ -12,7 +13,31 @@ export function generateFormInput(parent, fi) {
     let wuiInputStringOpts;
     let wuiInputNumber;
     let wuiInputString;
+    let wuiInputFile;
+    let reader;
     switch (fi.kind) {
+        case FormInputKindFile:
+            wuiInputFile = new WuiInputFile();
+            wuiInputFile.label = fi.label;
+            wuiInputFile.hint = fi.hint;
+            wuiInputFile.classInput = CLASS_INPUT;
+            wuiInputFile.classLabel = CLASS_INPUT_LABEL;
+            wuiInputFile.onChange = (file) => {
+                fi.filename = file.name;
+                fi.filetype = file.type;
+                fi.filesize = file.size;
+                fi.filemodms = file.lastModified;
+                fi.value = "";
+                reader = new FileReader();
+                reader.onload = (e) => {
+                    if (e) {
+                        fi.value = btoa(reader.result);
+                    }
+                };
+                reader.readAsText(file);
+            };
+            parent.appendChild(wuiInputFile.element());
+            break;
         case FormInputKindNumber:
             wuiInputNumberOpts = {
                 label: fi.label,
diff --git a/_www/functions.ts b/_www/functions.ts
index f927f80..48d916c 100644
--- a/_www/functions.ts
+++ b/_www/functions.ts
@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info>
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import { WuiInputFile } from "./wui/input/file.js";
 import { WuiInputNumber, WuiInputNumberOpts } from "./wui/input/number.js";
 import { WuiInputString, WuiInputStringOpts } from "./wui/input/string.js";
 
@@ -8,6 +9,7 @@ import {
   CLASS_INPUT,
   CLASS_INPUT_LABEL,
   FormInput,
+  FormInputKindFile,
   FormInputKindNumber,
   HTTPTargetInterface,
   TargetInterface,
@@ -28,8 +30,34 @@ export function generateFormInput(parent: HTMLElement, fi: FormInput) {
   let wuiInputStringOpts: WuiInputStringOpts;
   let wuiInputNumber: WuiInputNumber;
   let wuiInputString: WuiInputString;
+  let wuiInputFile: WuiInputFile;
+  let reader: FileReader;
 
   switch (fi.kind) {
+    case FormInputKindFile:
+      wuiInputFile = new WuiInputFile();
+      wuiInputFile.label = fi.label;
+      wuiInputFile.hint = fi.hint;
+      wuiInputFile.classInput = CLASS_INPUT;
+      wuiInputFile.classLabel = CLASS_INPUT_LABEL;
+      wuiInputFile.onChange = (file: File) => {
+        fi.filename = file.name;
+        fi.filetype = file.type;
+        fi.filesize = file.size;
+        fi.filemodms = file.lastModified;
+        fi.value = "";
+
+        reader = new FileReader();
+        reader.onload = (e) => {
+          if (e) {
+            fi.value = btoa(reader.result as string);
+          }
+        };
+        reader.readAsText(file);
+      };
+      parent.appendChild(wuiInputFile.element());
+      break;
+
     case FormInputKindNumber:
       wuiInputNumberOpts = {
         label: fi.label,
diff --git a/_www/interface.js b/_www/interface.js
index d01baf1..bea7010 100644
--- a/_www/interface.js
+++ b/_www/interface.js
@@ -6,5 +6,6 @@ export const CLASS_NAV_LINK = "nav_link";
 export const CLASS_NAV_TARGET = "nav_target";
 export const HASH_ENVIRONMENT = "environment";
 export const HASH_LINKS = "links";
+export const FormInputKindFile = "file";
 export const FormInputKindNumber = "number";
 export const FormInputKindString = "string";
diff --git a/_www/interface.ts b/_www/interface.ts
index 2b756b9..dc74fb5 100644
--- a/_www/interface.ts
+++ b/_www/interface.ts
@@ -9,6 +9,7 @@ export const CLASS_NAV_TARGET = "nav_target";
 export const HASH_ENVIRONMENT = "environment";
 export const HASH_LINKS = "links";
 
+export const FormInputKindFile = "file";
 export const FormInputKindNumber = "number";
 export const FormInputKindString = "string";
 
@@ -40,6 +41,10 @@ export interface FormInput {
   hint: string;
   kind: string;
   value: string;
+  filename: string;
+  filetype: string;
+  filesize: number;
+  filemodms: number;
   max?: number;
   min?: number;
 }