From 349630adeb437197315da7b90d69ad3b58c8c1bd Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 21:37:27 +0200 Subject: [PATCH 1/8] Import missing component --- .../image-cropper-editor/image-cropper-editor-modal.element.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 1a65bf53d362..5c56042ead38 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -15,6 +15,8 @@ import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/bac import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace'; import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; +import '../../components/input-upload-field/file-upload-preview.element.js'; + @customElement('umb-image-cropper-editor-modal') export class UmbImageCropperEditorModalElement extends UmbModalBaseElement< UmbImageCropperEditorModalData, From 91a7434d8bccbe94b63c76ec191dfc478471f474 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 21:37:54 +0200 Subject: [PATCH 2/8] Handle nullable type --- .../input-upload-field/file-upload-preview.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts index a3020e33523e..e657940dfc29 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts @@ -50,7 +50,7 @@ export class UmbFileUploadPreviewElement extends UmbLitElement implements UmbFil // Check for an exact match const exactMatch = manifests.find((manifest) => { - return stringOrStringArrayContains(manifest.forMimeTypes, mimeType); + return stringOrStringArrayContains(manifest.forMimeTypes, mimeType!); }); if (exactMatch) { @@ -63,8 +63,8 @@ export class UmbFileUploadPreviewElement extends UmbLitElement implements UmbFil const forMimeTypes = Array.isArray(manifest.forMimeTypes) ? manifest.forMimeTypes : [manifest.forMimeTypes]; return forMimeTypes.find((type) => { const snippet = type.replace(/\*/g, ''); - if (mimeType.startsWith(snippet)) return manifest.alias; - if (mimeType.endsWith(snippet)) return manifest.alias; + if (mimeType!.startsWith(snippet)) return manifest.alias; + if (mimeType!.endsWith(snippet)) return manifest.alias; return undefined; }); }); From 067dab76ee91cea906d78fb48bacdb89d8e88e52 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 21:59:24 +0200 Subject: [PATCH 3/8] Vertically center image --- .../preview/input-upload-field-svg.element.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts index e5639485f4f7..4a72fd61716d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts @@ -20,6 +20,9 @@ export default class UmbInputUploadFieldSvgElement extends UmbLitElement impleme max-height: 400px; width: fit-content; max-width: 100%; + display: flex; + flex-direction: column; + justify-content: center; } img { From b08a8b4c26a75cde609386cb009922c1616175d7 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 22:06:30 +0200 Subject: [PATCH 4/8] Add minimum width for SVG without dimensions --- .../input-upload-field/preview/input-upload-field-svg.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts index 4a72fd61716d..cd4d8acdf64f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts @@ -16,6 +16,7 @@ export default class UmbInputUploadFieldSvgElement extends UmbLitElement impleme static override readonly styles = [ css` :host { + min-width: 240px; min-height: 240px; max-height: 400px; width: fit-content; From 8d334d442f4e2e970eed00ae84e0dd61b09bcbd6 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 22:18:31 +0200 Subject: [PATCH 5/8] 100% height until max height --- .../input-upload-field/preview/input-upload-field-svg.element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts index cd4d8acdf64f..e001f44f98fc 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/preview/input-upload-field-svg.element.ts @@ -19,6 +19,7 @@ export default class UmbInputUploadFieldSvgElement extends UmbLitElement impleme min-width: 240px; min-height: 240px; max-height: 400px; + height: 100%; width: fit-content; max-width: 100%; display: flex; From a38a12b004e803dd4912174530cc30d5baa8b516 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 22:23:42 +0200 Subject: [PATCH 6/8] 100% height minus top/bottom padding --- .../image-cropper-editor-modal.element.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 5c56042ead38..44218918cbbe 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -250,6 +250,12 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement< flex: 1; } + umb-input-upload-field-svg { + max-height: calc(100% - var(--uui-size-10) * 2); + padding-block-start: var(--uui-size-10); + padding-block-end: var(--uui-size-10); + } + #main { flex: 1; background-color: var(--uui-color-surface); From 939784bdb0b7955414bf67f10ce8f1befe01d2a6 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 22:26:51 +0200 Subject: [PATCH 7/8] Revert "100% height minus top/bottom padding" This reverts commit 67ada4c70f4b75dfcfa2b54ce139ec7465a17ce1. --- .../image-cropper-editor-modal.element.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts index 44218918cbbe..5c56042ead38 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts @@ -250,12 +250,6 @@ export class UmbImageCropperEditorModalElement extends UmbModalBaseElement< flex: 1; } - umb-input-upload-field-svg { - max-height: calc(100% - var(--uui-size-10) * 2); - padding-block-start: var(--uui-size-10); - padding-block-end: var(--uui-size-10); - } - #main { flex: 1; background-color: var(--uui-color-surface); From eb0b2f4bcf86d28ece13761cfc2b3e0d7c501aea Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 25 Oct 2025 22:28:04 +0200 Subject: [PATCH 8/8] Revert "Handle nullable type" This reverts commit 3130e11a4be83a18b5a7d8c1c24ee23c94d8765d. --- .../input-upload-field/file-upload-preview.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts index e657940dfc29..a3020e33523e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-upload-field/file-upload-preview.element.ts @@ -50,7 +50,7 @@ export class UmbFileUploadPreviewElement extends UmbLitElement implements UmbFil // Check for an exact match const exactMatch = manifests.find((manifest) => { - return stringOrStringArrayContains(manifest.forMimeTypes, mimeType!); + return stringOrStringArrayContains(manifest.forMimeTypes, mimeType); }); if (exactMatch) { @@ -63,8 +63,8 @@ export class UmbFileUploadPreviewElement extends UmbLitElement implements UmbFil const forMimeTypes = Array.isArray(manifest.forMimeTypes) ? manifest.forMimeTypes : [manifest.forMimeTypes]; return forMimeTypes.find((type) => { const snippet = type.replace(/\*/g, ''); - if (mimeType!.startsWith(snippet)) return manifest.alias; - if (mimeType!.endsWith(snippet)) return manifest.alias; + if (mimeType.startsWith(snippet)) return manifest.alias; + if (mimeType.endsWith(snippet)) return manifest.alias; return undefined; }); });