{"id":965,"date":"2023-12-29T18:23:23","date_gmt":"2023-12-29T12:53:23","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=965"},"modified":"2025-01-11T22:55:37","modified_gmt":"2025-01-11T17:25:37","slug":"how-to-add-image-upload-field-in-system-configuration-in-magento-2","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/how-to-add-image-upload-field-in-system-configuration-in-magento-2\/","title":{"rendered":"How to Add Image Upload Field in System Configuration in Magento 2"},"content":{"rendered":"\n

Hello Everyone,<\/p>\n\n\n\n

In this blog, we will learn about how to Add Image Upload Field in system.xml Configuration in Magento 2.<\/p>\n\n\n\n

Without wasting your time, let us guide you straight away. Follow the easy step given below to Add Image Upload Field in Configuration file in Magento 2.<\/p>\n\n\n\n

STEPS FOR ADD IMAGE UPLOAD FIELD IN SYSTEM CONFIGURATION IN MAGENTO 2<\/strong><\/p>\n\n\n\n

Step 1: Create system.xml file<\/strong><\/p>\n\n\n\n

app\/code\/Vendor\/Extension\/etc\/adminhtml\/system.xml<\/strong><\/p>\n\n\n

\n<?xml version="1.0"?>\n\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc\/system_file.xsd">\n\n\u00a0\u00a0\u00a0\u00a0<system>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tab id="magecurious" class="magecurious" translate="label" sortOrder="10">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tab>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section id="extension" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<class>separator-top<\/class>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Magecurious<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tab>magecurious<\/tab>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<resource>Vendor_Extension::config_extension<\/resource>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<group id="general" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>General Configuration<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label>Enable Extension<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<source_model>Magento\\Config\\Model\\Config\\Source\\Enabledisable<\/source_model>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/field>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0<field id="vendor_image" translate="label" type="image" sortOrder="1" \u00a0 \u00a0 \u00a0 showInDefault="1" showInWebsite="1" showInStore="1">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Upload Image<\/label>\n\n\u00a0\u00a0\u00a0\u00a0<backend_model>Vendor\\Extension\\Model\\Config\\Backend\\Image<\/backend_model>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<base_url type="media">foldername<\/base_url>\n\n<\/field>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/group>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0\u00a0\u00a0<\/system>\n\n<\/config>\n<\/pre><\/div>\n\n\n
Step 2: Create Image.php file<\/strong><\/p>\n\n\n\n
app\/code\/Vendor\/Extension\/Model\/Config\/Backend\/Image.php<\/strong><\/p>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Model\\Config\\Backend;\n\nclass Image extends \\Magento\\Config\\Model\\Config\\Backend\\Image\n\n{\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0const UPLOAD_DIR = 'yourfolder';\n\n\u00a0\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0* Return path to directory for upload file\n\n\u00a0\u00a0\u00a0\u00a0*\n\n\u00a0\u00a0\u00a0\u00a0* @return string\n\n\u00a0\u00a0\u00a0\u00a0* @throw \\Magento\\Framework\\Exception\\LocalizedException\n\n\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0protected function _getUploadDir()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0protected function _addWhetherScopeInfo()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return true;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\/**\n\n\u00a0\u00a0\u00a0\u00a0* Getter for allowed extensions of uploaded files.\n\n\u00a0\u00a0\u00a0\u00a0*\n\n\u00a0\u00a0\u00a0\u00a0* @return string[]\n\n\u00a0\u00a0\u00a0\u00a0*\/\n\n\u00a0\u00a0\u00a0\u00a0protected function _getAllowedExtensions()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return ['jpg', 'jpeg', 'gif', 'png', 'svg'];\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0protected function getTmpFileName()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$tmpName = null;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isset($_FILES['groups']))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$tmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$tmpName = is_array($this->getValue()) ? $this->getValue()['tmp_name'] : null;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $tmpName;\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function beforeSave()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$value = $this->getValue();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$deleteFlag = is_array($value) && !empty($value['delete']);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($this->isTmpFileAvailable($value) && $imageName = $this->getUploadedImageName($value))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$fileTmpName = $this->getTmpFileName();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if ($this->getOldValue() && ($fileTmpName || $deleteFlag))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this->_mediaDirectory->delete(self::UPLOAD_DIR . '\/' . $this->getOldValue());\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return parent::beforeSave();\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0private function isTmpFileAvailable($value)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return is_array($value) && isset($value[0]['tmp_name']);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0private function getUploadedImageName($value)\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (is_array($value) && isset($value[0]['name']))\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return $value[0]['name'];\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return '';\n\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\u00a0\n\n}\n<\/pre><\/div>\n\n\n
Step 3: Finally run the below commands<\/strong><\/p>\n\n\n
\n$ php bin\/magento cache:clean\n\n$ php bin\/magento cache:flush\n<\/pre><\/div>\n\n\n
Step 4: Output:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
Final Thoughts:<\/strong><\/p>\n\n\n\n
So this was the easiest way which we have told you in this blog. This is how you can Add Image Upload Field in system.xml configuration file in Magento 2. Hope you liked the blog.<\/p>\n\n\n\n
So quickly go to the comment box and tell me how you like this blog?<\/p>\n\n\n\n
Stay tuned with us on our site to get new updates of Magento.<\/strong><\/p>\n\n\n\n
Thanks for reading and visiting our site.<\/p>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>