Magento2 image file in ui component form

Question

I have ui component layout for an image field

     <field name="image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Showcase Image</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="componentType" xsi:type="string">fileUploader</item>
                <item name="notice" xsi:type="string" translate="true">Allowed file types: ico, png, gif, jpg, jpeg, apng, svg. Not all browsers support all these formats!</item>
                <item name="maxFileSize" xsi:type="number">2097152</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png svg</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="string">newstart_showcase_backend/showcase_image/upload</item>
                </item>
            </item>
        </argument>
    </field>

I have an save.php to save image name to database and another controller newstart_showcase_backend/showcase_image/upload to actually save the uploaded image to media folder. All these functions are working fine so far in "add new item" edit page. The real problem I have is image does not show when I open the existing item that I created. All other files are showing as expected, but not the image field. Any suggestion are appreciated. I can post more code here on demand if you need to check it. Thanks in advance.

Following is my main table A, and reference table B which stores store ID for each item in table A by referring the id

id  smallint(5) unsigned Auto Increment Entity ID
image   varchar(255)    Image Name
url varchar(255) [] Image Destination Url
caption varchar(255) NULL   Image Caption
start_date  date NULL    
end_date    date NULL    
order   smallint(6) [1] Image Ordering
status  tinyint(1) [1]  1 - Banner Enabled, 0 - Banner Disabled
created_at  timestamp [CURRENT_TIMESTAMP]   Created time
updated_at  timestamp [0000-00-00 00:00:00] Update time 

At "add new item" page, there is uploader

Edit Page doesn't show image, and HOW CAN I MAKE IT SHOW HERE

Answer 1

Your DataProvider class's getData() method should include the image name & the image URL as an array like shown below:

foreach ($items as $item) {
            $itemData = $item->getData();
            $imageName = $itemData['image_name']; // Your database field 
            unset($itemData['image_path']);
            $itemData['image_path'] = array(
                array(
                    'name'  =>  $imageName,
                    'url'   =>  $imageUrl // Should return a URL to view the image. For example, http://domain.com/pub/media/../../imagename.jpeg
                )
            );
            $this->loadedData[$item->getItemId()] = $itemData;
        }

Answer 2

You should have one file in location:- namespace\modulename\Ui\Component\Listing\Column['file_to_show_image'];
In my case its name is Thumbnail.php.
grid_item_form.xml is responsible to show the image at edit time:-

 <column name="profile" class="Dedicated\Employee\Ui\Component\Listing\Column\Thumbnail">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
                <item name="sortable" xsi:type="boolean">false</item>
                <item name="altField" xsi:type="string">title</item>
                <item name="has_preview" xsi:type="string">1</item>
                <item name="label" xsi:type="string" translate="true">Thumbnail</item>
            </item>
        </argument>
    </column>  

My file name is Thumbnail.php and the code is :-
Image will be fetch form here.

<?php
namespace Dedicated\Employee\Ui\Component\Listing\Column;

use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class Thumbnail extends Column
{
const ALT_FIELD = 'title';

/**
 * @var \Magento\Store\Model\StoreManagerInterface
 */
protected $storeManager;

/**
 * @param ContextInterface $context
 * @param UiComponentFactory $uiComponentFactory
 * @param Image $imageHelper
 * @param UrlInterface $urlBuilder
 * @param StoreManagerInterface $storeManager
 * @param array $components
 * @param array $data
 */
public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    UrlInterface $urlBuilder,
    StoreManagerInterface $storeManager,
    array $components = [],
    array $data = []
) {

    //die('d');
    $this->storeManager = $storeManager;
    $this->urlBuilder = $urlBuilder;
    parent::__construct($context, $uiComponentFactory, $components, $data);
}

/**
 * Prepare Data Source
 *
 * @param array $dataSource
 * @return array
 */
public function prepareDataSource(array $dataSource)
{

    if(isset($dataSource['data']['items'])) {
        $fieldName = $this->getData('name');
        //print_r($fieldName); die();
        foreach($dataSource['data']['items'] as & $item) {
            $url = '';
            if($item[$fieldName] != '') {
                $url = $this->storeManager->getStore()->getBaseUrl(
                    \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
                ).'dedicated/employees/'.$item[$fieldName];
            }
            $item[$fieldName . '_src'] = $url;
            $item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
            $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                'employee/entity_id/edit',
                ['entity_id' => $item['entity_id']]
            );
            $item[$fieldName . '_orig_src'] = $url;
        }
    }

    return $dataSource;
}

/**
 * @param array $row
 *
 * @return null|string
 */
protected function getAlt($row)
{
    $altField = $this->getData('config/altField') ?: self::ALT_FIELD;
    return isset($row[$altField]) ? $row[$altField] : null;
}

}

If you are facing any problem then let me know.

We list the image in two cashes :-

1.In listing page.
2.Edit or Update Page

Where do you want to show the image or fetch the image ? or show me some screenshot so I could solve it better.

Answer 3

You not setData for image in your DataProvider that why image not show up
DataProvider defined in your ui-component/yourform.xml

Usually it located in \Namespace\Module\Model\Entity\DataProvider

/**
 * DataProvider for your form
 */
class DataProvider extends AbstractDataProvider
{
/** @var array **/
protected $loadedData;

/**
 * Get data from provider and populate
 * @param void
 * @return array
 */
public function getData()
{

    if (isset($this->loadedData)) {
        return $this->loadedData;
    }


    if ($menuId) {
        $items = $this->collection->getItems();

        /** @var \Namespace\Module\Model\YourItem $item */
        foreach ($items as $item) {
            $_data = $item->getData();
            $item->load($item->getId());

            if (isset($_data['image'])) {
                $image = [];
                $image[0]['name'] = $item->getImagePath();
                $image[0]['url'] = $this->imageModel->getMediaUrl().'item/image'.$item->getImagePath();
                $_data['image'] = $image;
            }
            $item->setData($_data);
            $this->loadedData[$item->getId()] = $_data;
        }

    }

    return $this->loadedData;
  }
}