@sealcode/sealgen 0.14.15 → 0.15.0

package/@types/src/forms/controls/file.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="node" resolution-mode="require"/>
 import { Context } from "koa";
+import { FilePointer } from "sealious";
 import { FlatTemplatable } from "tempstream";
 import { FileContainer } from "../fields/file.js";
 import { FormDataValue } from "../form-types.js";
@@ -7,10 +8,7 @@ import { FormControlContext } from "./form-control.js";
 import { SimpleInput } from "./simple-input.js";
 export declare class File extends SimpleInput<FileContainer> {
     getType(): string;
-    renderFilePreview(_ctx: Context, file_data: {
-        id?: string;
-        filename?: string;
-    } | null): Promise<FlatTemplatable>;
-    preInput(ctx: Context, data: Record<string, FormDataValue>): Promise<import("stream").Readable>;
+    renderFilePreview(_ctx: Context, file: FilePointer | null): Promise<FlatTemplatable>;
+    preInput(fctx: FormControlContext, data: Record<string, FormDataValue>): Promise<import("stream").Readable>;
     getInputAttributes(fctx: FormControlContext): Promise<Record<string, string | boolean>>;
 }

package/@types/src/forms/controls/multiple-files.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="koa__router" />
 /// <reference types="node" resolution-mode="require"/>
 import Router from "@koa/router";
