Page MenuHomeSealhub
Files F995332

component-input-image.ts
No OneTemporary
Actions

component-input-image.ts
View Options

import type { Context } from "koa";
import type { FilePointer } from "@sealcode/file-manager";
import type { Image, JDDContext } from "@sealcode/jdd";
import type { StatefulPage } from "@sealcode/sealgen";
import type { ComponentPreviewActions } from "../component-preview-actions.js";
import type { JDDPageState } from "../jdd-page.js";
import { tempstream } from "tempstream";
import { printArgPath } from "./print-arg-path.js";
import { htmlEscape } from "escape-goat";
export function ComponentInputImage<State extends JDDPageState>({
arg_path,
arg,
value,
ctx,
page,
state,
makeJDDContext,
}: {
state: State;
arg_path: string[];
arg: Image;
value: FilePointer | null;
page: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;
ctx: Context;
makeJDDContext: (ctx: Context) => JDDContext;
}): JSX.Element {
const jdd_context = makeJDDContext(ctx);
return tempstream/* HTML */ `<div style="margin-bottom: 10px">
<label
style="display: flex; align-items: center; column-gap: 10px;"
data-controller="input-image-preview"
>
${arg_path.at(-1) || ""}
<div class="image-preview-container">
${value &&
jdd_context.render_image(value, {
container: {
width: 40,
height: 40,
objectFit: "cover",
},
crop: { width: 40, height: 40 },
style: "height: 40px; width: 40px;",
alt: "",
})}
</div>
<input
type="file"
name="${`$${printArgPath(arg_path)}.new`}"
value=""
autocomplete="off"
data-action="change->input-image-preview#handleChange"
${arg.hasParent("list") ? "multiple" : ""}
/>
</label>
<div>
<input
type="hidden"
name="${`$${printArgPath(arg_path)}.old`}"
value="${htmlEscape(value?.token || "")}"
autocomplete="off"
/>
</div>
${page.makeActionButton(
state,
{
action: "remove_file",
label: "❌",
},
arg_path
)}
</div>`;
}

File Metadata

Mime Type
text/x-java
Expires
Mon, Dec 23, 00:57 (4 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
556784
Default Alt Text
component-input-image.ts (1 KB)

Event Timeline