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

config field as displayed in admin

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();
}

}