Page MenuHomeSealhub
Files F1263216

photo.ts
No OneTemporary
Actions

photo.ts
View Options

import { Context } from "koa";
import { FlatTemplatable, tempstream } from "tempstream";
import { File } from "./file.js";
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 "@sealcode/file-manager";
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: FilePointer | null
): Promise<FlatTemplatable> {
const class_name = "file_preview";
const empty_container = `<div class="${class_name}"></div>`;
if (!file) {
return empty_container;
}
return tempstream/* HTML */ `<div class="${class_name}">
${this.imageRouter.image(await file.getPath(), {
resolutions: [100, 200],
sizesAttr: "100px",
crop: { width: 100, height: 100 },
container: { width: 100, height: 100 },
imgStyle: await this.getImgStyle(),
alt: "Image preview",
})}
</div>`;
}
getWrapperModifiers(): string[] {
return [
...super.getWrapperModifiers(),
"control-type__image",
"control-type__photo",
];
}
async getInputAttributes(fctx: FormControlContext) {
const original = await super.getInputAttributes(fctx);
const onchange =
((original.onchange as string) || "") +
";" +
`
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(`"`, "'");
return {
...original,
accept: "image/*",
onchange,
};
}
}

File Metadata

Mime Type
text/x-java
Expires
Fri, Jan 24, 16:50 (7 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
597133
Default Alt Text
photo.ts (2 KB)

Event Timeline