multiple-photos.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

multiple-photos.ts
View Options

	import { CollectionItem } from "sealious";
	import { FilePointer, PathFilePointer } from "@sealcode/file-manager";
	import { FlatTemplatable, tempstream } from "tempstream";
	import { MultipleFiles, MultipleFilesOptions } from "./multiple-files.js";
	import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files.js";
	import { KoaResponsiveImageRouter } from "koa-responsive-image-router";

	export class MultiplePhotos extends MultipleFiles {
	constructor(
	public field: MultipleFilesField,
	public imageRouter: KoaResponsiveImageRouter,
	options?: Partial<MultipleFilesOptions>
	) {
	super(field, options);
	}

	getClassModifiers() {
	return ["multiple-files--photos"];
	}

	getInputAttributes() {
	return { ...super.getInputAttributes(), accept: "image/*" };
	}

	async renderFileItem(
	fileItem: CollectionItem,
	file: FilePointer
	): Promise<FlatTemplatable> {
	if (!(file instanceof PathFilePointer)) {
	return "";
	}
	const path = await file.getPath();
	if (!path) {
	return "missing file";
	}
	return tempstream/* HTML */ `<li>
	<a href="${file.getURL()}" data-turbo="false">
	${this.imageRouter.image(path, {
	resolutions: [150, 300],
	sizesAttr: "150px",
	})}
	</a>
	<span class="filename">
	${(await file.getOriginalFilename()) \|\| "no filename"}</span
	>
	${this.renderFileRemoveButton(fileItem)}
	</li>`;
	}
	}