Magento 2 Admin Config - Add dynamic Image field programmatically - Setoptions

Question

I am trying to add a dynamic image field to my admin configuration tab, so far I have the field appearing but I can't save and or preview an uploaded image.

I can get this working fine with the static option from the system.xml using

<field id="imageupload" type="image" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
    <label>upload</label>
    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
    <upload_dir config="system/filesystem/media" scope_info="1">catalog/product/placeholder</upload_dir>
    <base_url type="media" scope_info="1">catalog/product/placeholder</base_url>
</field>

However, I'm missing something when trying to replicate this in PHP, here is what I have so far

[
  'id' => 'allergen' . $option->getValue(),
  'type' => 'image',
  'sortOrder' => ($index * 10),                                            
  'showInDefault' => '1',        
  'showInWebsite' => '0',
  'showInStore' => '0',
  'label' => 'Image for ' . $option->getLabel(),
  'backend_model' => 'Magento\Config\Model\Config\Backend\Image',
  'base_url' => ['value' => 'catalog/product/images', 'type'=>"media", 'scope_info'=>"1"],
  'upload_dir' => ['value'=> 'catalog/product/images', 'config'=> "system/filesystem/media", 'scope_info'=>"1"],
  '_elementType' => 'field',                                           
  'path' => '<sectionId>/<groupid>'
]

The image appears to be saving via the default backend model as text and not respecting the input image value

Answer 1

 <field id="slider_image_1" translate="label" type="image" sortOrder="12" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Slider Image 1</label>
                <comment>Allowed file types: jpg, jpeg, gif, png</comment>
                <!-- backend model which save uploaded  file on define location -->
                <backend_model>Codilar\ProductView\Model\Saveimage</backend_model>
                <base_url type="media" scope_info="1">codilar/banner</base_url>
            </field>

In saveImage write this class Saveimage extends \Magento\Config\Model\Config\Backend\Image { /** * The tail part of directory path for uploading */

const UPLOAD_DIR = 'codilar/banner';

/**
 * Upload max file size in kilobytes
 *
 * @var int
 */
protected $_maxFileSize = 2048;

/**
 * Return path to directory for upload file
 *
 * @return string
 */
protected function _getUploadDir()
{
    return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
}

/**
 * Makes a decision about whether to add info about the scope
 *
 * @return boolean
 */
protected function _addWhetherScopeInfo()
{
    return true;
}

/**
 * @return \Magento\Config\Model\Config\Backend\Image
 * @throws \Magento\Framework\Exception\FileSystemException
 * @throws \Magento\Framework\Exception\LocalizedException
 */
public function beforeSave()
{
    $value = $this->getValue();
    $deleteFlag = is_array($value) && !empty($value['delete']);
    $fileTmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];

    if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
        $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
    }
    return parent::beforeSave();
}

}