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


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()

        return $mediaUrl;



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


2 Answers 2


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.

  • can you please provide the full file? Commented Oct 1, 2022 at 14:40

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


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(
    CollectionFactory $blockCollectionFactory,
    DataPersistorInterface $dataPersistor,
    \Magento\Store\Model\StoreManagerInterface $storeManager,        
    array $meta = [],
    array $data = []
) {
    $this->collection = $blockCollectionFactory->create();
    $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();

    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();
        $this->loadedData[$page->getId()] = $page->getData();

    }else {
        if ($page->getData('image') != null) {

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

            return $t2;
        } else {                

            // echo '<pre>';
           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"/>

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">
            event="load: $parent.onPreviewLoad.bind($parent)"
                src: $parent.getFilePreview($file),
                alt: $file.name">

    <div class="actions">
            attr="title: $t('Delete image')"
            click="$parent.removeFile.bind($parent, $file)">
            <span translate="'Delete image'"/>

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

  • What i need to put instead of XXXX (\Vendor\Module\Model\XXXX $selectCat,)
    – Jaisa
    Commented Nov 16, 2017 at 8:55
  • Check the updated answer
    – Verdu
    Commented Nov 16, 2017 at 9:11
  • No. The issue is not solved.Still preview is not working
    – Jaisa
    Commented Nov 16, 2017 at 9:28
  • I am using magento 2.2 version. So it is failed to accept the above format of form what you have mentioned
    – Jaisa
    Commented Nov 16, 2017 at 9:41
  • 1
    Thank you for your response.I have solved the issue using image-preview.html. But in my Uiform, I don't change anything what I posted above. Only added the visibility
    – Jaisa
    Commented Nov 16, 2017 at 10:26

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.