Menu Close
    Searching for an experienced Magento Development Company ?

    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

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

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

     

    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 🙂

    Selection_025

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    3 comments

  • Ezekiel
    I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you?
    Plz reply as I’m looking to construct my own blog
    and would like to know where u got this from. thanks a lot

    • Neelesh Singh (Moderator)
      Hello There,
      Thank you very much for your appreciation. We provide web and mobile app development services, if you want the same please email us your complete requirement at [email protected] and we will get back to you accordingly.

      Thank You
      Webkul Team

  • vishal
    How to custom collection in model & shows value in dropdownlist
  • Back to Top