Ui form: Edit functionality: Image Preview in magento 2
-
16-12-2020 - |
Pergunta
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>
Solução
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.
Outras dicas
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>