2

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>
0

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.

6

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>

  • What i need to put instead of XXXX (\Vendor\Module\Model\XXXX $selectCat,) – Jaisa Nov 16 '17 at 8:55
  • Check the updated answer – Verdu Nov 16 '17 at 9:11
  • No. The issue is not solved.Still preview is not working – Jaisa Nov 16 '17 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 Nov 16 '17 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 Nov 16 '17 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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