Good afternoon,

I'm a little new to this Magento 2 game so any advice will be happily received.

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

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

 <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 -->
                <base_url type="media" scope_info="1">codilar/banner</base_url>

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


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.