Multiple picker contexts

bjarnef · December 29, 2025, 12:54pm

I am looking into using static file picker as alternative to a selected media for my image hotspots package: Umbraco Community Hotspots | Umbraco Marketplace

I can re-use umb-input-static-file component, but I want it to align with media picker and also show preview of selected file instead or just entity/file name.

I looked at core and found picker contexts used in core for both static file picker and media picker:

github.com/umbraco/Umbraco-CMS

src/Umbraco.Web.UI.Client/src/packages/static-file/components/input-static-file/input-static-file.element.ts

cbde6af9c


      
          
          	@property()
          	public pickableFilter?: (item: UmbStaticFileItemModel) => boolean;
          
          	@state()
          	private _items?: Array<UmbStaticFileItemModel>;
          
          	@state()
          	private _statuses?: Array<UmbRepositoryItemsStatus>;
          
          	#pickerContext = new UmbStaticFilePickerInputContext(this);
          
          	constructor() {
          		super();
          
          		this.addValidator(
          			'rangeUnderflow',
          			() => this.minMessage,
          			() => !!this.min && this.#pickerContext.getSelection().length < this.min,
          		);

It works when I only use one of them, but if I have both within same component, only the last one works:

#pickerFileInputContext = new UmbStaticFilePickerInputContext(this);
#pickerInputContext = new UmbMediaPickerInputContext(this);

I guess it is intended only one can be use within the a component? In this case I can probably open the modals and custom UMB_MODAL_MANAGER_CONTEXT instead:

github.com/umbraco/Umbraco-CMS

src/Umbraco.Web.UI.Client/src/packages/static-file/modals/static-file-picker-modal.token.ts

cbde6af9c

import { UMB_STATIC_FILE_TREE_ALIAS } from '../tree/constants.js';
import type { UmbStaticFileItemModel } from '../repository/item/types.js';
import {
	type UmbTreePickerModalValue,
	type UmbTreePickerModalData,
	UMB_TREE_PICKER_MODAL_ALIAS,
} from '@umbraco-cms/backoffice/tree';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';

export type UmbStaticFilePickerModalData = UmbTreePickerModalData<UmbStaticFileItemModel>;
export type UmbStaticFilePickerModalValue = UmbTreePickerModalValue;

export const UMB_STATIC_FILE_PICKER_MODAL = new UmbModalToken<
	UmbStaticFilePickerModalData,
	UmbStaticFilePickerModalValue
>(UMB_TREE_PICKER_MODAL_ALIAS, {
	modal: {
		type: 'sidebar',
		size: 'small',
	},

This file has been truncated. show original