Page MenuHomeSealhub
Files F7112544

photo.ts
No OneTemporary
Actions

photo.ts
View Options

import { Context } from "koa";
import { FlatTemplatable, tempstream } from "tempstream";
import { File } from "./file";
import { File as SealiousFile } from "sealious";
import { FileContainer, FormField } from "../fields/field";
import { SimpleInputOptions } from "./simple-input";
import KoaResponsiveImageRouter from "koa-responsive-image-router";
import { FormDataValue } from "../form";
export class Photo extends File {
constructor(
public field: FormField<boolean, FileContainer>,
public imageRouter: KoaResponsiveImageRouter,
options?: SimpleInputOptions
) {
super(field, options);
}
async getImgStyle() {
return "width: 100px; height: 100px; object-fit: contain";
}
async renderFilePreview(
ctx: Context,
file_data: { id?: string; filename?: string }
): Promise<FlatTemplatable> {
const { id, filename } = file_data;
const class_name = "file_preview";
if (!id) {
return `<div class="${class_name}"></div>`;
}
const file = await SealiousFile.fromID(ctx.$app, id);
return tempstream/* HTML */ `<div class="${class_name}">
${this.imageRouter.image({
resolutions: [100],
sizes_attr: "100px",
path: file.getDataPath(),
img_style: await this.getImgStyle(),
})}
</div>`;
}
async getInputAttributes(
ctx: Context,
data: Record<string, FormDataValue>,
field_prefix: string,
form_id: string
) {
const original = (await super.getInputAttributes(
ctx,
data,
field_prefix,
form_id
)) as Record<string, string | boolean>;
const { parsed } = await this.field.getValue(ctx, data);
return {
...original,
onchange:
(original.onchange || "") +
";" +
`
const file = this.files[0];
const preview_container = this.parentElement.querySelector(".file_preview");
const target = this;
if (file) {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.addEventListener("load", function () {
preview_container.innerHTML = \`<img src="\${this.result}" style="${await this.getImgStyle()}" />\`;
});
}`
.replaceAll("\n", " ")
.replaceAll(`"`, "'"),
};
}
}

File Metadata

Mime Type
text/x-java
Expires
Thu, Jul 3, 19:50 (7 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
799708
Default Alt Text
photo.ts (2 KB)

Event Timeline