@umbraco-cms/backoffice 17.2.2 → 17.3.0-rc2

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

@@ -311,7 +311,7 @@ let UmbInputRichMediaElement = class UmbInputRichMediaElement extends UmbFormCon
             return nothing;
         const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
         return html `
-			<uui-card-media id=${item.unique} name=${item.name} .href=${href} ?readonly=${this.readonly}>
+			<uui-card-media id=${item.unique} title=${item.name} name=${item.name} .href=${href} ?readonly=${this.readonly}>
 				<umb-imaging-thumbnail
 					.unique=${item.media}
 					.alt=${item.name}

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

@@ -4,6 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { UMB_MEDIA_ENTITY_TYPE } from '../../entity.js';
 import { getMimeTypeFromExtension } from './utils.js';
 import { css, customElement, html, ifDefined, nothing, property, state } from '../../../../../external/lit/index.js';
 import { stringOrStringArrayContains } from '../../../../core/utils/index.js';
@@ -12,8 +13,9 @@ import { UmbExtensionsManifestInitializer } from '../../../../../libs/extension-
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
 import { UmbFileDropzoneItemStatus } from '../../../dropzone/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbTextStyles } from '../../../../core/style/index.js';
+import { UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_SERVER_CONTEXT } from '../../../../core/server/index.js';
+import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbFormControlMixin } from '../../../../core/validation/index.js';
 let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbFormControlMixin(UmbLitElement) {
     set value(value) {
@@ -123,8 +125,18 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbFor
         this.#clearObjectUrl();
         const blobUrl = URL.createObjectURL(this.temporaryFile.file);
         this.value = { src: blobUrl };
+        void this.#ensureMediaNameFromFile(this.temporaryFile.file);
         this.dispatchEvent(new UmbChangeEvent());
     }
+    async #ensureMediaNameFromFile(file) {
+        const datasetContext = await this.getContext(UMB_NAMEABLE_PROPERTY_DATASET_CONTEXT);
+        if (!datasetContext || datasetContext.getEntityType() !== UMB_MEDIA_ENTITY_TYPE)
+            return;
+        const currentName = datasetContext.getName();
+        if (currentName && currentName.trim() !== '')
+            return;
+        datasetContext.setName(file.name);
+    }
     render() {
         if (!this.temporaryFile && !this.value?.src) {
             return this.#renderDropzone();
@@ -144,29 +156,34 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbFor
 		`;
     }
     #renderFile(src) {
-        if (!src.startsWith('blob:')) {
-            src = this._serverUrl + src;
-        }
+        const isBlob = src.startsWith('blob:');
+        const fullUrl = isBlob ? src : this._serverUrl + src;
+        const fileName = isBlob ? this.temporaryFile?.file?.name : src.split('/').pop();
         return html `
 			<div id="wrapper">
-				<div id="wrapperInner">
-					<umb-extension-slot
-						type="fileUploadPreview"
-						.props=${{ path: src, file: this.temporaryFile?.file }}
-						.filter=${(manifest) => manifest.alias === this._previewAlias}>
-					</umb-extension-slot>
+				<umb-extension-slot
+					type="fileUploadPreview"
+					.props=${{ path: fullUrl, file: this.temporaryFile?.file }}
+					.filter=${(manifest) => manifest.alias === this._previewAlias}>
+				</umb-extension-slot>
+				<div id="file-info" class="uui-text">
+					${this.#renderFileName(fileName, isBlob, fullUrl)}
+					<uui-button @click=${this.#handleRemove} label=${this.localize.term('content_uploadClear')}>
+						<uui-icon name="icon-trash"></uui-icon>
+						${this.localize.term('content_uploadClear')}
+					</uui-button>
 				</div>
 			</div>
-			${this.#renderButtonRemove()}
 		`;
     }
