Magento 2 – UI Form Edit Functionality: Image Preview

image-previewmagento2.2PHPui-form

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.
enter image description here

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).
enter image description here
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>

Best Answer

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.

Related Topic