Image Chooser for Magento2 widgets

ImageChooser.php

<?php
namespace Vendor\Module\Block\Adminhtml\Widget;

class ImageChooser extends \Magento\Backend\Block\Template
{
    /**
     * @var \Magento\Framework\Data\Form\Element\Factory
     */
    protected $_elementFactory;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory
     * @param array $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\Form\Element\Factory $elementFactory,
        array $data = []
    ) {
        $this->_elementFactory = $elementFactory;
        parent::__construct($context, $data);
    }

    /**
     * Prepare chooser element HTML
     *
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element Form Element
     * @return \Magento\Framework\Data\Form\Element\AbstractElement
     */
    public function prepareElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $config = $this->_getData('config');
        $sourceUrl = $this->getUrl('cms/wysiwyg_images/index',
            ['target_element_id' => $element->getId(), 'type' => 'file']);
        $chooser = $this->getLayout()->createBlock('Magento\Backend\Block\Widget\Button')
            ->setType('button')
            ->setClass('btn-chooser')
            ->setLabel($config['button']['open'])
            ->setOnClick('MediabrowserUtility.openDialog(\''. $sourceUrl .'\')')
            ->setDisabled($element->getReadonly());

        $input = $this->_elementFactory->create("text", ['data' => $element->getData()]);
        $input->setId($element->getId());
        $input->setForm($element->getForm());
        $input->setClass("widget-option input-text admin__control-text");
        if ($element->getRequired()) {
            $input->addClass('required-entry');
        }

        $element->setData('after_element_html', $input->getElementHtml() . $chooser->toHtml());
        return $element;
    }
}

widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget id="my_new_custom_widget" class="Magento\Framework\View\Element\Template">
        <label translate="true">My new custom widget</label>
        <description translate="true">My new custom widget description</description>
        <parameters>
            <parameter name="image" xsi:type="block" required="true" visible="true" sort_order="10">
                <label translate="true">Background image</label>
                <block class="Vendor\Module\Block\Adminhtml\Widget\ImageChooser">
                    <data>
                        <item name="button" xsi:type="array">
                            <item name="open" xsi:type="string">Choose Image...</item>
                        </item>
                    </data>
                </block>
            </parameter>
        </parameters>
    </widget>
</widgets>

Couple of issues, with fixes!

ReferenceError: MediabrowserUtility is not defined

This is caused because the mediabrowser's javascript is not loaded. So create a file named Vendor/Package/etc/adminhtml/layout/adminhtml_widget_instance_edit.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <update handle="editor"/>
</page>

The file returned in the wysiwyg editor breaks, showing "}}

This is because the editor double escapes the string, the answer is at https://gist.github.com/cedricblondeau/6174911fb4bba6cb4943#gistcomment-2056776 ,but for completition:

Create Vendor\Package\Model\Widget.php:

<?php

namespace Vendor\Package\Model;

class Widget
{
    protected $backendData;

    public function __construct(
        \Magento\Backend\Helper\Data $backendData
    )
    {
        $this->backendData = $backendData;
    }

    public function beforeGetWidgetDeclaration(
        \Magento\Widget\Model\Widget $subject,
        $type,
        $params = [],
        $asIs = true
    )
    {
        foreach ($params as $name => $value) {
            if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) {
                $directive = base64_decode(strtr($matches[2], '-_,', '+/='));
                $params[$name] = str_replace(['{{media url="', '"}}'], ['', ''], $directive);
            }
        }
        return [$type, $params, $asIs];
    }
}

and load this plugin be creating Vendor/Package/etc/di.xml with

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Widget\Model\Widget">
        <plugin name="my_plugins_name" type="Vendor\Package\Model\Widget" sortOrder="1" disabled="false"/>
    </type>
</config>

works, huge thanks to kevinruscoe!

Hi,
I'm just here to report that it works fine in our project with magento 2.3.3, using just the original files posted here.
You are true heroes!
Its such a shame that the original magento components are so buggy.. but don't let me start ranting about magento2 XD

Hi,
thank you guys for all your hints. I just tried the solution on Magento 2.4.2 and it works. I slightly modified the code, I removed the constructor because it says that the class \Magento\Backend\Helper\Data is deprecated. So here's my version

<?php

declare(strict_types=1);

namespace VENDOR\PACKAGE\Model;

use Magento\Widget\Model\Widget as MagentoWidget;

class Widget
{
    public function beforeGetWidgetDeclaration(
        MagentoWidget $subject,
        $type,
        $params = [],
        $asIs = true
    ): array
    {
        foreach ($params as $name => $value) {
            if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) {
                $directive = base64_decode(strtr($matches[2], '-_,', '+/='));
                $params[$name] = str_replace(['{{media url="', '"}}'], ['', ''], $directive);
            }
        }

        return [$type, $params, $asIs];
    }
}

Hi Guys,
I was looking for a solution for ___directive issue and finally found the following simple way to fix the issue for Magento 2.3.5 and newer.
In the ImageChooser class, it is necessary to add the following line to the text input element definition:

$input->addCustomAttribute('data-force_static_path', 1);

That will force the Media Browser to generate static links related to the website root (starting from /media).