load image in imageUploader. admin form

Question

    <field name="image_upload" sortOrder="40" formElement="imageUploader">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">source</item>
            </item>
        </argument>
        <settings>
            <elementTmpl>ui/form/element/uploader/image</elementTmpl>
            <dataType>string</dataType>
            <label translate="true">Topic Image</label>
            <visible>true</visible>
            <required>false</required>
        </settings>
        <formElements>
            <imageUploader>
                <settings>
                    <required>false</required>
                    <uploaderConfig>
                        <param xsi:type="url" name="url" path="path/to/upload"/>
                    </uploaderConfig>
                    <previewTmpl>My_Module/image-preview</previewTmpl>
                    <openDialogTitle>Media Gallery</openDialogTitle>
                    <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                    <maxFileSize>4194304</maxFileSize>
                </settings>
            </imageUploader>
        </formElements>
    </field>

im using this code on uploading image. then in my save action, im saving the image url path (eg. project.local/image/path). my problem is in the edit form. its not loading the saved image. can someone help me on how i can load the image in the edit form, or maybe an image field that i can use just to load the saved image. note that what im saving in the DB is the url path of the image.

Thank you

DataProvider.php

public function __construct(
    $name,
    $primaryFieldName,
    $requestFieldName,
    \My\Module\Model\ResourceModel\Topics\Collection $topicsCollection,
    \Magento\Framework\App\Request\DataPersistorInterface $dataPersistor,
    \Magento\Framework\App\RequestInterface $request,
    array $meta = [],
    array $data = []
){
    $this->collection = $topicsCollection;
    $this->dataPersistor = $dataPersistor;
    $this->request = $request;
    $this->resourceHelper = $resourceHelper;
    parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}

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

    $topicId = $this->request->getParam('topic_id');
    if($topicId){
        $topicCollection = $this->collection->addFieldToFilter('topic_id', $topicId);
        foreach ($topicCollection as $topic){
            $this->loadedData[$topic->getId()] = $topic->getData();
        }
    }

    return $this->loadedData;
}

Answer 1

Try this code

protected $storeManager;


public function __construct(
    $name,
    $primaryFieldName,
    $requestFieldName,
    \My\Module\Model\ResourceModel\Topics\Collection $topicsCollection,
    \Magento\Framework\App\Request\DataPersistorInterface $dataPersistor,
    \Magento\Framework\App\RequestInterface $request,
    \Magento\Store\Model\StoreManagerInterface $storeManager,
    array $meta = [],
    array $data = []
){
    $this->collection = $topicsCollection;
    $this->dataPersistor = $dataPersistor;
    $this->request = $request;
    $this->resourceHelper = $resourceHelper;
    $this->_storeManager = $storeManager;
    parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}

public function getData()
{
    if (isset($this->loadedData)) {
        return $this->loadedData;
    }
    $topicId = $this->request->getParam('topic_id');
    if($topicId){
        $topicCollection = $this->collection->addFieldToFilter('topic_id', $topicId);
        foreach ($topicCollection as $topic){
            $this->loadedData[$topic->getId()] = $topic->getData();
            // set your image
            if ($topic->getImageUpload() != '') {
                $label_img['image_upload'][0]['name'] = $topic->getImageUpload();
                $label_img['image_upload'][0]['url'] = $this->getMediaUrl() . $topic->getImageUpload();
                $fullData = $this->loadedData;
                $this->loadedData[$topic->getId()] = array_merge($fullData[$topic->getId()], $label_img);
            }
        }
    }
    return $this->loadedData;
}

public function getMediaUrl()
{
    // set your image path here
    $mediaUrl = $this->_storeManager->getStore()
        ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'image/path/';
    return $mediaUrl;
}