Magento – Magento2 ui_component – form – image file input field

magento2uicomponent

I'm currently trying to dig deeper into the UI Components but I'am kinda stuck here.

Since it would be a little much to post all code here, I'll just post some relevant github links.

What works is uploading an image and save the file name to the database.

What does not work is loading the file in the file input on the edit form page again.

The image input is defined here: https://github.com/davidverholen/magento2-teaser/blob/develop/view/adminhtml/ui_component/teaser_item_form.xml#L83

The class is currently empty, I tried many things today but nothing seemed too promising and I'm not even sure if i need it: https://github.com/davidverholen/magento2-teaser/blob/develop/Ui/Component/Form/Element/TeaserItemImage.php

The DataSource for the form is here: https://github.com/davidverholen/magento2-teaser/blob/develop/Model/TeaserItem/DataProvider.php

(also tried to load the image_url here and use this as the field index)

there is also a doc for this and I may be too js stupid to understand how to do this:
http://devdocs.magento.com/guides/v2.0/ui-components/ui-form.html

Any Ideas or anyone who has already done this?

Thx in advance!

Update:

I found this in the media component (which is used for images):
vendor/magento/module-ui/view/base/web/js/form/element/media.js

return Abstract.extend({
        defaults: {
            links: {
                value: ''
            }
        },

I'm new to the whole knockout.js thing, but this seems like the value binding is removed. So there must be another way to set the value?

I also tried to set the binding again in the configuration but without success. Tried this (added the image_path_abs to the datasource which contains the absolute file path):

<field name="image_path" class="DavidVerholen\Teaser\Ui\Component\Form\Element\TeaserItemImage">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="links" xsi:type="array">
                <item name="value" xsi:type="string">teaser_item_form.teaser_item_form_data_source.general.image_path_abs</item>
            </item>
            <item name="label" xsi:type="string">Image</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">image</item>
            <item name="source" xsi:type="string">general</item>
        </item>
    </argument>
</field>