Magento 2 Image Upload – Create Beautiful Image Upload in Configuration

configurationimage-uploadmagento-2.0magento2

add image in create new product
enter image description here

How to make an similar image upload in configuration instead of enter image description here

In add product, it uses phtml file. In configuration, it uses xml file.

Best Answer

In system.xml you should add this code below:

<field id="upload_image_id" translate="label comment" type="image" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Select Image</label>
    <backend_model>NameSpace\YourModule\Model\Config\Backend\Image</backend_model>
    <base_url type="media" scope_info="1">yourfolder</base_url>
</field>

And you should create custom model using in system.xml:

NameSpace\YourModule\Model\Config\Backend\Image.php

<?php

namespace NameSpace\YourModule\Model\Config\Backend;

class Image extends \Magento\Config\Model\Config\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     *
     */
    const UPLOAD_DIR = 'yourfolder'; // Folder save image

    /**
     * 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));
    }

    /**
     * Makes a decision about whether to add info about the scope.
     *
     * @return boolean
     */
    protected function _addWhetherScopeInfo()
    {
        return true;
    }

    /**
     * Getter for allowed extensions of uploaded files.
     *
     * @return string[]
     */
    protected function _getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png', 'svg'];
    }
}
Related Topic