From be9be956b69e57aaf9e92fdb99ddd02f2a7bc74e Mon Sep 17 00:00:00 2001
From: JesmoDev <jjensenmoeller@gmail.com>
Date: Thu, 15 Feb 2024 16:44:57 +0100
Subject: [PATCH] more bugfixes

---
 .../input-upload-field-file.element.ts        | 21 +++++++++++++++++--
 .../input-upload-field.element.ts             |  8 ++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-file.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-file.element.ts
index a54504d05a..180606cbad 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-file.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field-file.element.ts
@@ -44,6 +44,8 @@ export class UmbInputUploadFieldFileElement extends UmbLitElement {
 
 		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) : 'loading...';
 			}
@@ -51,9 +53,9 @@ export class UmbInputUploadFieldFileElement extends UmbLitElement {
 	}
 
 	#renderLabel() {
-		if (this.path) return html`<a href=${this.path}>${this.label}</a>`;
+		if (this.path) return html`<a id="label" href=${this.path}>${this.label}</a>`;
 
-		return html`<span>${this.label}</span>`;
+		return html`<span id="label">${this.label}</span>`;
 	}
 
 	render() {
@@ -81,6 +83,21 @@ export class UmbInputUploadFieldFileElement extends UmbLitElement {
 				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);
+			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
index eb0b354760..0499e5c673 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-upload-field/input-upload-field.element.ts
@@ -221,7 +221,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 		const type = this.#getFileTypeFromPath(file.path);
 
 		return html`
-			<div style="position:relative; display: flex">
+			<div style="position:relative; display: flex; width: fit-content; max-width: 100%">
 				${getElementTemplate()}
 				${file.queueItem?.status === 'waiting' ? html`<umb-temporary-file-badge></umb-temporary-file-badge>` : nothing}
 			</div>
@@ -270,7 +270,7 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 	#renderButtonRemove() {
 		if (!this._files.length && !this._files.length) return;
 		return html`<uui-button compact @click=${this.#handleRemove} label="Remove files">
-			<uui-icon name="icon-trash"></uui-icon> Remove file(s)
+			<uui-icon name="icon-trash"></uui-icon> Remove file ${this._files.length > 1 ? 's' : ''}
 		</uui-button>`;
 	}
 
@@ -299,10 +299,6 @@ export class UmbInputUploadFieldElement extends FormControlMixin(UmbLitElement)
 				padding: var(--uui-size-space-4);
 				border: 1px solid var(--uui-color-border);
 				border-radius: var(--uui-border-radius);
-				justify-items: center;
-			}
-			#wrapper:has(* + *) {
-				justify-items: unset;
 			}
 
 			uui-file-dropzone {