1

I have created a custom module, that will import images from external source and save the image in custom table as imageUrl.

I can show the image thumbnail in the grid(Ui Component). I want to show the image(preview) in edit form( Ui Component). This is not an image uploader.

I tried this way(form.xml file). But no result.

<field name="image">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="source" xsi:type="string">Label </item>
                    <item name="label" xsi:type="string" translate="true">Main Image</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">image</item>
                    <item name="elementTmpl" xsi:type="string">Ayakil\PostFeed\Ui\Component\Listing\PostFeed\Thumbnail</item>
                    <item name="previewTmpl" xsi:type="string">Ayakil_PostFeed/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">4</item>
                </item>
            </argument>
    </field>

Can someone please help me on this task?

2 Answers 2

1

I achieved this task with following steps.

Updated the DataProvider.php file with below content( I did not updated all the DataProvider.php file ).

....
if (!empty($data)) {
        $model = $this->collection->getNewEmptyItem();
        $image = $data["image"];
        $data["image"] = [];
        $data["image"]["name"] = $image;
        $data["image"]["url"] = $image;

        $model->setData($data);
        $this->loadedData[$model->getId()] = $model->getData();
        $this->dataPersistor->clear('ayakil_postfeed_postfeed');
    }
..

Form element using ui component( form.xml file content)

<field name="image" formElement="input" sortOrder="20">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">PostFeed</item>
            </item>
        </argument>
        <settings>
            <dataType>text</dataType>
            <elementTmpl>Ayakil_PostFeed/image-preview</elementTmpl>
            <label translate="true">Media Type</label>
            <dataScope>image</dataScope>
        </settings>
</field>

Next created the template file in following location(app/code/Ayakil/PostFeed/view/adminhtml/web/template/image-preview.html) with the following content.

<div class="file-uploader-summary">
   <div class="file-uploader-preview">
     <a attr="href:  value()" target="_blank">
        <img
            class="preview-image"
            tabindex="0"
            attr="src:  value().url,">
     </a>
   </div>
 </div>

Note , that from the DataProvider i am setting the image url value. So i retrieve the url in template like value().url

Result

enter image description here I Hope that this will help someone in future.

0

Create a UI component XML file in your module at Vendor/Module/view/adminhtml/ui_component/ui_form.xml with the following code:

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="my_fieldset">
        <field name="myimage_field" formElement="html">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="content" xsi:type="string"><![CDATA[<div><img src="{{media url='my_image.png'}}" /></div>]]></item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Create a template file Vendor/Module/view/adminhtml/templates/mytemplate.phtml

<div>
    <?php echo $block->getImageHtml(); ?>
</div>

Create a block class at Vendor/Module/Block/Html/Image.php

<?php

namespace Vendor\Module\Block\Html;

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;

class Image extends Template
{
    public function __construct(
        Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    public function getImageHtml()
    {
        $imagePath = 'Vendor_Module::images/my_image.png';
        $imageUrl = $this->getViewFileUrl($imagePath);
        $imageHtml = '<img src="' . $imageUrl . '" />';
        return $imageHtml;
    }
}

You can load the layout in your controller, render the layout by setting your custom template as the myimage_field block's template.

$this->_view->loadLayout();
$this->_view->getLayout()->getBlock('myimage_field')->setTemplate('Vendor_Module::mytemplate.phtml');
1
  • Great thanks for your answer and help, But i used another method to achieve this, I will post it also as an answer
    – Mujahidh
    Apr 11, 2023 at 10:09

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.