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

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?


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'])) {
      $fileName = $page['header_image'];

      $serverPath = $this->fileSystem->getDirectoryRead(DirectoryList::MEDIA)
          ->getAbsolutePath() . $this->imageUploader->getBasePath() . "/" . $fileName;
      $fullPath = $this->storeManager->getStore()->getBaseUrl(
        ) . $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;

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.