Magento2 – How To Add Drop Down And Image Upload Fields In Configuration Section

Here we learn in Magento2 – How To Add Drop Down And Image Upload Fields In Configuration Section

In previous post we learned How to add custom module configuration in configuration section using system.xml in Magento2.

Now here we add Drop down with option and  image upload field in configuration.

=>For Drop down field

1#First we need to create source model for drop down options

then we create a file named Sleektheme.php in directory app\code\Namespace\Modulename\Model\Config\Source

<?php
/**
 * My own options
 *
 */
namespace Namespace\Modulename\Model\Config\Source;
class Sleektheme implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {
        return [
            ['value' => 'light', 'label' => __('Light')],
            ['value' => 'dark', 'label' => __('Dark')],
            ['value' => 'stitch', 'label' => __('Stitch')]
        ];
    }
}

?>

2# Now we add Drop down field by adding following xml code in system.xml that is in app/code/Namespace/Modulename/etc/adminhtml

       <field id="theme" translate="label comment" sortOrder="6" type="select" showInDefault="1" showInWebsite="1" showInStore="1">
             <label>Theme</label>
             <comment>eg.can use stitch,light,dark theme.</comment>
             <!-- source model which we created for drop down options -->
             <source_model>Namespace\Modulename\Model\Config\Source\Sleektheme</source_model>
       </field>

 

=>For Image field

1#First we need to create backend model for image field in which we upload image file to defined location

<?php

namespace Namespace\Modulename\Model;

class Saveimage extends \Magento\Config\Model\Config\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     */
   
    const UPLOAD_DIR = 'webkul/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;
    }

    /**
     * Save uploaded file before saving config value
     *
     * Save changes and delete file if "delete" option passed
     *
     * @return $this
     */
    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();
    }
}

Then we create backend model file named Saveimage.php in app/code/Namespace/Modulename/Model

2# Now we add Image field by adding following xml code in system.xml that is in app/code/Namespace/Modulename/etc/adminhtml

  <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>Namespace\Modulename\Model\Saveimage</backend_model>
        <base_url type="media" scope_info="1">webkul/banner</base_url>
  </field>
 

Finally after adding above both xml code to system.xml it’s look like following

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
    <system>
        <!-- for add new tab in Magento2 system configuration section -->
        <tab id="webkul" translate="label" sortOrder="10">
             <label>Webkul</label>
        </tab>
        <!-- for create section -->
        <section id="sleekaccordian" translate="label" type="text" sortOrder="320" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Sleek Accordian</label>
            <!-- Assign section to tab -->
            <tab>webkul</tab>
            <resource>Namespace_Modulename::configuration</resource>
            <!-- create group for fields in section -->
            <group id="parameters" translate="label" type="text" delault="1" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Parameters</label>
                <!-- create dropdown select type field -->
                <field id="theme" translate="label comment" sortOrder="6" type="select" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Theme</label>
                    <comment>eg.can use stitch,light,dark theme.</comment>
                    <!-- source model which we created for drop down options -->
                    <source_model>Namespace\Modulename\Model\Config\Source\Sleektheme</source_model>
                </field>
                <!-- create image upload type field -->
                <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>Namespace\Modulename\Model\Saveimage</backend_model>
                    <base_url type="media" scope_info="1">webkul/banner</base_url>
                </field>
            </group>
        </section>
    </system>
</config>
 

And in configuration this drop down and image field add as following 🙂