From e8b3344e0da0258338a28d3d6e8827c5ef42dcc4 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 2 Oct 2024 08:40:35 +0200
Subject: [PATCH] fix: use 'value' directly instead of saving the src into a
 new state

---
 .../input-upload-field.element.ts             | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
index 0bbfbae1de..81e46c558d 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts
@@ -27,13 +27,17 @@ import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
 export class UmbInputUploadFieldElement extends UmbLitElement {
 	@property({ type: Object })
 	set value(value: MediaValueType) {
-		if (!value?.src) return;
-		this.src = value.src;
+		this.#src = value?.src ?? '';
 	}
 	get value(): MediaValueType {
-		return !this.temporaryFile ? { src: this._src } : { temporaryFileId: this.temporaryFile.temporaryUnique };
+		return {
+			src: this.#src,
+			temporaryFileId: this.temporaryFile?.temporaryUnique,
+		};
 	}
 
+	#src = '';
+
 	/**
 	 * @description Allowed file extensions. Allow all if empty.
 	 * @type {Array<string>}
@@ -50,17 +54,6 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	@state()
 	public temporaryFile?: UmbTemporaryFileModel;
 
-	public set src(src: string) {
-		this._src = src;
-		this._previewAlias = this.#getPreviewElementAlias();
-	}
-	public get src() {
-		return this._src;
-	}
-
-	@state()
-	private _src = '';
-
 	@state()
 	private _extensions?: string[];
 
@@ -162,7 +155,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 
 		const reader = new FileReader();
 		reader.onload = () => {
-			this.src = reader.result as string;
+			this.value = { src: reader.result as string };
 		};
 		reader.readAsDataURL(item.file);
 
@@ -180,8 +173,8 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	}
 
 	override render() {
-		if (this.src && this._previewAlias) {
-			return this.#renderFile(this.src, this._previewAlias, this.temporaryFile?.file);
+		if (this.value.src && this._previewAlias) {
+			return this.#renderFile(this.value.src, this._previewAlias, this.temporaryFile?.file);
 		} else {
 			return this.#renderDropzone();
 		}
@@ -200,7 +193,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 		`;
 	}
 
-	#renderFile(src: string, previewAlias?: string, file?: File) {
+	#renderFile(src: string, previewAlias: string, file?: File) {
 		if (!previewAlias) return 'An error occurred. No previewer found for the file type.';
 		return html`
 			<div id="wrapper">
@@ -226,7 +219,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 	}
 
 	#handleRemove() {
-		this.src = '';
+		this.value = { src: undefined };
 		this.temporaryFile = undefined;
 		this.dispatchEvent(new UmbChangeEvent());
 	}