Magento 2 Image upload on CMS page

Question

<field name="page_image"> 
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataType" xsi:type="string">image</item>
 <item name="source" xsi:type="string">page</item>
 <item name="label" xsi:type="string" translate="true">Banner Image</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">image</item> 
 <item name="required" xsi:type="boolean">true</item> 
 </item>
 </argument>
</field> 

Image uploaded successfully & saved in database also. But I can not preview the image in the edit screen. How to preview the image with delete checkbox?

Answer 1

I had the same problem, the fileuploader uses a specific array to preview the image and you have to create it manually.

You have to extend the source defined in:

<item name="source" xsi:type="string">page</item>

And extend the DataProvider in di.xml:

<preference for="Magento\Cms\Model\Page\DataProvider" type="Dexanet\Cms\Model\Page\DataProvider"/>

You have to extend the getData() method like:

public function getData() {
 $data = parent::getData();
 foreach ($data as $pageId => $page) {
 if (isset($page['header_image'])) {
 unset($data[$pageId]['header_image']);
 $fileName = $page['header_image'];
 $serverPath = $this->fileSystem->getDirectoryRead(DirectoryList::MEDIA)
 ->getAbsolutePath() . $this->imageUploader->getBasePath() . "/" . $fileName;
 $fullPath = $this->storeManager->getStore()->getBaseUrl(
 \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
 ) . $this->imageUploader->getBasePath() . "/" . $fileName;
 if (file_exists($serverPath)) {
 $stat = stat($serverPath);
 $mime = mime_content_type($serverPath);
 $data[$pageId]["header_image"][0]['name'] = $fileName;
 $data[$pageId]["header_image"][0]['url'] = $fullPath;
 $data[$pageId]['header_image'][0]['size'] = isset($stat) ? $stat['size'] : 0;
 $data[$pageId]['header_image'][0]['type'] = $mime;
 }
 }
 }
 return $data;
}