@umbraco-cms/backoffice 16.0.0 → 16.1.0

package/dist-cms/packages/language/app-language-select/manifests.js

@@ -1,4 +1,5 @@
 import { UMB_CONTENT_SECTION_ALIAS } from '@umbraco-cms/backoffice/content';
+import { UMB_SECTION_ALIAS_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
 export const manifests = [
     {
         type: 'sectionSidebarApp',
@@ -8,7 +9,7 @@ export const manifests = [
         weight: 900,
         conditions: [
             {
-                alias: 'Umb.Condition.SectionAlias',
+                alias: UMB_SECTION_ALIAS_CONDITION_ALIAS,
                 match: UMB_CONTENT_SECTION_ALIAS,
             },
             {

package/dist-cms/packages/language/collection/repository/language-collection.server.data-source.d.ts

@@ -28,7 +28,7 @@ export declare class UmbLanguageCollectionServerDataSource implements UmbCollect
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/language/repository/detail/language-detail.server.data-source.d.ts

@@ -30,7 +30,7 @@ export declare class UmbLanguageServerDataSource implements UmbDetailDataSource<
      * @memberof UmbLanguageServerDataSource
      */
     read(unique: string): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbLanguageDetailModel;
@@ -43,7 +43,7 @@ export declare class UmbLanguageServerDataSource implements UmbDetailDataSource<
      * @memberof UmbLanguageServerDataSource
      */
     create(model: UmbLanguageDetailModel): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbLanguageDetailModel;
@@ -57,7 +57,7 @@ export declare class UmbLanguageServerDataSource implements UmbDetailDataSource<
      * @memberof UmbLanguageServerDataSource
      */
     update(model: UmbLanguageDetailModel): Promise<{
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     } | {
         data: UmbLanguageDetailModel;

package/dist-cms/packages/language/repository/item/language-item.server.data-source.d.ts

@@ -16,6 +16,6 @@ export declare class UmbLanguageItemServerDataSource extends UmbItemServerDataSo
     constructor(host: UmbControllerHost);
     getItems(uniques: Array<string>): Promise<{
         data: UmbLanguageItemModel[] | undefined;
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: Error | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | import("@umbraco-cms/backoffice/resources").UmbError | undefined;
     }>;
 }

package/dist-cms/packages/language/workspace/language/language-workspace-editor.element.d.ts

@@ -1,6 +1,5 @@
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export declare class UmbLanguageWorkspaceEditorElement extends UmbLitElement {
-    #private;
     _isNew?: boolean;
     constructor();
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/language/workspace/language/language-workspace-editor.element.js

@@ -10,12 +10,10 @@ import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 let UmbLanguageWorkspaceEditorElement = class UmbLanguageWorkspaceEditorElement extends UmbLitElement {
-    #workspaceContext;
     constructor() {
         super();
         this.consumeContext(UMB_LANGUAGE_WORKSPACE_CONTEXT, (context) => {
-            this.#workspaceContext = context;
-            this.observe(this.#workspaceContext?.isNew, (isNew) => (this._isNew = isNew));
+            this.observe(context?.isNew, (isNew) => (this._isNew = isNew));
         });
     }
     render() {

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-message-templates-overview.element.js

@@ -61,6 +61,10 @@ let UmbLogViewerMessageTemplatesOverviewElement = class UmbLogViewerMessageTempl
             ? html `<uui-pagination
 							.current=${this.#currentPage}
 							.total=${Math.ceil(this._total / this.#itemsPerPage)}
+							firstlabel=${this.localize.term('general_first')}
+                            previouslabel=${this.localize.term('general_previous')}
+                            nextlabel=${this.localize.term('general_next')}
+                            lastlabel=${this.localize.term('general_last')}
 							@change=${this.#onChangePage}></uui-pagination>`
             : nothing}
 			</uui-box>

package/dist-cms/packages/log-viewer/workspace/views/overview/components/log-viewer-saved-searches-overview.element.js

@@ -60,6 +60,10 @@ let UmbLogViewerSavedSearchesOverviewElement = class UmbLogViewerSavedSearchesOv
             ? html `<uui-pagination
 						.current=${this.#currentPage}
 						.total=${Math.ceil(this._total / this.#itemsPerPage)}
+						firstlabel=${this.localize.term('general_first')}
+                        previouslabel=${this.localize.term('general_previous')}
+                        nextlabel=${this.localize.term('general_next')}
+                        lastlabel=${this.localize.term('general_last')}
 						@change=${this.#onChangePage}></uui-pagination>`
             : nothing}
 		</uui-box>`;

package/dist-cms/packages/log-viewer/workspace/views/search/components/log-viewer-messages-list.element.js

@@ -55,7 +55,13 @@ let UmbLogViewerMessagesListElement = class UmbLogViewerMessagesListElement exte
         if (totalPages <= 1)
             return '';
         return html `<div id="pagination">
-			<uui-pagination .total=${totalPages} @change="${this._onPageChange}"></uui-pagination>
+			<uui-pagination 
+			.total=${totalPages} 
+			firstlabel=${this.localize.term('general_first')}
+            previouslabel=${this.localize.term('general_previous')}
+            nextlabel=${this.localize.term('general_next')}
+            lastlabel=${this.localize.term('general_last')}
+			@change="${this._onPageChange}"></uui-pagination>
 		</div>`;
     }
     #renderLogs() {

package/dist-cms/packages/media/imaging/components/imaging-thumbnail.element.js

@@ -81,12 +81,7 @@ let UmbImagingThumbnailElement = class UmbImagingThumbnailElement extends UmbLit
     #renderThumbnail() {
         if (this._isLoading)
             return nothing;
-        return when(this._thumbnailUrl, () => html `<img
-					id="figure"
-					src="${this._thumbnailUrl}"
-					alt="${this.alt}"
-					loading="${this.loading}"
-					draggable="false" />`, () => html `<umb-icon id="icon" name="${this.icon}"></umb-icon>`);
+        return when(this._thumbnailUrl, (url) => html `<img id="figure" src=${url} alt=${this.alt} loading=${this.loading} draggable="false" />`, () => html `<umb-icon id="icon" name=${this.icon}></umb-icon>`);
     }
     async #generateThumbnailUrl() {
         const { data } = await this.#imagingRepository.requestThumbnailUrls([this.unique], this.height, this.width, this.mode);

package/dist-cms/packages/media/imaging/imaging.server.data.d.ts

@@ -25,7 +25,7 @@ export declare class UmbImagingServerDataSource {
         data: UmbMediaUrlModel[];
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/audit-log/info-app/media-history-workspace-info-app.element.js

@@ -119,6 +119,10 @@ let UmbMediaHistoryWorkspaceInfoAppElement = class UmbMediaHistoryWorkspaceInfoA
 							class="pagination"
 							.current=${this._currentPageNumber}
 							.total=${this._totalPages}
+							firstlabel=${this.localize.term('general_first')}
+                            previouslabel=${this.localize.term('general_previous')}
+                            nextlabel=${this.localize.term('general_next')}
+                            lastlabel=${this.localize.term('general_last')}
 							@change=${this.#onPageChange}></uui-pagination>
 					`
             : nothing}

package/dist-cms/packages/media/media/audit-log/repository/media-audit-log.repository.d.ts

@@ -28,7 +28,7 @@ export declare class UmbMediaAuditLogRepository extends UmbRepositoryBase implem
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/audit-log/repository/media-audit-log.server.data-source.d.ts

@@ -26,7 +26,7 @@ export declare class UmbMediaAuditLogServerDataSource implements UmbAuditLogData
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/collection/media-collection.context.d.ts

@@ -6,7 +6,7 @@ export declare class UmbMediaCollectionContext extends UmbDefaultCollectionConte
     #private;
     /**
      * The thumbnail items that are currently displayed in the collection.
-     * @deprecated Use the `<umb-imaging-thumbnail>` element instead.
+     * @deprecated Use the `<umb-imaging-thumbnail>` element instead. This will be removed in Umbraco 17.
      */
     readonly thumbnailItems: import("rxjs").Observable<UmbMediaCollectionItemModel[]>;
     readonly placeholders: import("rxjs").Observable<UmbMediaCollectionItemModel[]>;

package/dist-cms/packages/media/media/collection/media-collection.context.js

@@ -8,7 +8,7 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext {
         super(host, UMB_MEDIA_GRID_COLLECTION_VIEW_ALIAS);
         /**
          * The thumbnail items that are currently displayed in the collection.
-         * @deprecated Use the `<umb-imaging-thumbnail>` element instead.
+         * @deprecated Use the `<umb-imaging-thumbnail>` element instead. This will be removed in Umbraco 17.
          */
         this.thumbnailItems = this.items;
         this.#placeholders = new UmbArrayState([], (x) => x.unique);

package/dist-cms/packages/media/media/collection/repository/media-collection.repository.d.ts

@@ -15,7 +15,7 @@ export declare class UmbMediaCollectionRepository extends UmbRepositoryBase impl
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/collection/repository/media-collection.server.data-source.d.ts

@@ -11,7 +11,7 @@ export declare class UmbMediaCollectionServerDataSource implements UmbCollection
         };
         error?: undefined;
     } | {
-        error: Error | import("@umbraco-cms/backoffice/resources").UmbError | import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
+        error: import("@umbraco-cms/backoffice/resources").UmbApiError | import("@umbraco-cms/backoffice/resources").UmbCancelError | undefined;
         data?: undefined;
     }>;
 }

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-field.element.d.ts

@@ -22,7 +22,7 @@ export declare class UmbInputImageCropperFieldElement extends UmbLitElement {
     protected renderMain(): import("lit-html").TemplateResult<1>;
     protected renderActions(): import("lit-html").TemplateResult<1>;
     protected renderSide(): unknown;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-field.element.js

@@ -137,59 +137,83 @@ let UmbInputImageCropperFieldElement = class UmbInputImageCropperFieldElement ex
 		`;
     }
     renderActions() {
-        return html `<slot name="actions"></slot>
-			${when(!this.hideFocalPoint, () => html `<uui-button
-						label=${this.localize.term('content_resetFocalPoint')}
-						@click=${this.onResetFocalPoint}></uui-button>`)} `;
+        return html `
+			<slot name="actions"></slot>
+			${when(!this.hideFocalPoint && this.focalPoint.left !== 0.5 && this.focalPoint.top !== 0.5, () => html `
+					<uui-button compact label=${this.localize.term('content_resetFocalPoint')} @click=${this.onResetFocalPoint}>
+						<uui-icon name="icon-axis-rotation"></uui-icon>
+						${this.localize.term('content_resetFocalPoint')}
+					</uui-button>
+				`)}
+		`;
     }
     renderSide() {
         if (!this.value || !this.crops)
             return;
-        return repeat(this.crops, (crop) => crop.alias + JSON.stringify(crop.coordinates), (crop) => html ` <umb-image-cropper-preview
-					@click=${() => this.onCropClick(crop)}
+        return repeat(this.crops, (crop) => crop.alias + JSON.stringify(crop.coordinates), (crop) => html `
+				<umb-image-cropper-preview
 					.crop=${crop}
 					.focalPoint=${this.focalPoint}
-					.src=${this.source}></umb-image-cropper-preview>`);
+					.src=${this.source}
+					?active=${this.currentCrop?.alias === crop.alias}
+					@click=${() => this.onCropClick(crop)}>
+				</umb-image-cropper-preview>
+			`);
     }
-    static { this.styles = css `
-		:host {
-			display: flex;
-			width: 100%;
-			box-sizing: border-box;
-			gap: var(--uui-size-space-3);
-			height: 400px;
-		}
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				width: 100%;
+				box-sizing: border-box;
+				gap: var(--uui-size-space-3);
+				height: 400px;
+			}
+
+			#main {
+				max-width: 500px;
+				min-width: 300px;
+				width: 100%;
+				height: 100%;
+				display: flex;
+				gap: var(--uui-size-space-1);
+				flex-direction: column;
+			}
+
+			#actions {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 0.5rem;
+
+				uui-icon {
+					padding-right: var(--uui-size-1);
+				}
+			}
 
-		#main {
-			max-width: 500px;
-			min-width: 300px;
-			width: 100%;
-			height: 100%;
-			display: flex;
-			gap: var(--uui-size-space-1);
-			flex-direction: column;
-		}
+			slot[name='actions'] {
+				display: block;
+				flex: 1;
+			}
 
-		#actions {
-			display: flex;
-			justify-content: space-between;
-			margin-top: 0.5rem;
-		}
+			umb-image-cropper-focus-setter {
+				height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
+			}
 
-		umb-image-cropper-focus-setter {
-			height: calc(100% - 33px - var(--uui-size-space-1)); /* Temp solution to make room for actions */
-		}
+			#side {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+				gap: var(--uui-size-space-3);
+				flex-grow: 1;
+				overflow-y: auto;
+				height: fit-content;
+				max-height: 100%;
 
-		#side {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-			gap: var(--uui-size-space-3);
-			flex-grow: 1;
-			overflow-y: auto;
-			height: fit-content;
-			max-height: 100%;
-		}
-	`; }
+				umb-image-cropper-preview[active] {
+					background-color: var(--uui-color-current);
+				}
+			}
+		`,
+    ]; }
 };
 __decorate([
     property({ attribute: false })

package/dist-cms/packages/media/media/components/input-image-cropper/image-cropper-focus-setter.element.js

@@ -68,15 +68,9 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
             this.#resetCoords();
         }
     }
