src/effects/preview/index.ts
import { UpploadEffect } from "../../effect";
import { fitImageToContainer } from "../../helpers/elements";
import { IHandlersParams, ITemplateParams } from "../../helpers/interfaces";
export default class Preview extends UpploadEffect {
name = "preview";
icon = `<svg aria-hidden="true" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 18)" fill="#000" fill-rule="nonzero"><path d="M244 40h-29V10c0-6-5-10-10-10H10C4 0 0 4 0 10v160c0 5 4 10 10 10h29v30c0 6 4 10 9 10h195c6 0 10-4 10-10V50c0-5-4-10-9-10zm-10 136l-40-45c-4-5-11-5-15 0l-17 19-38-45c-4-5-13-5-17 0l-49 58V60h176v116zM19 160V20h176v20H49c-6 0-10 5-10 10v110H19z"/><ellipse cx="202.5" cy="94" rx="15.5" ry="16"/></g></svg>`;
template = ({ file }: ITemplateParams) => {
const image = URL.createObjectURL(file.blob);
return `
<div class="uppload-preview-element">
<img style="width: 20px" alt="" src="${image}">
</div>
`;
};
handlers = (params: IHandlersParams) => {
const image = params.uppload.container.querySelector(
".uppload-preview-element img"
) as HTMLImageElement | null;
if (image) fitImageToContainer(params, image);
};
}