From ee231c7bae297fcae0b10debcaeab1d552ac6fd3 Mon Sep 17 00:00:00 2001
From: Lee Kelleher <leekelleher@users.noreply.github.com>
Date: Mon, 3 Feb 2025 12:12:19 +0000
Subject: [PATCH] Corrects filename label on the Upload File component (#18205)

* Corrects input upload filename label

Fixes #18195

* Refactored input upload file code
---
 .../input-upload-field-file.element.ts        | 66 +++++++++----------
 1 file changed, 30 insertions(+), 36 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts
index 6f7412d1a1..6dd332e83b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.ts
@@ -1,11 +1,15 @@
+import { html, customElement, property, state, css, when } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
 import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
-import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
-import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 
 @customElement('umb-input-upload-field-file')
 export default class UmbInputUploadFieldFileElement extends UmbLitElement {
-	@property({ type: String })
+	#loadingText = `(${this.localize.term('general_loading')}...)`;
+
+	#serverUrl = '';
+
+	@property()
 	path: string = '';
 
 	/**
@@ -22,53 +26,39 @@ export default class UmbInputUploadFieldFileElement extends UmbLitElement {
 	@state()
 	label = '';
 
-	#serverUrl = '';
-
-	#loadingText = `(${this.localize.term('general_loading')}...)`;
-
-	/**
-	 *
-	 */
 	constructor() {
 		super();
+
 		this.consumeContext(UMB_APP_CONTEXT, (instance) => {
 			this.#serverUrl = instance.getServerUrl();
-		}).asPromise();
+		});
 	}
 
 	protected override updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.updated(_changedProperties);
+
 		if (_changedProperties.has('file') && this.file) {
 			this.extension = this.file.name.split('.').pop() ?? '';
 			this.label = this.file.name || this.#loadingText;
 		}
 
-		if (_changedProperties.has('path')) {
-			if (this.#serverUrl) {
-				if (this.file) return;
-
-				this.extension = this.path.split('.').pop() ?? '';
-				this.label = this.#serverUrl ? this.path.substring(this.#serverUrl.length) : this.#loadingText;
-			}
+		if (_changedProperties.has('path') && !this.file) {
+			this.extension = this.path.split('.').pop() ?? '';
+			this.label = this.path.split('/').pop() ?? this.#loadingText;
 		}
 	}
 
-	#renderLabel() {
-		if (this.path) {
-			// Don't make it a link if it's a temp file upload.
-			return this.file ? this.label : html`<a id="label" href=${this.path} target="_blank">${this.label}</a>`;
-		}
-
-		return html`<span id="label">${this.label}</span>`;
-	}
-
 	override render() {
 		if (!this.label && !this.extension) return html`<uui-loader></uui-loader>`;
 
 		return html`
 			<div id="main">
 				<uui-symbol-file id="file-symbol" .type=${this.extension}></uui-symbol-file>
-				${this.#renderLabel()}
+				${when(
+					!this.file && this.path,
+					() => html`<a id="label" href="${this.#serverUrl}${this.path}" target="_blank">${this.label}</a>`,
+					() => html`<span id="label">${this.label}</span>`,
+				)}
 			</div>
 		`;
 	}
@@ -81,26 +71,30 @@ export default class UmbInputUploadFieldFileElement extends UmbLitElement {
 				box-sizing: border-box;
 				color: var(--uui-color-text);
 			}
+
 			#file-symbol {
 				aspect-ratio: 1 / 1;
 				margin: auto;
 				max-width: 100%;
 				max-height: 100%;
 			}
+
 			#label {
 				text-align: center;
 				overflow: hidden;
 				text-overflow: ellipsis;
 				white-space: nowrap;
 				color: var(--uui-color-text);
-			}
-			a#label {
-				text-decoration: none;
-				color: var(--uui-color-interactive);
-			}
-			a#label:hover {
-				text-decoration: underline;
-				color: var(--uui-color-interactive-emphasis);
+
+				&:is(a) {
+					text-decoration: none;
+					color: var(--uui-color-interactive);
+
+					&:hover {
+						text-decoration: underline;
+						color: var(--uui-color-interactive-emphasis);
+					}
+				}
 			}
 		`,
 	];