Merge pull request #1705 from umbraco/bugfix/input-file

Bugfix/input file

Author: iOvergaard

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;
+	}
+}

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

@@ -1,6 +1,5 @@
 import type { UmbTemporaryFileModel } from '../../temporary-file/temporary-file-manager.class.js';
 import { UmbTemporaryFileManager } from '../../temporary-file/temporary-file-manager.class.js';
-import { UMB_PROPERTY_DATASET_CONTEXT } from '../../property/property-dataset/property-dataset-context.token.js';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import {
 	css,
@@ -49,28 +48,27 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 		this.#setExtensions(value);
 	}
 	get fileExtensions(): Array<string> | undefined {
-		return this.extensions;
+		return this._extensions;
 	}
 
 	/**
 	 * @description Allows the user to upload multiple files.
-	 * @type {Boolean}
 	 * @default false
 	 * @attr
 	 */
 	@property({ type: Boolean })
-	multiple = false;
+	public multiple = false;
 
 	@state()
-	_files: Array<{
+	private _files: Array<{
 		path: string;
 		unique: string;
 		queueItem?: UmbTemporaryFileModel;
 		file?: File;
 	}> = [];
 
 	@state()
-	extensions?: string[];
+	private _extensions?: string[];
 
 	@query('#dropzone')
 	private _dropzone?: UUIFileDropzoneElement;
@@ -124,8 +122,13 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 	}
 
 	#setExtensions(value: Array<string>) {
+		if (!value) {
+			this._extensions = undefined;
+			return;
+		}
+
 		// TODO: The dropzone uui component does not support file extensions without a dot. Remove this when it does.
-		this.extensions = value?.map((extension) => {
+		this._extensions = value?.map((extension) => {
 			return `.${extension}`;
 		});
 	}
@@ -198,7 +201,7 @@ export class UmbInputUploadFieldElement extends UUIFormControlMixin(UmbLitElemen
 				id="dropzone"
 				label="dropzone"
 				@change="${this.#onUpload}"
-				accept="${ifDefined(this.extensions?.join(', '))}"
+				accept="${ifDefined(this._extensions?.join(', '))}"
 				?multiple="${this.multiple}">
 				<uui-button label=${this.localize.term('media_clickToUpload')} @click="${this.#handleBrowse}"></uui-button>
 			</uui-file-dropzone>