8

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>
Improve this question

1 Answer 1

Reset to default
5

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

Improve this answer
5
  • 1
    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?
    – Nero
    Commented Oct 11, 2016 at 1:56
  • Mine works by default, is the field code the same as the attribute code?
    – LM_Fielding
    Commented Oct 11, 2016 at 9:38
  • 1
    @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.
    – Nero
    Commented Oct 11, 2016 at 13:59
  • Do you have a question or your ui xml code anywhere? Show your Setup/InstallData and xml for the form?
    – LM_Fielding
    Commented Oct 11, 2016 at 14:47
  • @LM_Fielding, here is my question magento.stackexchange.com/questions/140318/…. Please take a look there. thanks
    – Nero
    Commented Oct 11, 2016 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.