From 92bb606229f64d7ec3aa2207afac232a5bc314ae Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 2 Oct 2024 08:39:32 +0200
Subject: [PATCH] fix: wait for manifests to be loaded when calculating the
 preview element

---
 .../input-upload-field.element.ts             | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 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 b3046d3deb..daadc08235 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
@@ -74,9 +74,13 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 
 	constructor() {
 		super();
-		new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'fileUploadPreview', null, (manifests) => {
-			this.#manifests = manifests.map((manifest) => manifest.manifest);
-		});
+
+	async #getManifests() {
+		await new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'fileUploadPreview', null, (exts) => {
+			this.#manifests = exts.map((exts) => exts.manifest);
+		}).asPromise();
+
+		return this.#manifests;
 	}
 
 	#setExtensions(extensions: Array<string>) {
@@ -88,20 +92,24 @@ export class UmbInputUploadFieldElement extends UmbLitElement {
 		this._extensions = extensions?.map((extension) => `.${extension}`);
 	}
 
-	#getPreviewElementAlias() {
-		const fallbackAlias = this.#manifests.find((manifest) => manifest.forMimeTypes.includes('*/*'))?.alias;
+	async #getPreviewElementAlias() {
+		if (!this.value.src) return;
+		const manifests = await this.#getManifests();
+		const fallbackAlias = manifests.find((manifest) =>
+			stringOrStringArrayContains(manifest.forMimeTypes, '*/*'),
+		)?.alias;
 
-		const mimeType = this.#getMimeTypeFromPath(this._src);
+		const mimeType = this.#getMimeTypeFromPath(this.value.src);
 		if (!mimeType) return fallbackAlias;
 
 		// Check for an exact match
-		const exactMatch = this.#manifests.find((manifest) => {
-			return manifest.forMimeTypes.includes(mimeType);
+		const exactMatch = manifests.find((manifest) => {
+			return stringOrStringArrayContains(manifest.forMimeTypes, mimeType);
 		});
 		if (exactMatch) return exactMatch.alias;
 
 		// Check for wildcard match (e.g. image/*)
-		const wildcardMatch = this.#manifests.find((manifest) => {
+		const wildcardMatch = manifests.find((manifest) => {
 			const forMimeTypes = Array.isArray(manifest.forMimeTypes) ? manifest.forMimeTypes : [manifest.forMimeTypes];
 			return forMimeTypes.find((type) => {
 				const snippet = type.replace(/\*/g, '');