How to program the media browser

The Magento 2 media browser is a jQuery UI widget which allows an administrator to use a media library: upload images to media library and choose an image from media library to insrt it in some field (to CMS page content, for exampe):

The widget is named $.mage.mediabrowser.
There is also a global utility object MediabrowserUtility which is used to open media browser (openDialog method) and close media browser (closeDialog method).

Both the $.mage.mediabrowser and MediabrowserUtility are defined in the lib/web/mage/adminhtml/browser.js AMD module which can be loaded by mage/adminhtml/browser name.

Here is an example code to open the media browser:

], function($) {return function(config) {
		/** @type Object */
		var cc = config['coreConfig'];
		/** @type String */
		var url = cc['files_browser_window_url'] + 'target_element_id/' + + '/';
		/** @type ?Number */
		var storeId = cc['store_id'];
		if (storeId) {
			url += 'store/' + storeId;

MediabrowserUtility.openDialog method need an url parameter.
In tihs example the url is constructed from the JavaScript Component configuration.

You can prepare it by calling the \Magento\Cms\Model\Wysiwyg\Config::getConfig() method.

target_element_id url parameter is DOM identifier of a HTML Element element which will gain the values chosen by administrator in the media browser.