Create beautiful image upload in configuration magento 2
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'];
}
}