-    #coordsToFactor(x, y) {
-        const top = (y / 100 / y) * 50;
-        const left = (x / 100 / x) * 50;
-        return { top, left };
-    }
     #setFocalPoint(x, y, width, height) {
         const left = clamp(x / width, 0, 1);
         const top = clamp(y / height, 0, 1);
-        this.#coordsToFactor(x, y);
         const focalPoint = { left, top };
         this.dispatchEvent(new UmbFocalPointChangeEvent(focalPoint));
     }
@@ -189,12 +183,9 @@ let UmbImageCropperFocusSetterElement = class UmbImageCropperFocusSetterElement
 				<img id="image" @keydown=${() => nothing} src=${this.src} alt="" />
 				<span
 					id="focal-point"
-					class=${classMap({
-            'focal-point--dragging': this._isDraggingGridHandle,
-            hidden: this.hideFocalPoint,
-        })}
+					class=${classMap({ 'focal-point--dragging': this._isDraggingGridHandle, hidden: this.hideFocalPoint })}
 					tabindex=${ifDefined(this.disabled ? undefined : '0')}
-					aria-label="${this.localize.term('general_focalPoint')}"
+					aria-label=${this.localize.term('general_focalPoint')}
 					@keydown=${this.#handleGridKeyDown}>
 				</span>
 			</div>

package/dist-cms/packages/media/media/components/input-image-cropper/input-image-cropper.element.js

@@ -115,14 +115,14 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbF
         this.dispatchEvent(new UmbChangeEvent());
     }
     #renderImageCropper() {
