Page MenuHomeSealhub
Files F7189063

photo.ts
No OneTemporary
Actions

photo.ts
View Options

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 * as KoaResponsiveImageRouter from "koa-responsive-image-router";
import { FileContainer } from "../fields/file.js";
export class Photo extends File {
constructor(
public field: FormField<boolean, FileContainer>,
public imageRouter: KoaResponsiveImageRouter.default,
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 } | null
): Promise<FlatTemplatable> {
const class_name = "file_preview";
const empty_container = `<div class="${class_name}"></div>`;
if (!file_data) {
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({
resolutions: [100],
sizes_attr: "100px",
path: file.getDataPath(),
img_style: await this.getImgStyle(),
})}
</div>`;
}
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/*",
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
Tue, Jul 8, 08:43 (2 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
810508
Default Alt Text
photo.ts (2 KB)

Event Timeline