How to open media picker from custom property editor (v15.1)
r
rstei
01/16/2025, 9:12 AMAs part of custom property editor, I would like to integrate Umbraco's media picker - to be able to select media items. Is there a context or similar I can use to access this picker?
rstei
01/16/2025, 11:29 AMFYI I found a solution to open the media picker 🤩 , here is the relevant code if anyone else needs it:
import { UmbModalManagerContext, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
import { UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/media';
if (!this.modalManager) {
console.error('Modal Manager not available');
return;
}
const modalHandler = this.modalManager.open(
this,
UMB_MEDIA_PICKER_MODAL,
{
data: {
multiple: true,
// Bruk 'data' for å spesifisere flere valg
},
value: {
selection: [],
},
}
);
const result = await modalHandler?.onSubmit().catch(() => null);
-------------------------
But another question though is:
when the result comes back, it is an array of id's. Is it possible to find the url for the image from that ID without going through a Umbraco C# ? Like directly from the typescript file?
In this existing example (https://github.com/umbraco/Umbraco-CMS/blob/53060e1ec5a1df798681b67eb1d31e7841a49051/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/image-cropper-editor/image-cropper-editor-modal.element.ts#L103) from UmbracoCMS they use this import: import { UmbMediaUrlRepository } from '../../repository/index.js'; <- but I cannot figure out right now how to import it in my custom property editor, is that even possible?
u
1amShaw
03/05/2025, 4:00 PMHello.
I am wondering if you got any further with this at all?
I noticed that for me "UmbMediaUrlRepository" can be imported from "@umbraco-cms/backoffice/media"
I.e
Copy code
import { UMB_MEDIA_PICKER_MODAL, UmbMediaUrlRepository } from '@umbraco-cms/backoffice/media'; Copy code
#urlRepository = new UmbMediaUrlRepository(this); Copy code
modalHandler.onSubmit().then(async (response) => {
if(!response) return;
let { data } = await this.#urlRepository.requestItems(response.selection)
console.log(data);
});130 Views
Umbraco
A hub and casual space for you to interact with fellow community members and learn more about Umbraco!
Powered by