From 1c323ef8dea92261d85eb013259378d0a9893db6 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 1/6] 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/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index b3046d3deb..daadc08235 100644 --- a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/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) { @@ -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, ''); From 443e1b9ef6554459f23515f99a08f352c63c8730 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 2 Oct 2024 08:39:54 +0200 Subject: [PATCH 2/6] fix: only calculate a new preview element when the 'value' changes --- .../input-upload-field/input-upload-field.element.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index daadc08235..d328a429cf 100644 --- a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts @@ -74,6 +74,14 @@ export class UmbInputUploadFieldElement extends UmbLitElement { constructor() { super(); + } + + override updated(changedProperties: PropertyValueMap | Map) { + super.updated(changedProperties); + if (changedProperties.has('value')) { + this.#setPreviewAlias(); + } + } async #getManifests() { await new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'fileUploadPreview', null, (exts) => { @@ -92,6 +100,10 @@ export class UmbInputUploadFieldElement extends UmbLitElement { this._extensions = extensions?.map((extension) => `.${extension}`); } + async #setPreviewAlias(): Promise { + this._previewAlias = await this.#getPreviewElementAlias(); + } + async #getPreviewElementAlias() { if (!this.value.src) return; const manifests = await this.#getManifests(); From 258cebe15652d6311e99ef3dec8e9675bc7577fd Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 2 Oct 2024 08:40:12 +0200 Subject: [PATCH 3/6] chore: sort imports --- .../components/input-upload-field/input-upload-field.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index d328a429cf..0bbfbae1de 100644 --- a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts @@ -13,6 +13,7 @@ import { property, query, state, + type PropertyValueMap, } from '@umbraco-cms/backoffice/external/lit'; import type { UUIFileDropzoneElement, UUIFileDropzoneEvent } from '@umbraco-cms/backoffice/external/uui'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; @@ -20,6 +21,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils'; @customElement('umb-input-upload-field') export class UmbInputUploadFieldElement extends UmbLitElement { From c98eca06ddbd7a542563bcf2297e15c8b27b12d4 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 4/6] 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/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index 0bbfbae1de..81e46c558d 100644 --- a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/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} @@ -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`
@@ -226,7 +219,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement { } #handleRemove() { - this.src = ''; + this.value = { src: undefined }; this.temporaryFile = undefined; this.dispatchEvent(new UmbChangeEvent()); } From ed3eccce2a41633586d0029f3e7f9645bbf14950 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 2 Oct 2024 08:44:28 +0200 Subject: [PATCH 5/6] fix: calculate a preview alias only when the 'src' field has changed --- .../components/input-upload-field/input-upload-field.element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index 81e46c558d..63a060707f 100644 --- a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts @@ -73,7 +73,7 @@ export class UmbInputUploadFieldElement extends UmbLitElement { override updated(changedProperties: PropertyValueMap | Map) { super.updated(changedProperties); - if (changedProperties.has('value')) { + if (changedProperties.has('value') && changedProperties.get('value')?.src !== this.value.src) { this.#setPreviewAlias(); } } From 3a9dca49c6d9c035c012c874c30c3ce84ff1adb8 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Wed, 2 Oct 2024 08:50:15 +0200 Subject: [PATCH 6/6] fix: add stored manifests if available --- .../components/input-upload-field/input-upload-field.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts index 63a060707f..cff92c6807 100644 --- a/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts +++ b/src/packages/media/media/components/input-upload-field/input-upload-field.element.ts @@ -79,6 +79,8 @@ export class UmbInputUploadFieldElement extends UmbLitElement { } async #getManifests() { + if (this.#manifests.length) return this.#manifests; + await new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'fileUploadPreview', null, (exts) => { this.#manifests = exts.map((exts) => exts.manifest); }).asPromise();