stages/prompt: add basic file field (#3156)

add basic file field

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/flows/stages/base.ts

@@ -12,6 +12,17 @@ export interface StageHost {
     readonly tenant: CurrentTenant;
 }
 
+export function readFileAsync(file: Blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            resolve(reader.result);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}
+
 export class BaseStage<Tin, Tout> extends LitElement {
     host!: StageHost;
 
@@ -24,7 +35,14 @@ export class BaseStage<Tin, Tout> extends LitElement {
             [key: string]: unknown;
         } = {};
         const form = new FormData(this.shadowRoot?.querySelector("form") || undefined);
-        form.forEach((value, key) => (object[key] = value));
+
+        for await (const [key, value] of form.entries()) {
+            if (value instanceof Blob) {
+                object[key] = await readFileAsync(value);
+            } else {
+                object[key] = value;
+            }
+        }
         return this.host?.submit(object as unknown as Tout).then((successful) => {
             if (successful) {
                 this.cleanup();

web/src/flows/stages/prompt/PromptStage.ts

@@ -96,6 +96,13 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
                     placeholder="${prompt.placeholder}"
                     class="pf-c-form-control"
                     ?required=${prompt.required}>`;
+            case PromptTypeEnum.File:
+                return `<input
+                    type="file"
+                    name="${prompt.fieldKey}"
+                    placeholder="${prompt.placeholder}"
+                    class="pf-c-form-control"
+                    ?required=${prompt.required}>`;
             case PromptTypeEnum.Separator:
                 return `<ak-divider>${prompt.placeholder}</ak-divider>`;
             case PromptTypeEnum.Hidden:
@@ -133,7 +140,7 @@ export class PromptStage extends BaseStage<PromptChallenge, PromptChallengeRespo
         return html`<p class="pf-c-form__helper-text">${unsafeHTML(prompt.subText)}</p>`;
     }
 
-    shouldRenderInWrapper(prompt: StagePrompt): bool {
+    shouldRenderInWrapper(prompt: StagePrompt): boolean {
         // Special types that aren't rendered in a wrapper
         if (
             prompt.type === PromptTypeEnum.Static ||

web/src/pages/stages/prompt/PromptForm.ts

@@ -97,6 +97,12 @@ export class PromptForm extends ModelForm<Prompt, string> {
             >
                 ${t`Date Time`}
             </option>
+            <option
+                value=${PromptTypeEnum.File}
+                ?selected=${this.instance?.type === PromptTypeEnum.File}
+            >
+                ${t`File`}
+            </option>
             <option
                 value=${PromptTypeEnum.Separator}
                 ?selected=${this.instance?.type === PromptTypeEnum.Separator}

web/tsconfig.json

@@ -24,6 +24,7 @@
             "ES2020",
             "ESNext",
             "DOM",
+            "DOM.Iterable",
             "WebWorker"
         ],
         "plugins": [