Magento2 ui_component - form - image file input field

Question

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>

Answer 1

In Magento 2.1, this has actually become a lot easier.

A good Example for the implementation is the category form: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml#L148

Then you also need a Controller for the Image Upload: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Controller/Adminhtml/Category/Image/Upload.php

And last but not least some logic in the save controller, which hopefully will get refactored soon:

https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Controller/Adminhtml/Category/Save.php#L259 https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Controller/Adminhtml/Category/Save.php#L82

• Nero: hi David, I'm kind of in same situation you described in question. I got the uploading function working and images name saved in database. To be clear, this is done in the "Add new Item" form. But when I view any of those existing item, the Image element doesn't show. I also referred to the catalog module when I developed mine. I didn't dig deep yet. But in order to get image show, do I need to change the form dataSource / Collection to include the image basePath?
• LM_Fielding: Mine works by default, is the field code the same as the attribute code?
• Nero: @LM_Fielding, sorry I don't get your meaning. The field name is image which is the same as the column name in database. If I treat the image as an ordinary input text field, it can show as expected. The image field is just simple a column from a table, not EAV.
• LM_Fielding: Do you have a question or your ui xml code anywhere? Show your Setup/InstallData and xml for the form?
• Nero: @LM_Fielding, here is my question magento.stackexchange.com/questions/140318/…. Please take a look there. thanks