diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-create-item.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-create-item.element.ts index 277cb16d12..6a0bd00f01 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-create-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-create-item.element.ts @@ -1,3 +1,4 @@ +import { UmbMediaDetailRepository } from '../../../repository/detail/media-detail.repository.js'; import { css, html, customElement, state, repeat, property } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { type UmbAllowedMediaTypeModel, UmbMediaTypeStructureRepository } from '@umbraco-cms/backoffice/media-type'; @@ -5,16 +6,18 @@ import { type UmbAllowedMediaTypeModel, UmbMediaTypeStructureRepository } from ' @customElement('umb-media-picker-create-item') export class UmbMediaPickerCreateItemElement extends UmbLitElement { #mediaTypeStructure = new UmbMediaTypeStructureRepository(this); // used to get allowed media items + #mediaDetailRepository = new UmbMediaDetailRepository(this); // used to get media type of node + + private _node: string | null = null; - private _mediaTypeUnique: string | null = null; @property() - public set mediaTypeUnique(value: string | null) { - this._mediaTypeUnique = value; + public set node(value: string | null) { + this._node = value; this.#getAllowedMediaTypes(); } - public get mediaTypeUnique() { - return this._mediaTypeUnique; + public get node() { + return this._node; } @state() @@ -23,8 +26,17 @@ export class UmbMediaPickerCreateItemElement extends UmbLitElement { @state() private _allowedMediaTypes: Array = []; + async #getNodeMediaType() { + if (!this._node) return null; + + const { data } = await this.#mediaDetailRepository.requestByUnique(this.node!); + return data?.mediaType.unique ?? null; + } + async #getAllowedMediaTypes() { - const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(this._mediaTypeUnique); + const mediaType = await this.#getNodeMediaType(); + + const { data: allowedMediaTypes } = await this.#mediaTypeStructure.requestAllowedChildrenOf(mediaType); this._allowedMediaTypes = allowedMediaTypes?.items ?? []; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts index 21cd55d97b..2307f150d6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/media-picker-modal.element.ts @@ -12,7 +12,7 @@ import { mime } from '@umbraco-cms/backoffice/external/mime'; export class UmbMediaPickerModalElement extends UmbModalBaseElement { #mediaTreeRepository = new UmbMediaTreeRepository(this); // used to get file structure #mediaUrlRepository = new UmbMediaUrlRepository(this); // used to get urls - #mediaItemRepository = new UmbMediaItemRepository(this); // used to search + #mediaItemRepository = new UmbMediaItemRepository(this); // used to search & get media type of current path #mediaItemsCurrentFolder: Array = []; @@ -26,7 +26,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement this.#loadMediaFolder()} .parentUnique=${this._currentPath}> + this.#loadMediaFolder()} .parentUnique=${this._currentNode}> ${ !this._mediaFilteredList.length ? html`

${this.localize.term('content_listViewNoItems')}

` @@ -151,7 +151,7 @@ export class UmbMediaPickerModalElement extends UmbModalBaseElement - +