-    #renderButtonRemove() {
-        return html `
-			<uui-button compact @click=${this.#handleRemove} label=${this.localize.term('content_uploadClear')}>
-				<uui-icon name="icon-trash"></uui-icon>
-				<umb-localize key="content_uploadClear">Clear file(s)</umb-localize>
-			</uui-button>
-		`;
+    #renderFileName(fileName, isBlob, fullUrl) {
+        if (!fileName) {
+            return nothing;
+        }
+        if (isBlob) {
+            return html `<span id="file-name" title=${fileName}>${fileName}</span>`;
+        }
+        return html `<a id="file-name" href=${fullUrl} target="_blank" title=${fileName}>${fileName}</a>`;
     }
     #handleRemove() {
         // If the upload promise happens to be in progress, cancel it.
@@ -190,29 +207,35 @@ let UmbInputUploadFieldElement = class UmbInputUploadFieldElement extends UmbFor
 			:host {
 				position: relative;
 			}
-			uui-icon {
-				vertical-align: sub;
-				margin-right: var(--uui-size-space-4);
-			}
 
 			#wrapper {
-				display: grid;
-				grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-				gap: var(--uui-size-space-4);
-				box-sizing: border-box;
-				margin-bottom: var(--uui-size-space-3);
+				display: flex;
+				flex-direction: column;
+				width: fit-content;
+				min-width: 400px;
+				max-width: 100%;
 			}
 
-			#wrapper:has(umb-input-upload-field-file) {
-				padding: var(--uui-size-space-4);
+			#file-info {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
 				border: 1px solid var(--uui-color-border);
 				border-radius: var(--uui-border-radius);
+				padding-left: var(--uui-size-space-4);
+				margin-top: var(--uui-size-space-2);
 			}
 
-			#wrapperInner {
-				position: relative;
-				display: flex;
-				width: 100%;
+			#file-name {
+				flex: 1;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				min-width: 0;
+			}
+
+			a#file-name:not(:hover) {
+				text-decoration: none;
 			}
 		`,
     ]; }

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

@@ -2,6 +2,7 @@ import type { UmbFileUploadPreviewElement } from '../file-upload-preview.interfa
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 export default class UmbInputUploadFieldFileElement extends UmbLitElement implements UmbFileUploadPreviewElement {
     path: string;
+    file?: File;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -14,13 +14,17 @@ let UmbInputUploadFieldFileElement = class UmbInputUploadFieldFileElement extend
     render() {
         if (!this.path)
             return html `<uui-loader></uui-loader>`;
-        const fileExt = this.path.split('.').pop() ?? '';
+        const name = this.file?.name ?? this.path;
+        const fileExt = name.split('.').pop() ?? '';
         return html `<uui-symbol-file .type=${fileExt}></uui-symbol-file>`;
     }
 };
 __decorate([
     property()
 ], UmbInputUploadFieldFileElement.prototype, "path", void 0);
+__decorate([
+    property({ attribute: false })
+], UmbInputUploadFieldFileElement.prototype, "file", void 0);
 UmbInputUploadFieldFileElement = __decorate([
     customElement('umb-input-upload-field-file')
 ], UmbInputUploadFieldFileElement);

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

@@ -21,16 +21,18 @@ let UmbInputUploadFieldImageElement = class UmbInputUploadFieldImageElement exte
         css `
 			:host {
 				position: relative;
-				min-height: 240px;
-				max-height: 400px;
 				width: fit-content;
 				max-width: 100%;
 			}
 
 			img {
+				display: block;
 				object-fit: contain;
 				width: auto;
-				height: 100%;
+				height: auto;
+				min-height: 240px;
+				max-height: 400px;
+				max-width: 100%;
 				background-color: #fff;
 				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
 				background-repeat: repeat;

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

@@ -20,24 +20,23 @@ let UmbInputUploadFieldSvgElement = class UmbInputUploadFieldSvgElement extends
     static { this.styles = [
         css `
 			:host {
-				height: 100%;
-				min-height: 240px;
-				max-height: 400px;
-
 				width: fit-content;
-				min-width: 240px;
+				min-width: 320px;
 				max-width: 100%;
 			}
 
 			img {
+				display: block;
 				object-fit: contain;
 				width: auto;
-				height: 100%;
+				height: auto;
+				min-height: 20px;
+				max-height: 400px;
+				max-width: 100%;
 				background-color: #fff;
 				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
 				background-repeat: repeat;
 				background-size: 10px 10px;
-				max-width: 100%;
 			}
 		`,
     ]; }

package/dist-cms/packages/media/media/dropzone/media-dropzone.manager.js

@@ -2,12 +2,14 @@ import { UmbMediaDetailRepository } from '../repository/detail/index.js';
 import { UMB_MEDIA_PROPERTY_VALUE_ENTITY_TYPE } from '../entity.js';
 import { UMB_DROPZONE_MEDIA_TYPE_PICKER_MODAL } from './modals/index.js';
 import { UmbDropzoneManager, UmbFileDropzoneItemStatus, } from '../../dropzone/index.js';
+import { getFileExtension } from '../../../core/utils/index.js';
 import { UmbMediaTypeStructureRepository, } from '../../media-types/index.js';
 import { UmbArrayState } from '../../../../libs/observable-api/index.js';
 import { TemporaryFileStatus } from '../../../core/temporary-file/index.js';
 import { umbOpenModal } from '../../../core/modal/index.js';
 import { UMB_NOTIFICATION_CONTEXT } from '../../../core/notification/index.js';
 import { UmbLocalizationController } from '../../../../libs/localization-api/index.js';
+import { UmbApiError } from '../../../core/resources/index.js';
 export class UmbMediaDropzoneManager extends UmbDropzoneManager {
     // The available media types for a file extension.
     #availableMediaTypesOf = new UmbArrayState([], (x) => x.extension);
@@ -46,25 +48,29 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
     }
     async #createMediaItems(uploadableItems) {
         for (const item of uploadableItems) {
-            const options = await this.#getMediaTypeOptions(item);
+            const { options, availableMediaTypes } = await this.#getMediaTypeOptions(item);
             if (!options.length) {
-                this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED);
+                const message = this.#getDisallowedMessage(item, availableMediaTypes);
+                this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED, message);
                 continue;
             }
-            const mediaTypeUnique = options[0].unique;
+            // Prefer a specific extension match over a fallback
+            const specificMatch = options.find((x) => x.matchedFileExtension === true);
+            const { unique: mediaTypeUnique, name: mediaTypeName } = specificMatch ?? options[0];
             if (!mediaTypeUnique) {
                 throw new Error('Media type unique is not defined');
             }
-            // Handle files and folders differently: a file is uploaded as temp then created as a media item, and a folder is created as a media item directly
+            // Handle files and folders differently: a file is uploaded as temp then created as a media item, and a folder is created as a media item directly.
+            // Awaiting ensures parent folders exist on the server before their children are processed.
             if (item.temporaryFile) {
-                this.#handleFile(item, mediaTypeUnique);
+                await this.#handleFile(item, mediaTypeUnique, mediaTypeName);
             }
             else if (item.folder) {
-                this.#handleFolder(item, mediaTypeUnique);
+                await this.#handleFolder(item, mediaTypeUnique, mediaTypeName);
             }
         }
     }
-    async #handleFile(item, mediaTypeUnique) {
+    async #handleFile(item, mediaTypeUnique, mediaTypeName) {
         // Upload the file as a temporary file and update progress.
         const temporaryFile = await this._tempFileManager.uploadOne(item.temporaryFile);
         if (temporaryFile.status === TemporaryFileStatus.CANCELLED) {
@@ -77,36 +83,87 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         }
         // Create the media item.
         const scaffold = await this.#getItemScaffold(item, mediaTypeUnique);
-        const { data } = await this.#mediaDetailRepository.create(scaffold, item.parentUnique);
+        const { data, error } = await this.#mediaDetailRepository.createSilently(scaffold, item.parentUnique);
         if (data) {
             this._updateStatus(item, UmbFileDropzoneItemStatus.COMPLETE);
         }
+        else if (UmbApiError.isUmbApiError(error) && error.problemDetails?.status === 400) {
+            // Validation error — show as inline friendly message (same pattern as NOT_ALLOWED).
+            const message = this.#localization.term('media_uploadValidationFailed', mediaTypeName);
+            this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED, message);
+        }
         else {
+            // Other server error — show ERROR status and a manual toast (auto-toast was suppressed).
             this._updateStatus(item, UmbFileDropzoneItemStatus.ERROR);
+            if (error) {
+                this.#notificationContext?.peek('danger', {
+                    data: { headline: 'An error occurred', message: error.message },
+                });
+            }
         }
     }
-    async #handleFolder(item, mediaTypeUnique) {
+    async #handleFolder(item, mediaTypeUnique, mediaTypeName) {
         const scaffold = await this.#getItemScaffold(item, mediaTypeUnique);
-        const { data } = await this.#mediaDetailRepository.create(scaffold, item.parentUnique);
+        const { data, error } = await this.#mediaDetailRepository.createSilently(scaffold, item.parentUnique);
         if (data) {
             this._updateStatus(item, UmbFileDropzoneItemStatus.COMPLETE);
         }
+        else if (UmbApiError.isUmbApiError(error) && error.problemDetails?.status === 400) {
+            // Validation error — show as inline friendly message (same pattern as NOT_ALLOWED).
+            const message = this.#localization.term('media_uploadValidationFailed', mediaTypeName);
+            this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED, message);
+        }
         else {
+            // Other server error — show ERROR status and a manual toast (auto-toast was suppressed).
             this._updateStatus(item, UmbFileDropzoneItemStatus.ERROR);
+            if (error) {
+                this.#notificationContext?.peek('danger', {
+                    data: { headline: 'An error occurred', message: error.message },
+                });
+            }
+        }
+    }
+    #getDisallowedMessage(item, availableMediaTypes) {
+        const extension = item.temporaryFile ? getFileExtension(item.temporaryFile.file.name) : undefined;
+        if (!extension) {
+            return this.#localization.term('media_disallowedFileType');
+        }
+        if (availableMediaTypes.length === 0) {
+            return this.#localization.term('media_disallowedFileExtension', extension);
+        }
+        const mediaTypeNames = availableMediaTypes.map((x) => x.name).join(', ');
+        if (availableMediaTypes.length === 1) {
+            return this.#localization.term('media_disallowedMediaTypeNotAllowedHere', extension, mediaTypeNames);
         }
+        return this.#localization.term('media_disallowedMediaTypesNotAllowedHere', extension, mediaTypeNames);
     }
-    // Media types
+    // Determines which media types an item can be created as by intersecting two lists:
+    // 1. Media types allowed as children at the upload location (e.g. a folder allowing [Article, File])
+    // 2. Media types that support the file's extension (e.g. .pdf → [Article(specific), File(fallback)])
+    // The result includes match info so callers can prefer specific matches over catch-all fallbacks.
     async #getMediaTypeOptions(item) {
-        // Check the parent which children media types are allowed
+        // Check the parent which children media types are allowed.
         const parent = item.parentUnique ? await this.#mediaDetailRepository.requestByUnique(item.parentUnique) : null;
         const allowedChildren = await this.#getAllowedChildrenOf(parent?.data?.mediaType.unique ?? null, item.parentUnique);
-        const extension = item.temporaryFile?.file.name.split('.').pop() ?? null;
-        // Check which media types allow the file's extension
-        const availableMediaType = await this.#getAvailableMediaTypesOf(extension);
-        if (!availableMediaType.length)
-            return [];
-        const options = allowedChildren.filter((x) => availableMediaType.find((y) => y.unique === x.unique));
-        return options;
+        const extension = item.temporaryFile ? getFileExtension(item.temporaryFile.file.name) ?? null : null;
+        // Check which media types allow the file's extension.
+        const availableMediaTypes = await this.#getAvailableMediaTypesOf(extension);
+        if (!availableMediaTypes.length)
+            return { options: [], availableMediaTypes: [] };
+        // Intersect allowed children with available media types, carrying through whether each matched by specific
+        // extension or as a catch-all fallback.
+        // This flag is used downstream to auto-select the most appropriate type without showing a picker dialog.
+        // For example, if both "File" (which allows any extension) and "Article" (which only allows .pdf) are allowed,
+        // a .pdf file would match both but be auto-assigned to "Article" because it is a specific match, while a .docx
+        // file would be assigned to "File" because it has no specific matches.
+        const options = allowedChildren.reduce((acc, child) => {
+            const match = availableMediaTypes.find((y) => y.unique === child.unique);
+            if (match) {
+                acc.push({ ...child, matchedFileExtension: match.matchedFileExtension });
+            }
+            return acc;
+        }, []);
+        return { options, availableMediaTypes };
     }
     async #getAvailableMediaTypesOf(extension) {
         // Check if we already have information on this file extension.
@@ -162,24 +219,46 @@ export class UmbMediaDropzoneManager extends UmbDropzoneManager {
         return value?.mediaTypeUnique;
     }
     async #createOneMediaItem(item) {
-        const options = await this.#getMediaTypeOptions(item);
+        const { options, availableMediaTypes } = await this.#getMediaTypeOptions(item);
         if (!options.length) {
+            const message = this.#getDisallowedMessage(item, availableMediaTypes);
+            const itemName = item.temporaryFile?.file.name ?? item.folder?.name;
             this.#notificationContext?.peek('warning', {
                 data: {
-                    message: `${this.#localization.term('media_disallowedFileType')}: ${item.temporaryFile?.file.name}.`,
+                    message: itemName ? `${message} (${itemName}).` : `${message}.`,
                 },
             });
-            return this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED);
+            return this._updateStatus(item, UmbFileDropzoneItemStatus.NOT_ALLOWED, message);
+        }
+        let mediaTypeUnique;
+        if (options.length > 1) {
+            // When multiple options are available, prefer specific extension matches over fallbacks
+            const specificMatches = options.filter((x) => x.matchedFileExtension === true);
+            if (specificMatches.length === 1) {
+                // Exactly one specific match — auto-select it (e.g., Article for .pdf when both Article and File are allowed)
+                mediaTypeUnique = specificMatches[0].unique;
+            }
+            else if (specificMatches.length > 1) {
+                // Multiple specific matches — let the user pick from those
+                mediaTypeUnique = await this.#showDialogMediaTypePicker(specificMatches);
+            }
+            else {
+                // All fallbacks — auto-select the first one
+                mediaTypeUnique = options[0].unique;
+            }
+        }
+        else {
+            mediaTypeUnique = options[0].unique;
         }
-        const mediaTypeUnique = options.length > 1 ? await this.#showDialogMediaTypePicker(options) : options[0].unique;
         if (!mediaTypeUnique) {
             return this._updateStatus(item, UmbFileDropzoneItemStatus.CANCELLED);
         }
+        const mediaTypeName = options.find((o) => o.unique === mediaTypeUnique)?.name ?? '';
         if (item.temporaryFile) {
-            this.#handleFile(item, mediaTypeUnique);
+            await this.#handleFile(item, mediaTypeUnique, mediaTypeName);
         }
         else if (item.folder) {
-            this.#handleFolder(item, mediaTypeUnique);
+            await this.#handleFolder(item, mediaTypeUnique, mediaTypeName);
         }
     }
 }

package/dist-cms/packages/media/media/entity-actions/move-to/manifests.js

@@ -10,6 +10,7 @@ export const manifests = [
         alias: 'Umb.EntityAction.Media.MoveTo',
         name: 'Move Media Entity Action',
         forEntityTypes: [UMB_MEDIA_ENTITY_TYPE],
+        api: () => import('./media-move-to.action.js'),
         meta: {
             treeRepositoryAlias: UMB_MEDIA_TREE_REPOSITORY_ALIAS,
             moveRepositoryAlias: UMB_MOVE_MEDIA_REPOSITORY_ALIAS,

package/dist-cms/packages/media/media/entity-actions/move-to/media-move-to.action.d.ts

@@ -0,0 +1,7 @@
+import type { UmbTreeItemModel } from '../../../../core/tree/index.js';
+import { UmbMoveToEntityAction } from '../../../../core/tree/index.js';
+declare class UmbMediaMoveToEntityAction extends UmbMoveToEntityAction {
+    #private;
+    protected _getPickableFilter(unique: string): Promise<((item: UmbTreeItemModel) => boolean) | undefined>;
+}
+export { UmbMediaMoveToEntityAction as api };

package/dist-cms/packages/media/media/entity-actions/move-to/media-move-to.action.js

@@ -0,0 +1,31 @@
+import { UmbMediaItemRepository } from '../../repository/index.js';
+import { UmbMediaTypeDetailRepository, UmbMediaTypeStructureRepository } from '../../../media-types/index.js';
+import { UmbMoveToEntityAction } from '../../../../core/tree/index.js';
+class UmbMediaMoveToEntityAction extends UmbMoveToEntityAction {
+    async _getPickableFilter(unique) {
+        const itemRepository = new UmbMediaItemRepository(this);
+        const { data } = await itemRepository.requestItems([unique]);
+        const item = data?.[0];
+        if (!item)
+            throw new Error('Item is not available');
+        const mediaTypeUnique = item.mediaType.unique;
+        const structureRepository = new UmbMediaTypeStructureRepository(this);
+        const typeDetailRepository = new UmbMediaTypeDetailRepository(this);
+        const [{ data: allowedParents }, { data: mediaType }] = await Promise.all([
+            structureRepository.requestAllowedParentsOf(mediaTypeUnique),
+            typeDetailRepository.requestByUnique(mediaTypeUnique),
+        ]);
+        const isAllowedAtRoot = mediaType?.allowedAtRoot ?? false;
+        if (!allowedParents)
+            return undefined;
+        return (treeItem) => this.#isPickable(treeItem, unique, isAllowedAtRoot, allowedParents);
+    }
+    #isPickable(treeItem, unique, isAllowedAtRoot, allowedParents) {
+        if (treeItem.unique === unique)
+            return false;
+        if (treeItem.unique === null)
+            return isAllowedAtRoot;
+        return allowedParents.some((parent) => parent.unique === treeItem.mediaType?.unique);
+    }
+}
+export { UmbMediaMoveToEntityAction as api };

package/dist-cms/packages/media/media/global-contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './media-configuration.context.js';

package/dist-cms/packages/media/media/global-contexts/index.js

@@ -0,0 +1 @@
+export * from './media-configuration.context.js';

package/dist-cms/packages/media/media/global-contexts/manifests.d.ts

@@ -0,0 +1,2 @@
+import type { ManifestGlobalContext } from '../../../core/extension-registry/index.js';
+export declare const manifests: Array<ManifestGlobalContext>;

package/dist-cms/packages/media/media/global-contexts/manifests.js

@@ -0,0 +1,8 @@
+export const manifests = [
+    {
+        type: 'globalContext',
+        alias: 'Umb.GlobalContext.MediaConfiguration',
+        name: 'Media Configuration Context',
+        api: () => import('./media-configuration.context.js'),
+    },
+];

package/dist-cms/packages/media/media/global-contexts/media-configuration.context.d.ts

@@ -0,0 +1,23 @@
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbApi } from '../../../../libs/extension-api/index.js';
+import { type MediaConfigurationResponseModel } from '../../../core/backend-api/index.js';
+/**
+ * A context for fetching and caching the media configuration.
+ * @internal
+ */
+export declare class UmbMediaConfigurationContext extends UmbContextBase implements UmbApi {
+    #private;
+    constructor(host: UmbControllerHost);
+    /**
+     * Get the media configuration from the server, or return the cached configuration if it has already been fetched.
+     * @returns A promise that resolves to the media configuration, or null if the configuration could not be fetched.
+     */
+    getMediaConfiguration(): Promise<MediaConfigurationResponseModel | null>;
+}
+export default UmbMediaConfigurationContext;
+/**
+ * @internal
+ */
+export declare const UMB_MEDIA_CONFIGURATION_CONTEXT: UmbContextToken<UmbMediaConfigurationContext, UmbMediaConfigurationContext>;

package/dist-cms/packages/media/media/global-contexts/media-configuration.context.js

@@ -0,0 +1,38 @@
+import { UmbContextBase } from '../../../../libs/class-api/index.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import { MediaService } from '../../../core/backend-api/index.js';
+import { tryExecute } from '../../../core/resources/index.js';
+/**
+ * A context for fetching and caching the media configuration.
+ * @internal
+ */
+export class UmbMediaConfigurationContext extends UmbContextBase {
+    /**
+     * The cached media configuration.
+     */
+    static #mediaConfiguration;
+    constructor(host) {
+        super(host, UMB_MEDIA_CONFIGURATION_CONTEXT);
+    }
+    /**
+     * Get the media configuration from the server, or return the cached configuration if it has already been fetched.
+     * @returns A promise that resolves to the media configuration, or null if the configuration could not be fetched.
+     */
+    getMediaConfiguration() {
+        return (UmbMediaConfigurationContext.#mediaConfiguration ??= this.#fetchMediaConfiguration());
+    }
+    /**
+     * Fetch the media configuration from the server.
+     * @returns A promise that resolves to the media configuration, or null if the configuration could not be fetched.
+     */
+    async #fetchMediaConfiguration() {
+        const { data } = await tryExecute(this, MediaService.getMediaConfiguration());
+        return data ?? null;
+    }
+}
+// Export as default to work as a global context:
+export default UmbMediaConfigurationContext;
+/**
+ * @internal
+ */
+export const UMB_MEDIA_CONFIGURATION_CONTEXT = new UmbContextToken('UmbMediaConfigurationContext');

package/dist-cms/packages/media/media/index.d.ts

@@ -2,6 +2,7 @@ export * from './audit-log/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './dropzone/index.js';
+export * from './global-contexts/index.js';
 export * from './modals/index.js';
 export * from './recycle-bin/index.js';
 export * from './reference/index.js';

package/dist-cms/packages/media/media/index.js

@@ -2,6 +2,7 @@ export * from './audit-log/index.js';
 export * from './components/index.js';
 export * from './constants.js';
 export * from './dropzone/index.js';
+export * from './global-contexts/index.js';
 export * from './modals/index.js';
 export * from './recycle-bin/index.js';
 export * from './reference/index.js';

package/dist-cms/packages/media/media/manifests.js

@@ -3,6 +3,7 @@ import { manifests as collectionManifests } from './collection/manifests.js';
 import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
 import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js';
 import { manifests as fileUploadPreviewManifests } from './components/input-upload-field/manifests.js';
+import { manifests as globalContextManifests } from './global-contexts/manifests.js';
 import { manifests as itemManifests } from './item/manifests.js';
 import { manifests as menuManifests } from './menu/manifests.js';
 import { manifests as modalManifests } from './modals/manifests.js';
@@ -22,6 +23,7 @@ export const manifests = [
     ...entityActionsManifests,
     ...entityBulkActionsManifests,
     ...fileUploadPreviewManifests,
+    ...globalContextManifests,
     ...itemManifests,
     ...menuManifests,
     ...modalManifests,

package/dist-cms/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.d.ts

@@ -9,6 +9,8 @@ export declare class UmbMediaPickerFolderPathElement extends UmbLitElement {
     private _currentMedia;
     private _paths;
     private _typingNewFolder;
+    private _allowedFolderTypes;
+    private _selectingFolderType;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];