add image preview

Author: JesmoDev

src/packages/core/components/input-upload-field/index.ts

@@ -3,3 +3,4 @@ export * from './input-upload-field-file.element.js';
 export * from './input-upload-field-audio.element.js';
 export * from './input-upload-field-video.element.js';
 export * from './input-upload-field-svg.element.js';
+export * from './input-upload-field-image.element.js';

src/packages/core/components/input-upload-field/input-upload-field-image.element.ts

@@ -0,0 +1,40 @@
+import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+
+@customElement('umb-input-upload-field-image')
+export class UmbInputUploadFieldImageElement extends UmbLitElement {
+	@property({ type: String })
+	path = '';
+
+	render() {
+		if (!this.path) return html`<uui-loader></uui-loader>`;
+
+		return html`<img src=${this.path} alt="" />`;
+	}
+
+	static styles = [
+		css`
+			:host {
+				display: flex;
+				height: 100%;
+				position: relative;
+				width: fit-content;
+				max-height: 400px;
+			}
+
+			img {
+				max-width: 100%;
+				max-height: 100%;
+				object-fit: contain;
+				width: auto;
+				height: auto;
+			}
+		`,
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-input-upload-field-image': UmbInputUploadFieldImageElement;
+	}
+}