-        return html `<umb-image-cropper-field
-			.value=${this.value}
-			.file=${this._file?.temporaryFile?.file}
-			@change=${this.#onChange}>
-			<uui-button slot="actions" @click=${this.#onRemove} label=${this.localize.term('content_uploadClear')}>
-				<uui-icon name="icon-trash"></uui-icon>${this.localize.term('content_uploadClear')}
-			</uui-button>
-		</umb-image-cropper-field> `;
+        return html `
+			<umb-image-cropper-field .value=${this.value} .file=${this._file?.temporaryFile?.file} @change=${this.#onChange}>
+				<uui-button slot="actions" compact label=${this.localize.term('content_uploadClear')} @click=${this.#onRemove}>
+					<uui-icon name="icon-trash"></uui-icon>
+					<umb-localize key="content_uploadClear">Remove file(s)</umb-localize>
+				</uui-button>
+			</umb-image-cropper-field>
+		`;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -131,10 +131,17 @@ let UmbInputImageCropperElement = class UmbInputImageCropperElement extends UmbF
 				max-width: 500px;
 				min-width: 300px;
 			}
+
 			#loader {
 				display: flex;
 				justify-content: center;
 			}
+
+			[slot='actions'] {
+				uui-icon {
+					padding-right: var(--uui-size-1);
+				}
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/media/media/components/input-upload-field/file-upload-preview.element.d.ts

@@ -0,0 +1,18 @@
+import type { UmbFileUploadPreviewElement as UmbFileUploadPreviewElementInterface } from './file-upload-preview.interface.js';
+import { nothing } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+export declare class UmbFileUploadPreviewElement extends UmbLitElement implements UmbFileUploadPreviewElementInterface {
+    #private;
+    private _previewAlias?;
+    file?: File;
+    set path(value: string | undefined);
+    get path(): string | undefined;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export { UmbFileUploadPreviewElement as element };
+declare global {
+    interface HTMLElementTagNameMap {
+        'umb-file-upload-preview': UmbFileUploadPreviewElement;
+    }
+}

package/dist-cms/packages/media/media/components/input-upload-field/file-upload-preview.element.js

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { getMimeTypeFromExtension } from '../../components/index.js';
+import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+let UmbFileUploadPreviewElement = class UmbFileUploadPreviewElement extends UmbLitElement {
+    set path(value) {
+        this.#path = value;
+        this.#setPreviewAlias();
+    }
+    get path() {
+        return this.#path;
+    }
+    #path = '';
+    #manifests = [];
+    async #setPreviewAlias() {
+        if (!this.path)
+            return;
+        const manifests = await this.#getManifests();
+        const fallbackAlias = manifests.find((manifest) => stringOrStringArrayContains(manifest.forMimeTypes, '*/*'))?.alias;
+        let mimeType = null;
+        if (this.file) {
+            mimeType = this.file.type;
+        }
+        else {
+            mimeType = this.#getMimeTypeFromPath(this.path);
+        }
+        if (!mimeType) {
+            this._previewAlias = fallbackAlias;
+            return;
+        }
+        // Check for an exact match
+        const exactMatch = manifests.find((manifest) => {
+            return stringOrStringArrayContains(manifest.forMimeTypes, mimeType);
+        });
+        if (exactMatch) {
+            this._previewAlias = exactMatch.alias;
+            return;
+        }
+        // Check for wildcard match (e.g. image/*)
+        const wildcardMatch = manifests.find((manifest) => {
+            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;
+                return undefined;
+            });
+        });
+        if (wildcardMatch) {
+            this._previewAlias = wildcardMatch.alias;
+            return;
+        }
+        // Use fallbackAlias.
+        this._previewAlias = fallbackAlias;
+    }
+    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();
+        return this.#manifests;
+    }
+    #getMimeTypeFromPath(path) {
+        // Extract the the MIME type from the data url
+        if (path.startsWith('data:')) {
+            const mimeType = path.substring(5, path.indexOf(';'));
+            return mimeType;
+        }
+        // Extract the file extension from the path
+        const extension = path.split('.').pop()?.toLowerCase();
+        if (!extension)
+            return null;
+        return getMimeTypeFromExtension('.' + extension);
+    }
+    render() {
+        if (!this.path)
+            return nothing;
+        return html `
+			<umb-extension-slot
+				single
+				type="fileUploadPreview"
+				.props=${{ path: this.path, file: this.file }}
+				.filter=${(manifest) => manifest.alias === this._previewAlias}>
+			</umb-extension-slot>
+		`;
+    }
+    static { this.styles = [
+        css `
+			:host {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100%;
+			}
+		`,
+    ]; }
+};
+__decorate([
+    state()
+], UmbFileUploadPreviewElement.prototype, "_previewAlias", void 0);
+__decorate([
+    property({ type: Object })
+], UmbFileUploadPreviewElement.prototype, "file", void 0);
+__decorate([
+    property({ type: String })
+], UmbFileUploadPreviewElement.prototype, "path", null);
+UmbFileUploadPreviewElement = __decorate([
+    customElement('umb-file-upload-preview')
+], UmbFileUploadPreviewElement);
+export { UmbFileUploadPreviewElement };
+export { UmbFileUploadPreviewElement as element };

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.d.ts

@@ -1,6 +1,6 @@
+import type { UmbFileUploadPreviewElement } from '../file-upload-preview.interface.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-export default class UmbInputUploadFieldAudioElement extends UmbLitElement {
-    #private;
+export default class UmbInputUploadFieldAudioElement extends UmbLitElement implements UmbFileUploadPreviewElement {
     path: string;
     render(): import("lit-html").TemplateResult<1>;
     static readonly styles: import("lit").CSSResult[];

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-audio.element.js

@@ -11,13 +11,11 @@ let UmbInputUploadFieldAudioElement = class UmbInputUploadFieldAudioElement exte
         super(...arguments);
         this.path = '';
     }
-    get #label() {
-        return this.path.split('/').pop() ?? '';
-    }
     render() {
         if (!this.path)
             return html `<uui-loader></uui-loader>`;
-        return html `<audio controls src=${this.path} title=${this.#label}></audio>`;
+        const label = this.path.split('/').pop() ?? '';
+        return html `<audio controls src=${this.path} title=${label}></audio>`;
     }
     static { this.styles = [
         css `
@@ -26,6 +24,7 @@ let UmbInputUploadFieldAudioElement = class UmbInputUploadFieldAudioElement exte
 				width: 999px;
 				max-width: 100%;
 			}
+
 			audio {
 				width: 100%;
 			}

package/dist-cms/packages/media/media/components/input-upload-field/preview/input-upload-field-file.element.d.ts

@@ -1,12 +1,7 @@
+import type { UmbFileUploadPreviewElement } from '../file-upload-preview.interface.js';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-export default class UmbInputUploadFieldFileElement extends UmbLitElement {
-    #private;
+export default class UmbInputUploadFieldFileElement extends UmbLitElement implements UmbFileUploadPreviewElement {
     path: string;
-    /**
-     * @description The file to be rendered.
-     * @type {File}
-     */
-    file?: File;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {