Create beautiful image upload in configuration magento 2
-
13-12-2019 - |
Solution
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'];
}
}
OTHER TIPS
Although the accepted answer worked for me. For some reason the validation does not work. I ended up using a custom Config\Backend\Image
file.
In my system.xml
I've added the image field below
<field id="my_image_field" translate="label" sortOrder="1" type="Magento\Config\Block\System\Config\Form\Field\Image" showInDefault="1" showInWebsite="1" showInStore="1">
<label>My Image</label>
<backend_model>Vendor\Package\Model\Config\Backend\Image</backend_model>
<base_url type="media" scope_info="1">my_image_folder</base_url>
<validate>required-entry</validate>
<upload_dir config="system" scope_info="1">my_image_folder</upload_dir>
</field>
Then, as you can tell, I've created the file "Vendor\Package\Model\Config\Backend\Image
" with the following content:
<?php
namespace Vendor\Package\Model\Config\Backend;
class Image extends \Magento\Config\Model\Config\Backend\File
{
protected function _getAllowedExtensions()
{
return ['jpg', 'jpeg', 'gif', 'png', 'svg'];
}
}
FIY, the image will be saved in magento_root/pub/media/my_image_folder
.
I hope it helps.
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange