How to Add Image Upload Field in Magento 2 System Configuration

 


Steps to Add Image Upload Field in Magento 2 System Configuration:

Step 1: Initially, you need to create a field in the system.xml file, at the path given below.


app/code/Vendor/Extension/etc/adminhtml/system.xml


Use the following code snippet 


<field id="image" translate="label" type="image" sortOrder="20" showInDefault="1" showInWebsite="1">

      <label>Upload Image</label>

      <backend_model>Vendor\Extension\Model\Config\Backend\Image</backend_model>

      <base_url type="media">extensionname/foldername/</base_url>

</field>

Step 2: Next you need to backend the model file Image.php. For that go to the below path


Vendor\Extension\Model\Config\Backend\Image.php


And add the code as follows


<?php

 

namespace Vendor\Extension\Model\Config\Backend;

 

class Image extends \Magento\Config\Model\Config\Backend\Image

{   

    const UPLOAD_DIR = 'yourfolder';

 

    /**

    * Return path to directory for upload file

    *

    * @return string

    * @throw \Magento\Framework\Exception\LocalizedException

    */

    protected function _getUploadDir()

    {

        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));

    }

 

    protected function _addWhetherScopeInfo()

    {

        return true;

    }

 

    /**

    * Getter for allowed extensions of uploaded files.

    *

    * @return string[]

    */

    protected function _getAllowedExtensions()

    {

        return ['jpg', 'jpeg', 'gif', 'png', 'svg'];

    }

    protected function getTmpFileName()

    {

        $tmpName = null;

        if (isset($_FILES['groups']))

        {

            $tmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];

        }

        else

        {

            $tmpName = is_array($this->getValue()) ? $this->getValue()['tmp_name'] : null;

        }

        return $tmpName;

    }

    public function beforeSave()

    {

        $value = $this->getValue();

        $deleteFlag = is_array($value) && !empty($value['delete']);

        if ($this->isTmpFileAvailable($value) && $imageName = $this->getUploadedImageName($value))

        {

            $fileTmpName = $this->getTmpFileName();

            if ($this->getOldValue() && ($fileTmpName || $deleteFlag))

            {

                $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());

            }

        }

        return parent::beforeSave();

    }

    private function isTmpFileAvailable($value)

    {

        return is_array($value) && isset($value[0]['tmp_name']);

    }

    

    private function getUploadedImageName($value)

    {

        if (is_array($value) && isset($value[0]['name']))

        {

            return $value[0]['name'];

        }

        return '';

    }   

}

Once you perform the above steps successfully, the image upload field is added to Magento 2 system configuration as shown below.

Comments

Post a Comment

Popular posts from this blog

Add Admin User name and Action name in Order Comment Section through Action Performed from Sales Order Grid in Magento 2

  Step 1:  First, we need to create an “events.xml“ file inside our extension at the following path app\code\Vendor\Extension\etc\adminhtml\ Then add the code as follows. <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">     <event name="sales_order_save_after">         <observer name="sales_order_save_after_comment_history_add"           instance="\Vendor\Extension\Observer\OrderSaveAfter" />     </event> </config> Step 2:  After that, we need to create an “OrderSaveAfter.php” file inside our extension at the following path app\code\Vendor\Extension\Observer\ And embed the code as given below. <?php  namespace Vendor\Extension\Observer;   use Magento\Framework\Event\ObserverInterface; use Magento\Framework\App\RequestInterface; use Magento\Backen...
Read more

How to Update Product Stock Programmatically in Magento 2

 Steps to Update Product Stock Programmatically in Magento 2: Step 1: We need to create a “Data.php” file inside our extension at the following path app\code\Vendor\Extension\Helper\ Now add the code as follows <?php namespace Vendor\Extension\Helper;   class Data extends \Magento\Framework\App\Helper\AbstractHelper {     protected $_productobj;     protected $_stockRegistry;       public function __construct(         \Magento\Framework\App\Helper\Context $context,         \Magento\Catalog\Model\Product $productobj,         \Magento\CatalogInventory\Api\StockRegistryInterface $stockRegistry,      ) {         $this->_productobj = $productobj;         $this->_stockRegistry = $stockRegistry;         parent::__construct($context);     }       public function updateProductStock($pr...
Read more

How to Set and Get Cookie in Magento 2

 <?php namespace Vendor\Extension\Model; class Customcookie {     private $customCookieManager;     private $customCookieMetadataFactory;     public function __construct(         \Magento\Framework\Stdlib\CookieManagerInterface $customCookieManager,         \Magento\Framework\Stdlib\Cookie\CookieMetadataFactory $customCookieMetadataFactory)    {         $this->customCookieManager = $customCookieManager;         $this->customCookieMetadataFactory = $customCookieMetadataFactory;     }     public function setCookie()     {         $customCookieMetadata = $this->customCookieMetadataFactory->createPublicCookieMetadata();         $customCookieMetadata->setDurationOneYear();         $customCookieMetadata->setPath('/');         $customCookieMe...
Read more