-import { CollectionItem, File as SealiousFile, Field as SealiousField, Collection } from "sealious";
+import { CollectionItem, Field as SealiousField, Collection, FilePointer } from "sealious";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
@@ -10,7 +10,7 @@ import { FormControlContext } from "./form-control.js";
 export type MultipleFilesOptions = {
     label?: string;
     uploadLabel?: string;
-    getAdditionalFields: (ctx: Context, file: SealiousFile) => Promise<Record<string, unknown>>;
+    getAdditionalFields: (ctx: Context, file: FilePointer) => Promise<Record<string, unknown>>;
 };
 export declare class MultipleFiles extends FormFieldControl {
     field: MultipleFilesField;
@@ -19,16 +19,16 @@ export declare class MultipleFiles extends FormFieldControl {
     getClassModifiers(): string[];
     mount(router: Router): void;
     deleteFileAssociation(ctx: Context, file_item_id: string): Promise<void>;
-    addFileAssociation(ctx: Context, file: SealiousFile): Promise<void>;
+    addFileAssociation(ctx: Context, file: FilePointer): Promise<void>;
     getFrameRelativeURL(): string;
     getFrameID(): string;
-    renderFrame(ctx: Context, content?: FlatTemplatable): import("stream").Readable;
+    renderFrame(_ctx: Context, content?: FlatTemplatable): import("stream").Readable;
     render(fctx: FormControlContext): FlatTemplatable | Promise<FlatTemplatable>;
     getReferencingCollection(): Collection;
     getFileField(): SealiousField | null;
-    extractFileFromItem(item: CollectionItem): Promise<SealiousFile | null>;
-    renderFileItemPreview(_fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
-    renderFileItem(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    extractFileFromItem(item: CollectionItem): Promise<FilePointer | null>;
+    renderFileItemPreview(_fileItem: CollectionItem, file: FilePointer): Promise<FlatTemplatable>;
+    renderFileItem(fileItem: CollectionItem, file: FilePointer): Promise<FlatTemplatable>;
     renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable;
     getFileItems(ctx: Context): Promise<CollectionItem<any>[]>;
     getInputAttributes(): {

package/@types/src/forms/controls/multiple-photos.d.ts

@@ -1,4 +1,4 @@
-import { File as SealiousFile, CollectionItem } from "sealious";
+import { CollectionItem, FilePointer } from "sealious";
 import { FlatTemplatable } from "tempstream";
 import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
@@ -14,5 +14,5 @@ export declare class MultiplePhotos extends MultipleFiles {
         name: string;
         multiple: boolean;
     };
-    renderFileItem(fileItem: CollectionItem, file: SealiousFile): Promise<FlatTemplatable>;
+    renderFileItem(fileItem: CollectionItem, file: FilePointer): Promise<FlatTemplatable>;
 }

package/@types/src/forms/controls/photo.d.ts

@@ -6,15 +6,14 @@ import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
 import { FileContainer } from "../fields/file.js";
 import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
+import { FilePointer } from "sealious";
 export declare class Photo extends File {
     field: FormField<boolean, FileContainer>;
     imageRouter: KoaResponsiveImageRouter;
     constructor(field: FormField<boolean, FileContainer>, imageRouter: KoaResponsiveImageRouter, options?: SimpleInputOptions);
     getImgStyle(): Promise<string>;
-    renderFilePreview(ctx: Context, file_data: {
-        id?: string;
-        filename?: string;
-    } | null): Promise<FlatTemplatable>;
+    renderFilePreview(ctx: Context, file: FilePointer | null): Promise<FlatTemplatable>;
+    getWrapperModifiers(): string[];
     getInputAttributes(fctx: FormControlContext): Promise<{
         accept: string;
         onchange: string;

package/@types/src/forms/controls/photo.test.d.ts

@@ -0,0 +1 @@
+export {};

package/@types/src/forms/controls/simple-input.d.ts

@@ -20,7 +20,7 @@ export declare class SimpleInput<ParsedValue, Options extends SimpleInputOptions
     field: FormField<boolean, ParsedValue>;
     options: SimpleInputOptions;
     constructor(field: FormField<boolean, ParsedValue>, options?: Options);
-    preInput(_ctx: Context, _data: Record<string, FormDataValue>): Promise<FlatTemplatable>;
+    preInput(_ctx: FormControlContext, _data: Record<string, FormDataValue>): Promise<FlatTemplatable>;
     getType(): string;
     getLabel(): string;
     getID(): string;
@@ -28,5 +28,6 @@ export declare class SimpleInput<ParsedValue, Options extends SimpleInputOptions
     getInputAttributes(fctx: FormControlContext): Promise<Record<string, string | boolean>>;
     postInput(_: Context): Promise<FlatTemplatable>;
     renderInput(_ctx: Context, attributes_str: string, _data: Record<string, FormDataValue>): Promise<FlatTemplatable>;
+    getWrapperModifiers(): string[];
     render<Fields extends Record<string, FormField>>(fctx: FormControlContext): Promise<FlatTemplatable>;
 }

package/@types/src/forms/fields/file.d.ts

@@ -1,14 +1,17 @@
 import { Context } from "koa";
-import { File as SealiousFile } from "sealious";
+import { FileManager, FilePointer } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 export type FileContainer = {
-    old: SealiousFile | null;
-    new: SealiousFile | null;
+    old: FilePointer | null;
+    new: FilePointer | null;
 };
 export declare class File<Required extends boolean> extends FormField<Required, FileContainer> {
+    readonly required: Required;
+    file_manager: FileManager;
+    constructor(required: Required, file_manager: FileManager);
     parse(ctx: Context, raw_value: FormDataValue): Promise<FieldParseResult<FileContainer>>;
-    getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>): Promise<SealiousFile | undefined>;
+    getDatabaseValue(ctx: Context, data: Record<string, FormDataValue>): Promise<FilePointer | undefined>;
     getEmptyValue(): {
         old: null;
         new: null;

package/@types/src/forms/form-types.d.ts

@@ -1,8 +1,8 @@
-import type { File as SealiousFile } from "sealious";
+import { FilePointer } from "sealious";
 import type { FlatTemplatable } from "tempstream";
 import type { FormField } from "./fields/field.js";
 export type FormDataPrimitive = string | string[] | number | undefined;
-export type FormDataValue = FormDataPrimitive | Record<string, FormDataPrimitive> | SealiousFile;
+export type FormDataValue = FormDataPrimitive | Record<string, FormDataPrimitive> | FilePointer;
 export type FieldValueType<F extends FormField> = F extends FormField<infer R> ? R : never;
 export type FormFieldsToValues<F extends Record<string, FormField<boolean, keyof F>>> = {
     [Property in keyof F]: FieldValueType<F[Property]>;

package/@types/src/utils/module-dirname.d.ts

@@ -0,0 +1 @@
+export declare function module_dirname(module_url: string): string;

package/dist/add-route.test.js

@@ -4,7 +4,8 @@ import axios from "axios";
 import waitPort from "wait-port";
 import getPort from "get-port";
 import _locreq from "locreq";
-const locreq = _locreq(__dirname);
+import { module_dirname } from "./utils/module-dirname.js";
+const locreq = _locreq(module_dirname(import.meta.url));
 const execAsync = (cmd) => {
   return new Promise((resolve, reject) => {
     const process2 = exec(cmd);

package/dist/forms/controls/file.js

@@ -1,25 +1,37 @@
 import { tempstream } from "tempstream";
 import { SimpleInput } from "./simple-input.js";
+import { htmlEscape } from "escape-goat";
 class File extends SimpleInput {
   getType() {
     return "file";
   }
-  async renderFilePreview(_ctx, file_data) {
-    return file_data?.filename || "";
+  async renderFilePreview(_ctx, file) {
+    const class_name = "file_preview";
+    const empty_container = `<div class="${class_name}"></div>`;
+    if (!file) {
+      return empty_container;
+    }
+    return (
+      /* HTML */
+      `<div class="${class_name}">
+			${file.getOriginalFilename()}
+		</div>`
+    );
   }
-  async preInput(ctx, data) {
-    const { parsed } = await this.field.getValue(ctx, data);
-    return tempstream`${this.renderFilePreview(ctx, parsed.old)}
+  async preInput(fctx, data) {
+    const { parsed } = await this.field.getValue(fctx.ctx, data);
+    return tempstream`${this.renderFilePreview(
+      fctx.ctx,
+      parsed.old
+    )}
 			<input
 				type="hidden"
-				name="${this.field.name}[old][id]"
-				value="${parsed.old?.id || ""}"
-			/>
-			<input
-				type="hidden"
-				name="${this.field.name}[old][filename]"
-				value="${parsed.old?.filename || ""}"
-			/>`;
+				name="${this.field.name}[old]"
+				value="${htmlEscape(
+      parsed.old?.token || await parsed.old?.save(false) || ""
+    )}"
+				form="${fctx.form_id}"
+			/> `;
   }
   async getInputAttributes(fctx) {
     const original = await super.getInputAttributes(fctx);
@@ -27,7 +39,7 @@ class File extends SimpleInput {
     return {
       ...original,
       name: this.field.name + "[new]",
-      required: original.required && !parsed.old,
+      required: original.required && !parsed.new,
       value: false
     };
   }

package/dist/forms/controls/multiple-files.js

@@ -1,5 +1,5 @@
 import {
-  File as SealiousFile
+  PathFilePointer
 } from "sealious";
 import { inputWrapper } from "../../utils/input-wrapper.js";
 import { tempstream } from "tempstream";
@@ -43,10 +43,7 @@ class MultipleFiles extends FormFieldControl {
       }
       await Promise.all(
         files.map(
-          (file) => this.addFileAssociation(
-            ctx,
-            file
-          )
+          (file) => this.addFileAssociation(ctx, file)
         )
       );
       ctx.body = this.renderFrame(
@@ -76,7 +73,7 @@ class MultipleFiles extends FormFieldControl {
   getFrameID() {
     return `A${this.field.name}__multiple-fields-control`;
   }
-  renderFrame(ctx, content) {
+  renderFrame(_ctx, content) {
     return tempstream`<turbo-frame
 			${content ? "" : `src="./${this.getFrameRelativeURL()}"`}
 			id="${this.getFrameID()}"
@@ -107,15 +104,17 @@ class MultipleFiles extends FormFieldControl {
     if (!sealious_field) {
       return null;
     }
-    return await SealiousFile.fromID(
-      item.collection.app,
-      item.get(sealious_field.name).id
+    return await item.collection.app.FileManager.fromToken(
+      item.get(sealious_field.name).token
     );
   }
   async renderFileItemPreview(_fileItem, file) {
-    return file.filename || "no filename";
+    return file.getOriginalFilename();
   }
   async renderFileItem(fileItem, file) {
+    if (!(file instanceof PathFilePointer)) {
+      return "";
+    }
     return tempstream`<li class="file-list-item">
 			<a
 				class="file-list-item__preview"

package/dist/forms/controls/multiple-photos.js

@@ -1,3 +1,4 @@
+import { PathFilePointer } from "sealious";
 import { tempstream } from "tempstream";
 import { MultipleFiles } from "./multiple-files.js";
 class MultiplePhotos extends MultipleFiles {
@@ -13,7 +14,10 @@ class MultiplePhotos extends MultipleFiles {
     return { ...super.getInputAttributes(), accept: "image/*" };
   }
   async renderFileItem(fileItem, file) {
-    const path = file.getDataPath();
+    if (!(file instanceof PathFilePointer)) {
+      return "";
+    }
+    const path = await file.getPath();
     if (!path) {
       return "missing file";
     }
@@ -24,7 +28,9 @@ class MultiplePhotos extends MultipleFiles {
       sizesAttr: "150px"
     })}
 			</a>
-			<span class="filename"> ${file.filename || "no filename"}</span>
+			<span class="filename">
+				${await file.getOriginalFilename() || "no filename"}</span
+			>
 			${this.renderFileRemoveButton(fileItem)}
 		</li>`;
   }

package/dist/forms/controls/photo.js

@@ -1,6 +1,5 @@
 import { tempstream } from "tempstream";
 import { File } from "./file.js";
-import { File as SealiousFile } from "sealious";
 class Photo extends File {
   constructor(field, imageRouter, options) {
     super(field, options);
@@ -10,28 +9,29 @@ class Photo extends File {
   async getImgStyle() {
     return "width: 100px; height: 100px; object-fit: contain";
   }
-  async renderFilePreview(ctx, file_data) {
+  async renderFilePreview(ctx, file) {
     const class_name = "file_preview";
     const empty_container = `<div class="${class_name}"></div>`;
-    if (!file_data) {
+    if (!file) {
       return empty_container;
     }
-    const { id } = file_data;
-    if (!id) {
-      return empty_container;
-    }
-    const file = await SealiousFile.fromID(ctx.$app, id);
     return tempstream`<div class="${class_name}">
-			${this.imageRouter.image(file.getDataPath(), {
+			${this.imageRouter.image(await file.getPath(), {
       resolutions: [100],
       sizesAttr: "100px",
       imgStyle: await this.getImgStyle()
     })}
 		</div>`;
   }
+  getWrapperModifiers() {
+    return [
+      ...super.getWrapperModifiers(),
+      "control-type__image",
+      "control-type__photo"
+    ];
+  }
   async getInputAttributes(fctx) {
     const original = await super.getInputAttributes(fctx);
-    const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
     return {
       ...original,
       accept: "image/*",

package/dist/forms/controls/photo.test.js

@@ -0,0 +1,81 @@
+import Router from "@koa/router";
+import getPort from "get-port";
+import Koa from "koa";
+import { mount } from "../../mount.js";
+import { Form } from "../form.js";
+import { getBrowser } from "../../utils/browser-creator.js";
+import { Fields } from "../../index.js";
+import { Photo } from "./photo.js";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
+import _locreq from "locreq";
+import { module_dirname } from "../../utils/module-dirname.js";
+import { FileManager, PathFilePointer } from "sealious";
+const locreq = _locreq(module_dirname(import.meta.url));
+describe("photo-controll", () => {
+  describe("basic tests", async () => {
+    let server;
+    let browser;
+    let page;
+    afterAll(() => {
+      server.close();
+    });
+    it("sends the old photo if it wasn't changed and it has an initial value", async () => {
+      const port = await getPort();
+      console.log(`Using port ${port} for photo.test.ts`);
+      const app = new Koa();
+      const router = new Router();
+      const fields = {
+        photo: new Fields.File(false, new FileManager("/tmp"))
+      };
+      let received_photo;
+      const imageRouter = new KoaResponsiveImageRouter({
+        staticPath: "/images",
+        thumbnailSize: 20,
+        cacheManagerResolutionThreshold: 50,
+        imageStoragePath: `/tmp/image-cache-${port}`,
+        smartCropStoragePath: `/tmp/smartcrop-storage-${port}`
+      });
+      mount(
+        router,
+        "/",
+        new class extends Form {
+          constructor() {
+            super(...arguments);
+            this.fields = fields;
+            this.controls = [new Photo(fields.photo, imageRouter)];
+          }
+          async onSubmit(ctx) {
+            console.log("OnSubmit!");
+            const data = await this.getParsedValues(ctx);
+            console.log({ data });
+            received_photo = data.photo;
+          }
+          async getInitialValues(ctx) {
+            const file = new PathFilePointer(
+              new FileManager("/tmp"),
+              locreq.resolve("assets/important.png")
+            );
+            return {
+              photo: await file.save(false)
+              // to get the token
+            };
+          }
+          async canAccess(_) {
+            return { canAccess: true, message: "" };
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(port);
+      browser = await getBrowser();
+      const context = await browser.newContext();
+      page = await context.newPage();
+      await page.goto(`http://localhost:${port}`);
+      await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+      console.log({ received_photo });
+      assert(received_photo !== void 0 && received_photo.old !== null);
+    });
+  });
+});
+//# sourceMappingURL=photo.test.js.map

package/dist/forms/controls/simple-input.js

@@ -55,19 +55,26 @@ class SimpleInput extends FormFieldControl {
   async renderInput(_ctx, attributes_str, _data) {
     return `<input ${attributes_str} />`;
   }
+  getWrapperModifiers() {
+    return [
+      this.getID(),
+      this.getType(),
+      "type__" + this.getType(),
+      getRequiredClass(this.field.required)
+    ];
+  }
   async render(fctx) {
     const id = this.getID();
     const label = this.getLabel();
-    const type = this.getType();
     const { valid, message } = await this.field.getValue(
       fctx.ctx,
       fctx.data
     );
     return inputWrapper(
-      [id, type, getRequiredClass(this.field.required)],
+      this.getWrapperModifiers(),
       tempstream`
 				${label ? `<label for="${id}">${label}</label>` : ""}
-				${await this.preInput(fctx.ctx, fctx.data)}
+				${await this.preInput(fctx, fctx.data)}
 				${this.renderInput(
         fctx.ctx,
         renderAttributes(await this.getInputAttributes(fctx)),

package/dist/forms/fields/file.js

@@ -1,25 +1,16 @@
-import {
-  hasFieldOfType,
-  hasShape,
-  is,
-  predicates
-} from "@sealcode/ts-predicates";
-import { File as SealiousFile } from "sealious";
+import { hasFieldOfType, is, predicates } from "@sealcode/ts-predicates";
+import { FilePointer } from "sealious";
 import { FormField } from "./field.js";
 class File extends FormField {
+  constructor(required, file_manager) {
+    super(required);
+    this.required = required;
+    this.file_manager = file_manager;
+  }
   async parse(ctx, raw_value) {
     let result;
-    if (raw_value instanceof SealiousFile || is(raw_value, predicates.object) && hasShape(
-      {
-        filename: predicates.string,
-        id: predicates.string
-      },
-      raw_value
-    ) && raw_value.id) {
-      const file = await SealiousFile.fromID(
-        ctx.$app,
-        raw_value.id
-      );
+    if (is(raw_value, predicates.string)) {
+      const file = await this.file_manager.fromToken(raw_value);
       result = {
         parsed_value: { old: file, new: null },
         error: null,
@@ -32,15 +23,12 @@ class File extends FormField {
         parsable: false
       };
     } else {
-      const old_file = hasFieldOfType(raw_value, "old", predicates.object) && hasShape(
-        { id: predicates.string, filename: predicates.string },
-        raw_value.old
-      ) && raw_value.old.id ? await SealiousFile.fromID(ctx.$app, raw_value.old.id) : null;
+      const old_file = hasFieldOfType(raw_value, "old", predicates.string) ? await this.file_manager.fromToken(raw_value.old) : null;
       const new_file = hasFieldOfType(
         raw_value,
         "new",
         predicates.array(predicates.object)
-      ) && raw_value.new[0] instanceof SealiousFile ? raw_value.new[0] : null;
+      ) && raw_value.new[0] instanceof FilePointer ? raw_value.new[0] : null;
       result = {
         parsable: true,
         error: null,

package/dist/templates/stateful-page.js

@@ -10,7 +10,6 @@ export const actionName = "${action_name}";
 
 const actions = {
 	add: (state: State, inputs: Record<string, string>) => {
-		console.log({ inputs });
 		return {
 			...state,
 			elements: [...state.elements, inputs.element_to_add || "new element"],

package/dist/utils/module-dirname.js

@@ -0,0 +1,8 @@
+import { dirname } from "node:path";
+function module_dirname(module_url) {
+  return dirname(module_url).replace(/^file:\/\//, "");
+}
+export {
+  module_dirname
+};
+//# sourceMappingURL=module-dirname.js.map

package/dist/utils/render-attributes.js

@@ -7,8 +7,10 @@ function renderAttributes(attrs) {
       } else {
         return "";
       }
-    } else {
+    } else if (value) {
       return `${key}="${attribute(value)}"`;
+    } else {
+      return "";
     }
   }).join(" ");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.14.15",
+	"version": "0.15.0",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "dist/index.js",
 	"type": "module",
@@ -55,6 +55,7 @@
 		"@sealcode/ts-predicates": "^0.4.3",
 		"deepmerge": "^4.3.1",
 		"esbuild": "^0.20.0",
+		"escape-goat": "^4.0.0",
 		"google-fonts-helper": "^3.4.1",
 		"js-convert-case": "^4.2.0",
 		"locreq": "^3.0.0",
@@ -71,6 +72,6 @@
 	"peerDependencies": {
 		"koa": "^2.13.0",
 		"koa-responsive-image-router": "^0.2.24",
-		"sealious": "^0.18.1"
+		"sealious": "^0.19.2"
 	}
 }

package/src/add-route.test.ts

@@ -3,8 +3,10 @@ import { exec, spawn } from "child_process";
 import axios from "axios";
 import waitPort from "wait-port";
 import getPort from "get-port";
+
 import _locreq from "locreq";
-const locreq = _locreq(__dirname);
+import { module_dirname } from "./utils/module-dirname.js";
+const locreq = _locreq(module_dirname(import.meta.url));
 
 const execAsync = (cmd: string) => {
 	return new Promise<void>((resolve, reject) => {

package/src/forms/controls/array.ts

@@ -193,7 +193,9 @@ export class StructuredArray<
 				throw new Error("Missing action param");
 			}
 
-			const field_data = ctx.$body[this.field.name] || { data: [] };
+			const field_data = (ctx.$body as Record<string, unknown>)[
+				this.field.name
+			] || { data: [] };
 			console.log({ action: field_data });
 			if (
 				!hasShape(

package/src/forms/controls/file.ts

@@ -1,9 +1,11 @@
 import { Context } from "koa";
+import { FilePointer } from "sealious";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { FileContainer } from "../fields/file.js";
 import { FormDataValue } from "../form-types.js";
 import { FormControlContext } from "./form-control.js";
 import { SimpleInput } from "./simple-input.js";
+import { htmlEscape } from "escape-goat";
 
 export class File extends SimpleInput<FileContainer> {
 	getType() {
@@ -12,24 +14,35 @@ export class File extends SimpleInput<FileContainer> {
 
 	async renderFilePreview(
 		_ctx: Context,
-		file_data: { id?: string; filename?: string } | null
+		file: FilePointer | null
 	): Promise<FlatTemplatable> {
-		return file_data?.filename || "";
+		const class_name = "file_preview";
+		const empty_container = `<div class="${class_name}"></div>`;
+		if (!file) {
+			return empty_container;
+		}
+		return /* HTML */ `<div class="${class_name}">
+			${file.getOriginalFilename()}
+		</div>`;
 	}
 
-	async preInput(ctx: Context, data: Record<string, FormDataValue>) {
-		const { parsed } = await this.field.getValue(ctx, data);
-		return tempstream/* HTML */ `${this.renderFilePreview(ctx, parsed.old)}
+	async preInput(
+		fctx: FormControlContext,
+		data: Record<string, FormDataValue>
+	) {
+		const { parsed } = await this.field.getValue(fctx.ctx, data);
+		return tempstream/* HTML */ `${this.renderFilePreview(
+				fctx.ctx,
+				parsed.old
+			)}
 			<input
 				type="hidden"
-				name="${this.field.name}[old][id]"
-				value="${parsed.old?.id || ""}"
-			/>
-			<input
-				type="hidden"
-				name="${this.field.name}[old][filename]"
-				value="${parsed.old?.filename || ""}"
-			/>`;
+				name="${this.field.name}[old]"
+				value="${htmlEscape(
+					parsed.old?.token || (await parsed.old?.save(false)) || ""
+				)}"
+				form="${fctx.form_id}"
+			/> `;
 	}
 
 	async getInputAttributes(
@@ -40,7 +53,7 @@ export class File extends SimpleInput<FileContainer> {
 		return {
 			...original,
 			name: this.field.name + "[new]",
-			required: original.required && !parsed.old,
+			required: original.required && !parsed.new,
 			value: false,
 		};
 	}

package/src/forms/controls/multiple-files.ts

@@ -1,9 +1,10 @@
 import Router from "@koa/router";
 import {
 	CollectionItem,
-	File as SealiousFile,
 	Field as SealiousField,
 	Collection,
+	FilePointer,
+	PathFilePointer,
 } from "sealious";
 import { Context } from "koa";
 import { inputWrapper } from "../../utils/input-wrapper.js";
@@ -19,7 +20,7 @@ export type MultipleFilesOptions = {
 	uploadLabel?: string;
 	getAdditionalFields: (
 		ctx: Context,
-		file: SealiousFile
+		file: FilePointer
 	) => Promise<Record<string, unknown>>;
 };
 
@@ -57,7 +58,7 @@ export class MultipleFiles extends FormFieldControl {
 		);
 
 		router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
-			let files = ctx.$body.files as SealiousFile | SealiousFile[];
+			let files = ctx.$body.files as FilePointer | FilePointer[];
 			if (!files || !is(files, predicates.object)) {
 				ctx.body = "Missing files";
 				return;
@@ -67,10 +68,7 @@ export class MultipleFiles extends FormFieldControl {
 			}
 			await Promise.all(
 				files.map((file) =>
-					this.addFileAssociation(
-						ctx,
-						file as unknown as SealiousFile
-					)
+					this.addFileAssociation(ctx, file as unknown as FilePointer)
 				)
 			);
 			ctx.body = this.renderFrame(
@@ -86,7 +84,7 @@ export class MultipleFiles extends FormFieldControl {
 		].removeByID(ctx.$context, file_item_id);
 	}
 
-	async addFileAssociation(ctx: Context, file: SealiousFile) {
+	async addFileAssociation(ctx: Context, file: FilePointer) {
 		const file_field = this.getFileField();
 		if (!file_field) {
 			throw new Error("No file field in referencing collection");
@@ -111,7 +109,7 @@ export class MultipleFiles extends FormFieldControl {
 		return `A${this.field.name}__multiple-fields-control`;
 	}
 
-	renderFrame(ctx: Context, content?: FlatTemplatable) {
+	renderFrame(_ctx: Context, content?: FlatTemplatable) {
 		return tempstream/* HTML */ `<turbo-frame
 			${content ? "" : `src="./${this.getFrameRelativeURL()}"`}
 			id="${this.getFrameID()}"
@@ -148,28 +146,30 @@ export class MultipleFiles extends FormFieldControl {
 
 	async extractFileFromItem(
 		item: CollectionItem
-	): Promise<SealiousFile | null> {
+	): Promise<FilePointer | null> {
 		const sealious_field = this.getFileField();
 		if (!sealious_field) {
 			return null;
 		}
-		return await SealiousFile.fromID(
-			(item.collection as Collection).app,
-			item.get(sealious_field.name).id
+		return await item.collection.app.FileManager.fromToken(
+			item.get(sealious_field.name).token
 		);
 	}
 
 	async renderFileItemPreview(
 		_fileItem: CollectionItem,
-		file: SealiousFile
+		file: FilePointer
 	): Promise<FlatTemplatable> {
-		return file.filename || "no filename";
+		return file.getOriginalFilename();
 	}
 
 	async renderFileItem(
 		fileItem: CollectionItem,
-		file: SealiousFile
+		file: FilePointer
 	): Promise<FlatTemplatable> {
+		if (!(file instanceof PathFilePointer)) {
+			return "";
+		}
 		return tempstream/* HTML */ `<li class="file-list-item">
 			<a
 				class="file-list-item__preview"
@@ -226,7 +226,7 @@ export class MultipleFiles extends FormFieldControl {
 						await this.extractFileFromItem(item),
 					])
 			)
-		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
+		).filter(([_, f]) => f !== null) as [CollectionItem, FilePointer][];
 
 		return inputWrapper(
 			["multiple-files", this.field.name, ...this.getClassModifiers()],

package/src/forms/controls/multiple-photos.ts

@@ -1,4 +1,4 @@
-import { File as SealiousFile, CollectionItem } from "sealious";
+import { CollectionItem, FilePointer, PathFilePointer } from "sealious";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
 import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
@@ -23,9 +23,12 @@ export class MultiplePhotos extends MultipleFiles {
 
 	async renderFileItem(
 		fileItem: CollectionItem,
-		file: SealiousFile
+		file: FilePointer
 	): Promise<FlatTemplatable> {
-		const path = file.getDataPath();
+		if (!(file instanceof PathFilePointer)) {
+			return "";
+		}
+		const path = await file.getPath();
 		if (!path) {
 			return "missing file";
 		}
@@ -36,7 +39,9 @@ export class MultiplePhotos extends MultipleFiles {
 					sizesAttr: "150px",
 				})}
 			</a>
-			<span class="filename"> ${file.filename || "no filename"}</span>
+			<span class="filename">
+				${(await file.getOriginalFilename()) || "no filename"}</span
+			>
 			${this.renderFileRemoveButton(fileItem)}
 		</li>`;
 	}

package/src/forms/controls/photo.test.ts

@@ -0,0 +1,90 @@
+import Router from "@koa/router";
+import getPort from "get-port";
+import { Browser, Page } from "playwright";
+import type { Context } from "koa";
+import Koa from "koa";
+import { mount } from "../../mount.js";
+import { Form } from "../form.js";
+import { getBrowser } from "../../utils/browser-creator.js";
+import { Fields } from "../../index.js";
+import { Photo } from "./photo.js";
+import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
+
+import _locreq from "locreq";
+import { module_dirname } from "../../utils/module-dirname.js";
+import { FileManager, PathFilePointer } from "sealious";
+const locreq = _locreq(module_dirname(import.meta.url));
+
+describe("photo-controll", () => {
+	describe("basic tests", async () => {
+		let server: ReturnType<Koa["listen"]>;
+		let browser: Browser;
+		let page: Page;
+
+		afterAll(() => {
+			server.close();
+		});
+
+		it("sends the old photo if it wasn't changed and it has an initial value", async () => {
+			const port = await getPort();
+			console.log(`Using port ${port} for photo.test.ts`);
+			const app = new Koa();
+			const router = new Router();
+
+			const fields = {
+				photo: new Fields.File(false, new FileManager("/tmp")),
+			};
+
+			let received_photo: unknown;
+
+			const imageRouter = new KoaResponsiveImageRouter({
+				staticPath: "/images",
+				thumbnailSize: 20,
+				cacheManagerResolutionThreshold: 50,
+				imageStoragePath: `/tmp/image-cache-${port}`,
+				smartCropStoragePath: `/tmp/smartcrop-storage-${port}`,
+			});
+
+			mount(
+				router,
+				"/",
+				new (class extends Form<typeof fields, unknown> {
+					fields = fields;
+					controls = [new Photo(fields.photo, imageRouter)];
+
+					async onSubmit(ctx: Context) {
+						console.log("OnSubmit!");
+						const data = await this.getParsedValues(ctx);
+						console.log({ data });
+						received_photo = data.photo;
+					}
+
+					async getInitialValues(ctx: Context) {
+						const file = new PathFilePointer(
+							new FileManager("/tmp"),
+							locreq.resolve("assets/important.png")
+						);
+						return {
+							photo: await file.save(false), // to get the token
+						};
+					}
+
+					async canAccess(_: Context) {
+						return { canAccess: true, message: "" };
+					}
+				})(),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(port);
+
+			browser = await getBrowser();
+			const context = await browser.newContext();
+			page = await context.newPage();
+			await page.goto(`http://localhost:${port}`);
+			await page.getByRole("button", { name: "Wyślij" }).click();
+			console.log({ received_photo });
+			assert(received_photo !== undefined && (received_photo as any).old !== null);
+		});
+	});
+});

package/src/forms/controls/photo.ts

@@ -1,12 +1,12 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
 import { File } from "./file.js";
-import { File as SealiousFile } from "sealious";
 import { FormField } from "../fields/field.js";
 import { SimpleInputOptions } from "./simple-input.js";
 import { FormControlContext } from "./form-control.js";
 import { FileContainer } from "../fields/file.js";
 import { KoaResponsiveImageRouter } from "koa-responsive-image-router";
+import { FilePointer } from "sealious";
 
 export class Photo extends File {
 	constructor(
@@ -23,20 +23,15 @@ export class Photo extends File {
 
 	async renderFilePreview(
 		ctx: Context,
-		file_data: { id?: string; filename?: string } | null
+		file: FilePointer | null
 	): Promise<FlatTemplatable> {
 		const class_name = "file_preview";
 		const empty_container = `<div class="${class_name}"></div>`;
-		if (!file_data) {
+		if (!file) {
 			return empty_container;
 		}
-		const { id } = file_data;
-		if (!id) {
-			return empty_container;
-		}
-		const file = await SealiousFile.fromID(ctx.$app, id);
 		return tempstream/* HTML */ `<div class="${class_name}">
-			${this.imageRouter.image(file.getDataPath(), {
+			${this.imageRouter.image(await file.getPath(), {
 				resolutions: [100],
 				sizesAttr: "100px",
 				imgStyle: await this.getImgStyle(),
@@ -44,12 +39,19 @@ export class Photo extends File {
 		</div>`;
 	}
 
+	getWrapperModifiers(): string[] {
+		return [
+			...super.getWrapperModifiers(),
+			"control-type__image",
+			"control-type__photo",
+		];
+	}
+
 	async getInputAttributes(fctx: FormControlContext) {
 		const original = (await super.getInputAttributes(fctx)) as Record<
 			string,
 			string | boolean
 		>;
-		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
 		return {
 			...original,
 			accept: "image/*",

package/src/forms/controls/simple-input.ts

@@ -47,7 +47,7 @@ export class SimpleInput<
 	}
 
 	async preInput(
-		_ctx: Context,
+		_ctx: FormControlContext,
 		_data: Record<string, FormDataValue>
 	): Promise<FlatTemplatable> {
 		return "";
@@ -117,22 +117,30 @@ export class SimpleInput<
 		return `<input ${attributes_str} />`;
 	}
 
+	getWrapperModifiers(): string[] {
+		return [
+			this.getID(),
+			this.getType(),
+			"type__" + this.getType(),
+			getRequiredClass(this.field.required),
+		];
+	}
+
 	async render<Fields extends Record<string, FormField>>(
 		fctx: FormControlContext
 	): Promise<FlatTemplatable> {
 		const id = this.getID();
 		const label = this.getLabel();
-		const type = this.getType();
 
 		const { valid, message } = await this.field.getValue(
 			fctx.ctx,
 			fctx.data
 		);
 		return inputWrapper(
-			[id, type, getRequiredClass(this.field.required)],
+			this.getWrapperModifiers(),
 			tempstream/* HTML */ `
 				${label ? `<label for="${id}">${label}</label>` : ""}
-				${await this.preInput(fctx.ctx, fctx.data)}
+				${await this.preInput(fctx, fctx.data)}
 				${this.renderInput(
 					fctx.ctx,
 					renderAttributes(await this.getInputAttributes(fctx)),

package/src/forms/fields/file.ts

@@ -1,44 +1,32 @@
-import {
-	hasFieldOfType,
-	hasShape,
-	is,
-	predicates,
-} from "@sealcode/ts-predicates";
+import { hasFieldOfType, is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
-import { File as SealiousFile } from "sealious";
+import { FileManager, FilePointer } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 
 export type FileContainer = {
-	old: SealiousFile | null;
-	new: SealiousFile | null;
+	old: FilePointer | null;
+	new: FilePointer | null;
 };
 
 export class File<Required extends boolean> extends FormField<
 	Required,
 	FileContainer
 > {
+	constructor(
+		public readonly required: Required,
+		public file_manager: FileManager
+	) {
+		super(required);
+	}
+
 	async parse(
 		ctx: Context,
 		raw_value: FormDataValue
 	): Promise<FieldParseResult<FileContainer>> {
 		let result;
-		if (
-			raw_value instanceof SealiousFile ||
-			(is(raw_value, predicates.object) &&
-				hasShape(
-					{
-						filename: predicates.string,
-						id: predicates.string,
-					},
-					raw_value
-				) &&
-				raw_value.id)
-		) {
-			const file = await SealiousFile.fromID(
-				ctx.$app,
-				raw_value.id as string
-			);
+		if (is(raw_value, predicates.string)) {
+			const file = await this.file_manager.fromToken(raw_value);
 			result = {
 				parsed_value: { old: file, new: null },
 				error: null,
@@ -51,21 +39,15 @@ export class File<Required extends boolean> extends FormField<
 				parsable: false as false,
 			};
 		} else {
-			const old_file =
-				hasFieldOfType(raw_value, "old", predicates.object) &&
-				hasShape(
-					{ id: predicates.string, filename: predicates.string },
-					raw_value.old
-				) &&
-				raw_value.old.id
-					? await SealiousFile.fromID(ctx.$app, raw_value.old.id)
-					: null;
+			const old_file = hasFieldOfType(raw_value, "old", predicates.string)
+				? await this.file_manager.fromToken(raw_value.old)
+				: null;
 			const new_file =
 				hasFieldOfType(
 					raw_value,
 					"new",
 					predicates.array(predicates.object)
-				) && raw_value.new[0] instanceof SealiousFile
+				) && raw_value.new[0] instanceof FilePointer
 					? raw_value.new[0]
 					: null;
 			result = {

package/src/forms/form-types.ts

@@ -1,4 +1,4 @@
-import type { File as SealiousFile } from "sealious";
+import { FilePointer } from "sealious";
 import type { FlatTemplatable } from "tempstream";
 import type { FormField } from "./fields/field.js";
 
@@ -6,7 +6,7 @@ export type FormDataPrimitive = string | string[] | number | undefined;
 export type FormDataValue =
 	| FormDataPrimitive
 	| Record<string, FormDataPrimitive>
-	| SealiousFile;
+	| FilePointer;
 
 export type FieldValueType<F extends FormField> = F extends FormField<infer R>
 	? R

package/src/templates/stateful-page.ts

@@ -14,7 +14,6 @@ export const actionName = "${action_name}";
 
 const actions = {
 	add: (state: State, inputs: Record<string, string>) => {
-		console.log({ inputs });
 		return {
 			...state,
 			elements: [...state.elements, inputs.element_to_add || "new element"],

package/src/utils/module-dirname.ts

@@ -0,0 +1,5 @@
+import { dirname } from "node:path";
+
+export function module_dirname(module_url: string): string {
+	return dirname(module_url).replace(/^file:\/\//, "");
+}

package/src/utils/render-attributes.ts

@@ -9,8 +9,10 @@ export function renderAttributes(attrs: Record<string, string | boolean>) {
 				} else {
 					return "";
 				}
-			} else {
+			} else if (value) {
 				return `${key}="${attribute(value)}"`;
+			} else {
+				return "";
 			}
 		})
 		.join(" ");