input-image-preview.stimulus.ts
No OneTemporary
Actions

Size

773 B

Referenced Files

None

Subscribers

None

input-image-preview.stimulus.ts
View Options

	import { Controller } from "stimulus";

	export default class InputImagePreview extends Controller {
	id: string;

	handleChange() {
	let img = this.element.querySelector("img");
	if (!img) {
	img = document.createElement("img");
	img.setAttribute("style", "height: 40px; width: 40px");
	this.element
	.querySelector(".image-preview-container")
	?.appendChild(img);
	}
	window.URL.revokeObjectURL(img.src);
	const file = this.element.querySelector("input")?.files?.[0];
	if (!file) {
	console.warn("No file");
	return;
	}
	const new_url = window.URL.createObjectURL(file);
	img.src = new_url;
	img.parentNode;
	img.parentElement
	?.querySelectorAll("source")
	.forEach((e) => e.parentNode?.removeChild(e));
	img.style.aspectRatio = "1";
	}
	}