Ui form: Edit functionality: Image Preview in magento 2

Question

I have created Ui form. In that, I have uploaded a image which is also saved in DB and shows preview in admingrid. It shows image preview for a new action But it is failed to show image preview and size in edit functionality . Please suggest me a solution

The below image for newaction and it works perfectly.

The below image for edit and not working.But if i click on image it shows preview in new page(http://localhost/magento220/pub/media/girl_2.jpg). DataProvider.php

<?php

namespace namespace\HomeSlider\Model;

use namespace\HomeSlider\Model\ResourceModel\Post\CollectionFactory;
use Magento\Store\Model\StoreManagerInterface;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{

    protected $collection;
    protected $_loadedData;
    protected $_storeManager;

    public function __construct(
    $name, $primaryFieldName, $requestFieldName, CollectionFactory $postCollectionFactory, StoreManagerInterface $storeManager, array $meta = [], array $data = []
    )
    {
        $this->collection = $postCollectionFactory->create();
        $this->_storeManager = $storeManager;
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    public function getData()
    {

        if (isset($this->_loadedData)) {
            return $this->_loadedData;
        }
        $items = $this->collection->getItems();
        foreach ($items as $item) {
            $this->_loadedData[$item->getId()] = $item->getData();

            if ($item->getImage()) {

            $m['image'][0]['name'] = $item->getImage();
            $m['image'][0]['url'] = $this->getMediaUrl().$item->getImage();

            $fullData = $this->_loadedData;
            $this->_loadedData[$item->getId()] = array_merge($fullData[$item->getId()], $m);
            }



        }

        return $this->_loadedData;
    }

    public function getMediaUrl()
    {
        $mediaUrl = $this->_storeManager->getStore()
                        ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

        return $mediaUrl;
    }

}

Uiform.xml

 <field name="image" sortOrder="100" formElement="fileUploader">
            <settings>
                <notice translate="true">Allowed file types: jpeg, gif, png.</notice>
                <label translate="true">Image</label>
                <componentType>fileUploader</componentType>
            </settings>
            <formElements>
                <fileUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>2097152</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">homeslider/post/upload</param>
                        </uploaderConfig>

                    </settings>
                </fileUploader>
            </formElements>
        </field>

Answer 1

to be able to preview your image you need to add this key/value 'type' => 'image' in your sending data. Otherwise Magento will consider the file as document.

Hope it helps.

Answer 2

Please try this one in your dataprovider, this is working code.

<?php

namespace OX\HomeSlider\Model;

use Vendor\Module\Model\ResourceModel\Post\CollectionFactory;
use Magento\Framework\App\Request\DataPersistorInterface;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{

protected $collection;     
protected $dataPersistor;
public    $_storeManager;    
protected $loadedData;

public function __construct(
    $name,
    $primaryFieldName,
    $requestFieldName,
    CollectionFactory $blockCollectionFactory,
    DataPersistorInterface $dataPersistor,
    \Magento\Store\Model\StoreManagerInterface $storeManager,        
    array $meta = [],
    array $data = []
) {
    $this->collection = $blockCollectionFactory->create();
    $this->_storeManager=$storeManager;       
    $this->dataPersistor = $dataPersistor;
    parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}

public function getData()
{
    $baseurl =  $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
    if (isset($this->loadedData)) {

        return $this->loadedData;
    } 

    $items = $this->collection->getItems();

    if($items){
    foreach ($items as $page) {


        $temp = $page->getData();
        $img = [];
        $img[0]['name'] = $temp['image'];
        $img[0]['url'] = $baseurl.$temp['image'];
        $temp['image'] = $img;


    }

    $data = $this->dataPersistor->get('your_tablename');
    if (!empty($data)) {
        $page = $this->collection->getNewEmptyItem();
        $page->setData($data);
        $this->loadedData[$page->getId()] = $page->getData();

        $this->dataPersistor->clear('your_tablename');
    }else {
        if ($page->getData('image') != null) {

            $t2[$page->getId()] = $temp;     

            return $t2;
        } else {                

            // echo '<pre>';
 //print_r($this->loadedData);exit;
           return $this->loadedData;

        }
      } 
    }      
}
}

Please let me know if need further clarification

Your form field:

<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">homeslider</item>
        <item name="label" xsi:type="string" translate="true">Image</item>
        <item name="visible" xsi:type="boolean">true</item>
        <item name="formElement" xsi:type="string">fileUploader</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
        <item name="previewTmpl" xsi:type="string">OX_HomeSlider/image-preview</item>
        <item name="required" xsi:type="boolean">false</item>
        <item name="uploaderConfig" xsi:type="array">
            <item name="url" xsi:type="url" path="homeslider/post_upload"/>
        </item>
    </item>
</argument>

In web/template create this file image-preview.html

<div class="file-uploader-summary">
<div class="file-uploader-preview">
    <a attr="href: $parent.getFilePreview($file)" target="_blank">
        <img
            class="preview-image"
            tabindex="0"
            event="load: $parent.onPreviewLoad.bind($parent)"
            attr="
                src: $parent.getFilePreview($file),
                alt: $file.name">
    </a>

    <div class="actions">
        <button
            type="button"
            class="action-remove"
            data-role="delete-button"
            attr="title: $t('Delete image')"
            click="$parent.removeFile.bind($parent, $file)">
            <span translate="'Delete image'"/>
        </button>
    </div>
</div>

<div class="file-uploader-filename" text="$file.name"/>
<div class="file-uploader-meta">
    <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>
</div>