vanjs-jsf 0.0.19 → 0.2.0

package/dist/VanJsfField.js

@@ -6,23 +6,35 @@ import { javascript, esLint } from "@codemirror/lang-javascript";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { lintGutter, linter, forEachDiagnostic } from "@codemirror/lint";
 import * as eslint from "eslint-linter-browserify";
-import { CronComponent } from "van-ui-extended";
-import { dracula } from "thememirror";
-import "van-ui-extended/dist/index.css";
-const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, } = van.tags;
 import globals from "globals";
+const { div, p, input, label, textarea, legend, link, fieldset, span, select, option, button, table, tr, th, td, strong, small } = van.tags;
 var FieldType;
 (function (FieldType) {
     FieldType["text"] = "text";
     FieldType["code"] = "code";
-    FieldType["cron"] = "cron";
     FieldType["number"] = "number";
     FieldType["textarea"] = "textarea";
     FieldType["select"] = "select";
     FieldType["radio"] = "radio";
     FieldType["date"] = "date";
     FieldType["fieldset"] = "fieldset";
+    FieldType["file"] = "file";
 })(FieldType || (FieldType = {}));
+const eslintConfig = {
+    // eslint configuration
+    languageOptions: {
+        globals: {
+            ...globals.node,
+        },
+        parserOptions: {
+            ecmaVersion: 2022,
+            sourceType: "module",
+        },
+    },
+    rules: {
+        semi: ["error", "never"],
+    },
+};
 export class VanJsfField extends VanJSComponent {
     name;
     field;
@@ -30,6 +42,8 @@ export class VanJsfField extends VanJSComponent {
     handleChange;
     isVisibleState;
     errorState;
+    /** Used by file fields to pass the selected arrayPath key to formValues */
+    arrayPathValue = "";
     constructor(field, initVal, handleChange) {
         super();
         this.field = field;
@@ -38,7 +52,6 @@ export class VanJsfField extends VanJSComponent {
         this.handleChange = handleChange;
         this.isVisibleState = van.state(this.field.isVisible);
         this.errorState = van.state("");
-        van.derive(() => console.log(`Field ${this.name} isVisible: ${this.isVisibleState.val}`));
     }
     get inputType() {
         return this.field.inputType;
@@ -52,108 +65,26 @@ export class VanJsfField extends VanJSComponent {
     get errorClass() {
         return this.field.errorClass;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     get codemirrorExtension() {
-        const fieldGlobals = this.field.globals && typeof this.field.globals === "object"
-            ? this.field.globals
-            : {};
-        const eslintConfig = {
-            // eslint configuration
-            languageOptions: {
-                globals: {
-                    ...fieldGlobals,
-                    ...globals.node,
-                },
-                parserOptions: {
-                    ecmaVersion: 2022,
-                    sourceType: "module",
-                },
-            },
-            rules: {
-                "constructor-super": "error",
-                "for-direction": "error",
-                "getter-return": "error",
-                "no-async-promise-executor": "error",
-                "no-case-declarations": "error",
-                "no-class-assign": "error",
-                "no-compare-neg-zero": "error",
-                "no-cond-assign": "error",
-                "no-const-assign": "error",
-                "no-constant-binary-expression": "error",
-                "no-constant-condition": "error",
-                "no-control-regex": "error",
-                "no-debugger": "error",
-                "no-delete-var": "error",
-                "no-dupe-args": "error",
-                "no-dupe-class-members": "error",
-                "no-dupe-else-if": "error",
-                "no-dupe-keys": "error",
-                "no-duplicate-case": "error",
-                "no-empty": "error",
-                "no-empty-character-class": "error",
-                "no-empty-pattern": "error",
-                "no-empty-static-block": "error",
-                "no-ex-assign": "error",
-                "no-extra-boolean-cast": "error",
-                "no-fallthrough": "error",
-                "no-func-assign": "error",
-                "no-global-assign": "error",
-                "no-import-assign": "error",
-                "no-invalid-regexp": "error",
-                "no-irregular-whitespace": "error",
-                "no-loss-of-precision": "error",
-                "no-misleading-character-class": "error",
-                "no-new-native-nonconstructor": "error",
-                "no-nonoctal-decimal-escape": "error",
-                "no-obj-calls": "error",
-                "no-octal": "error",
-                "no-prototype-builtins": "error",
-                "no-redeclare": "error",
-                "no-regex-spaces": "error",
-                "no-self-assign": "error",
-                "no-setter-return": "error",
-                "no-shadow-restricted-names": "error",
-                "no-sparse-arrays": "error",
-                "no-this-before-super": "error",
-                "no-undef": "error",
-                "no-unexpected-multiline": "error",
-                "no-unreachable": "error",
-                "no-unsafe-finally": "error",
-                "no-unsafe-negation": "error",
-                "no-unsafe-optional-chaining": "error",
-                "no-unused-labels": "error",
-                "no-unused-private-class-members": "error",
-                "no-unused-vars": "error",
-                "no-useless-backreference": "error",
-                "no-useless-catch": "error",
-                "no-useless-escape": "error",
-                "no-with": "error",
-                "require-yield": "error",
-                "use-isnan": "error",
-                "valid-typeof": "error",
-            },
-        };
         const theme = EditorView.theme({
-            ".cm-content, .cm-gutter": {
-                minHeight: this.field["min-height"] &&
-                    typeof this.field["min-height"] === "string"
-                    ? this.field["min-height"]
-                    : "150px",
+            '.cm-content, .cm-gutter': {
+                "min-height": "150px",
             },
-            ".cm-gutters": {
-                margin: "1px",
+            '.cm-content': {
+                "min-height": "150px",
             },
-            ".cm-scroller": {
-                overflow: "auto",
+            '.cm-gutters': {
+                margin: '1px',
             },
-            ".cm-wrap": {
-                border: "1px solid silver",
+            '.cm-scroller': {
+                overflow: 'auto',
+            },
+            '.cm-wrap': {
+                border: '1px solid silver',
             },
-        }, {
-            dark: true,
         });
-        const extensions = [
-            dracula,
-            EditorView.updateListener.of((e) => {
+        const extensions = [theme, EditorView.updateListener.of((e) => {
                 this.field.error = null;
                 forEachDiagnostic(e.state, (diag) => {
                     if (diag.severity === "error") {
@@ -161,10 +92,7 @@ export class VanJsfField extends VanJSComponent {
                     }
                 });
                 this.handleChange(this, e.state.doc.toString());
-            }),
-            basicSetup,
-            lintGutter(),
-        ];
+            }), basicSetup, lintGutter()];
         switch (this.field.codemirrorType) {
             case "json":
                 extensions.push(json(), linter(jsonParseLinter()));
@@ -213,187 +141,424 @@ export class VanJsfField extends VanJSComponent {
     }
     render() {
         let el;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const props = {
             style: () => (this.isVisible ? "display: block" : "display: none"),
-            class: this.containerClass ? this.containerClass : "",
+            class: this.containerClass || ''
         };
         switch (this.inputType) {
             case FieldType.text:
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), input({
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), input({
                     id: this.name,
                     type: "text",
-                    class: this.class ? this.class : "",
+                    class: this.class || '',
                     value: this.iniVal,
                     oninput: (e) => this.handleChange(this, e.target.value),
                 }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.textarea:
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), textarea({
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), textarea({
                     id: this.name,
                     name: this.name,
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     rows: this.field.rows,
                     cols: this.field.columns,
                     oninput: (e) => this.handleChange(this, e.target.value),
                 }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.code:
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description));
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description));
                 new EditorView({
-                    doc: new String(this.iniVal).toString(),
+                    doc: String(this.iniVal),
                     parent: el,
-                    extensions: this.codemirrorExtension,
+                    extensions: this.codemirrorExtension
                 });
                 break;
             case FieldType.select:
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), select({
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), select({
                     id: this.name,
                     name: this.name,
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     oninput: (e) => this.handleChange(this, e.target.value),
-                }, this.options?.map((opt) => option({ class: this.class ? this.class : null, value: opt.value }, opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
+                }, this.options?.map((opt) => option({ class: this.class || '', value: opt.value }, opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
                 break;
-            case FieldType.date:
+            case FieldType.date: {
                 const calendarInput = input({
                     id: this.name,
                     type: "text",
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     value: this.iniVal,
                     onchange: (e) => this.handleChange(this, e.target.value),
                 });
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), calendarInput, p({ class: this.errorClass }, () => this.error), link({
-                    rel: "stylesheet",
-                    type: "text/css",
-                    href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css",
-                }));
+                el =
+                    div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                        div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), calendarInput, p({ class: this.errorClass }, () => this.error), 
+                    // External CDN dependency for Pikaday CSS — consider bundling for production
+                    link({ rel: "stylesheet", type: "text/css", href: "https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" }));
                 new pikaday({
                     field: calendarInput,
-                    format: "YYYY/MM/DD",
+                    format: 'YYYY-MM-DD',
                     container: el,
                     firstDay: 1,
                     toString(date) {
-                        // you should do formatting based on the passed format,
-                        // but we will just return 'D/M/YYYY' for simplicity
                         const day = date.getDate();
                         const month = date.getMonth() + 1;
                         const year = date.getFullYear();
                         return `${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`;
                     },
-                    parse(dateString, format) {
-                        // dateString is the result of `toString` method
-                        const parts = dateString.split("/");
-                        const day = parseInt(parts[0], 10);
+                    parse(dateString) {
+                        const parts = dateString.split('-');
+                        const year = parseInt(parts[0], 10);
                         const month = parseInt(parts[1], 10) - 1;
-                        const year = parseInt(parts[2], 10);
+                        const day = parseInt(parts[2], 10);
                         return new Date(year, month, day);
-                    },
-                });
-                break;
-            case FieldType.cron:
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), p({ class: this.errorClass }, () => this.error), () => {
-                    let ele;
-                    if (CronComponent) {
-                        ele = new CronComponent() || null;
-                        ele.setAttribute("color", "d58512");
-                        ele.setAttribute("extraClass", this.class ? this.class : "");
-                        ele.setAttribute("value", this.iniVal.toString());
-                        ele.oninput = (e) => this.handleChange(this, e.detail.value);
                     }
-                    return ele;
                 });
                 break;
+            }
             case FieldType.number:
-                el = div(props, label({
-                    for: this.name,
-                    style: "margin-right: 5px;",
-                    class: this.titleClass ? this.titleClass : "",
-                }, this.label), this.description &&
-                    div({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), input({
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), input({
                     id: this.name,
                     type: "number",
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     value: this.iniVal,
-                    oninput: (e) => this.handleChange(this, e.target.value),
+                    oninput: (e) => {
+                        const val = e.target.value;
+                        this.handleChange(this, val === "" ? "" : Number(val));
+                    },
                 }), p({ class: this.errorClass }, () => this.error));
                 break;
             case FieldType.fieldset:
-                console.log(this.field);
-                el = div(props, fieldset(legend({ class: this.titleClass ? this.titleClass : "" }, this.label), this.description &&
-                    span({
-                        id: `${this.name}-description`,
-                        class: this.descriptionClass ? this.descriptionClass : "",
-                    }, this.description), this.isVanJsfFieldArray(this.field.fields)
-                    ? this.field.fields.map((field) => field.render())
-                    : null));
+                el = div(props, fieldset(legend({ class: this.titleClass || '' }, this.label), this.description &&
+                    span({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), this.isVanJsfFieldArray(this.field.fields) ? this.field.fields.map((field) => field.render()) : null));
                 break;
             case FieldType.radio:
-                el = div(legend({ class: this.titleClass ? this.titleClass : "" }, this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
+                el = div(legend({ class: this.titleClass || '' }, this.label), this.description && div(this.description), div(this.options?.map((opt) => label(input({
                     type: "radio",
                     name: this.name,
-                    class: this.class ? this.class : null,
+                    class: this.class || '',
                     value: opt.value,
                     checked: this.iniVal === opt.value,
                     onchange: (e) => this.handleChange(this, e.target.value),
-                }), opt.label, opt.description), p({ class: this.errorClass }, () => this.error))));
+                }), opt.label, opt.description))), p({ class: this.errorClass }, () => this.error));
+                break;
+            case FieldType.file: {
+                const accept = this.field.accept || ".json,.csv,.xlsx";
+                const maxSizeMB = this.field.maxSizeMB || 50;
+                const previewRows = this.field.previewRows || 5;
+                // Reactive states
+                const fileNameState = van.state("");
+                const fileSizeState = van.state("");
+                const parsingState = van.state(false);
+                const parsedDataState = van.state(null);
+                const arrayPathOptionsState = van.state([]);
+                const selectedArrayPathState = van.state("");
+                const dragOverState = van.state(false);
+                const formatSize = (bytes) => {
+                    if (bytes < 1024)
+                        return `${bytes} B`;
+                    if (bytes < 1024 * 1024)
+                        return `${(bytes / 1024).toFixed(1)} KB`;
+                    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+                };
+                const formatNumber = (n) => n.toLocaleString();
+                const resolveArrayFromJson = (parsed) => {
+                    if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === "object") {
+                        return { data: parsed, paths: [] };
+                    }
+                    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+                        const candidates = [];
+                        for (const [key, val] of Object.entries(parsed)) {
+                            if (Array.isArray(val) && val.length > 0 && typeof val[0] === "object") {
+                                candidates.push(key);
+                            }
+                        }
+                        if (candidates.length === 1) {
+                            return { data: parsed[candidates[0]], paths: [] };
+                        }
+                        if (candidates.length > 1) {
+                            return { data: null, paths: candidates };
+                        }
+                    }
+                    return { data: null, paths: [] };
+                };
+                const setData = (data, arrayPath) => {
+                    parsedDataState.val = data;
+                    this.arrayPathValue = arrayPath;
+                    selectedArrayPathState.val = arrayPath;
+                    parsingState.val = false;
+                    this.handleChange(this, JSON.stringify(data));
+                };
+                const setError = (msg) => {
+                    parsingState.val = false;
+                    parsedDataState.val = null;
+                    this.error = msg;
+                };
+                const processFile = async (file) => {
+                    // Reset state
+                    this.error = "";
+                    parsedDataState.val = null;
+                    arrayPathOptionsState.val = [];
+                    selectedArrayPathState.val = "";
+                    this.arrayPathValue = "";
+                    // Validate size
+                    if (file.size > maxSizeMB * 1024 * 1024) {
+                        setError(`File exceeds maximum size of ${maxSizeMB} MB`);
+                        return;
+                    }
+                    fileNameState.val = file.name;
+                    fileSizeState.val = formatSize(file.size);
+                    parsingState.val = true;
+                    const ext = file.name.split(".").pop()?.toLowerCase() || "";
+                    try {
+                        if (ext === "json") {
+                            const text = await file.text();
+                            let parsed;
+                            try {
+                                parsed = JSON.parse(text);
+                            }
+                            catch {
+                                setError("Invalid JSON file");
+                                return;
+                            }
+                            const { data, paths } = resolveArrayFromJson(parsed);
+                            if (data) {
+                                setData(data, "");
+                            }
+                            else if (paths.length > 1) {
+                                arrayPathOptionsState.val = paths;
+                                parsingState.val = false;
+                            }
+                            else {
+                                setError("JSON does not contain an array of objects");
+                            }
+                        }
+                        else if (ext === "csv") {
+                            try {
+                                const Papa = await import("papaparse");
+                                const text = await file.text();
+                                const result = Papa.default.parse(text, { header: true, skipEmptyLines: true });
+                                if (result.errors.length > 0) {
+                                    setError(`CSV parse error: ${result.errors[0].message}`);
+                                }
+                                else if (!result.data || result.data.length === 0) {
+                                    setError("CSV file is empty or has no data rows");
+                                }
+                                else {
+                                    setData(result.data, "");
+                                }
+                            }
+                            catch {
+                                setError("Install papaparse to support CSV files: npm install papaparse");
+                            }
+                        }
+                        else if (ext === "xlsx" || ext === "xls") {
+                            try {
+                                const XLSX = await import("xlsx");
+                                const buffer = await file.arrayBuffer();
+                                const workbook = XLSX.read(buffer);
+                                const firstSheetName = workbook.SheetNames[0];
+                                if (!firstSheetName) {
+                                    setError("XLSX file has no sheets");
+                                    return;
+                                }
+                                const sheet = workbook.Sheets[firstSheetName];
+                                const data = XLSX.utils.sheet_to_json(sheet);
+                                if (data.length === 0) {
+                                    setError("XLSX sheet is empty");
+                                    return;
+                                }
+                                setData(data, "");
+                            }
+                            catch (e) {
+                                if (e instanceof Error && e.message.includes("Failed to fetch dynamically imported module")) {
+                                    setError("Install xlsx to support XLSX files: npm install xlsx");
+                                }
+                                else if (e instanceof Error) {
+                                    setError(`XLSX parse error: ${e.message}`);
+                                }
+                                else {
+                                    setError("Install xlsx to support XLSX files: npm install xlsx");
+                                }
+                            }
+                        }
+                        else {
+                            setError(`Unsupported file extension: .${ext}`);
+                        }
+                    }
+                    catch (e) {
+                        setError(e instanceof Error ? e.message : "Error processing file");
+                    }
+                };
+                const clearFile = () => {
+                    fileNameState.val = "";
+                    fileSizeState.val = "";
+                    parsedDataState.val = null;
+                    parsingState.val = false;
+                    arrayPathOptionsState.val = [];
+                    selectedArrayPathState.val = "";
+                    this.arrayPathValue = "";
+                    this.error = "";
+                    this.handleChange(this, "");
+                };
+                const fileInput = input({
+                    type: "file",
+                    accept,
+                    style: "display: none;",
+                    onchange: (e) => {
+                        const files = e.target.files;
+                        if (files && files[0])
+                            processFile(files[0]);
+                    },
+                });
+                const dropZone = div({
+                    style: () => {
+                        const over = dragOverState.val;
+                        return `border: 2px dashed ${over ? "#4a90d9" : "#ccc"}; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; background: ${over ? "#f0f7ff" : "transparent"};`;
+                    },
+                    ondragover: (e) => { e.preventDefault(); dragOverState.val = true; },
+                    ondragleave: () => { dragOverState.val = false; },
+                    ondrop: (e) => {
+                        e.preventDefault();
+                        dragOverState.val = false;
+                        const files = e.dataTransfer?.files;
+                        if (files && files[0])
+                            processFile(files[0]);
+                    },
+                    onclick: () => fileInput.click(),
+                }, p({ style: "margin: 0; color: #666;" }, `Drop a file here or click to browse (${accept})`));
+                // We need to store the raw JSON for arrayPath selection
+                const rawJsonState = van.state(null);
+                // Override processFile's JSON branch to also store raw JSON
+                const originalProcessFile = processFile;
+                const processFileWrapped = async (file) => {
+                    const ext = file.name.split(".").pop()?.toLowerCase() || "";
+                    if (ext === "json") {
+                        this.error = "";
+                        parsedDataState.val = null;
+                        arrayPathOptionsState.val = [];
+                        selectedArrayPathState.val = "";
+                        this.arrayPathValue = "";
+                        if (file.size > maxSizeMB * 1024 * 1024) {
+                            setError(`File exceeds maximum size of ${maxSizeMB} MB`);
+                            return;
+                        }
+                        fileNameState.val = file.name;
+                        fileSizeState.val = formatSize(file.size);
+                        parsingState.val = true;
+                        try {
+                            const text = await file.text();
+                            let parsed;
+                            try {
+                                parsed = JSON.parse(text);
+                            }
+                            catch {
+                                setError("Invalid JSON file");
+                                return;
+                            }
+                            const { data, paths } = resolveArrayFromJson(parsed);
+                            if (data) {
+                                setData(data, "");
+                            }
+                            else if (paths.length > 1) {
+                                rawJsonState.val = parsed;
+                                arrayPathOptionsState.val = paths;
+                                parsingState.val = false;
+                            }
+                            else {
+                                setError("JSON does not contain an array of objects");
+                            }
+                        }
+                        catch (e) {
+                            setError(e instanceof Error ? e.message : "Error processing file");
+                        }
+                    }
+                    else {
+                        await originalProcessFile(file);
+                    }
+                };
+                // Re-bind event handlers to use wrapped version
+                fileInput.onchange = (e) => {
+                    const files = e.target.files;
+                    if (files && files[0])
+                        processFileWrapped(files[0]);
+                };
+                dropZone.ondrop = (e) => {
+                    e.preventDefault();
+                    dragOverState.val = false;
+                    const files = e.dataTransfer?.files;
+                    if (files && files[0])
+                        processFileWrapped(files[0]);
+                };
+                // Preview table
+                const previewTable = () => {
+                    return div(() => {
+                        const data = parsedDataState.val;
+                        if (!data || data.length === 0)
+                            return div();
+                        const columns = Object.keys(data[0]);
+                        const rows = data.slice(0, previewRows);
+                        return div({ style: "margin-top: 8px; overflow-x: auto;" }, div({ style: "margin-bottom: 4px; font-size: 0.9em; color: #666;" }, `Showing ${Math.min(previewRows, data.length)} of ${formatNumber(data.length)} rows`), table({ style: "border-collapse: collapse; width: 100%; font-size: 0.85em;" }, tr(...columns.map((col) => th({ style: "border: 1px solid #ddd; padding: 4px 8px; background: #f5f5f5; text-align: left; white-space: nowrap;" }, col))), ...rows.map((row) => tr(...columns.map((col) => td({ style: "border: 1px solid #ddd; padding: 4px 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" }, String(row[col] ?? "")))))));
+                    });
+                };
+                // arrayPath select handler — when user picks a path, extract data
+                const arrayPathSelectorEl = div(() => {
+                    const options = arrayPathOptionsState.val;
+                    if (options.length === 0)
+                        return div();
+                    return div({ style: "margin-top: 8px;" }, label({ style: "margin-right: 5px;" }, "Select data array:"), select({
+                        onchange: (e) => {
+                            const key = e.target.value;
+                            if (!key)
+                                return;
+                            const raw = rawJsonState.val;
+                            if (raw && Array.isArray(raw[key])) {
+                                setData(raw[key], key);
+                            }
+                        },
+                    }, option({ value: "" }, "-- choose --"), ...options.map((k) => option({ value: k }, k))));
+                });
+                // File info bar + clear button
+                const fileInfoBar = () => {
+                    return div(() => {
+                        const name = fileNameState.val;
+                        if (!name)
+                            return div();
+                        return div({ style: "margin-top: 8px; display: flex; align-items: center; gap: 8px;" }, strong(name), small({ style: "color: #888;" }, `(${fileSizeState.val})`), button({
+                            type: "button",
+                            style: "cursor: pointer; background: none; border: 1px solid #ccc; border-radius: 4px; padding: 2px 8px; font-size: 0.85em;",
+                            onclick: (e) => {
+                                e.stopPropagation();
+                                clearFile();
+                                // Reset the file input so the same file can be re-selected
+                                fileInput.value = "";
+                            },
+                        }, "Clear"));
+                    });
+                };
+                // Parsing indicator
+                const parsingIndicator = () => {
+                    return div(() => {
+                        if (!parsingState.val)
+                            return div();
+                        return div({ style: "margin-top: 8px; color: #666;" }, "Parsing file...");
+                    });
+                };
+                el = div(props, label({ for: this.name, style: "margin-right: 5px;", class: this.titleClass || '' }, this.label), this.description &&
+                    div({ id: `${this.name}-description`, class: this.descriptionClass || '' }, this.description), fileInput, dropZone, fileInfoBar(), parsingIndicator(), arrayPathSelectorEl, previewTable(), p({ class: this.errorClass }, () => this.error));
                 break;
+            }
             default:
                 el = div({ style: "border: 1px dashed gray; padding: 8px;" }, `Field "${this.name}" unsupported: The type "${this.inputType}" has no UI component built yet.`);
         }
         return el;
     }
     isVanJsfFieldArray(fields) {
-        return (Array.isArray(fields) &&
-            fields.every((field) => field instanceof VanJsfField));
+        return Array.isArray(fields) && fields.every(field => field instanceof VanJsfField);
     }
 }