Create a section in the admin panel to upload pictures and get a picture in the template

Question

I have a place on each side where I need to get the loaded picture by the user from the admin panel.

The admin panel has similar functionality and I want to copy it and display this image in the template that is in the subject.

The finished section is responsible for the logo, Admin-> Design-> Configuration-> Select store end click Edit-> Header-> Add Image

How to implement this, provide an example code or article

Answer 1

app/code/Vendor/Module/view/adminhtml/ui_component/design_config_form.xml

Create add image field using design_config_form uiComponent

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="other_settings" sortOrder="30">
        <fieldset name="header">
            <field name="custom_logo_src" formElement="fileUploader">
                <settings>
                    <notice translate="true">Allowed file types: png, gif, jpg, jpeg.</notice>
                    <label translate="true">Add Image</label>
                    <componentType>fileUploader</componentType>
                </settings>
                <formElements>
                    <fileUploader>
                        <settings>
                            <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                            <maxFileSize>2097152</maxFileSize>
                            <uploaderConfig>
                                <param xsi:type="string" name="url">theme/design_config_fileUploader/save</param>
                            </uploaderConfig>
                        </settings>
                    </fileUploader>
                </formElements>
            </field>
        </fieldset>
    </fieldset>
</form>

app/code/Vendor/Module/etc/di.xml Declare backend model for your custom field

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <type name="Magento\Theme\Model\Design\Config\MetadataProvider">
        <arguments>
            <argument name="metadata" xsi:type="array">
                <item name="custom_logo_src" xsi:type="array">
                    <item name="path" xsi:type="string">design/header/custom_logo_src</item>
                    <item name="fieldset" xsi:type="string">other_settings/header</item>
                    <item name="backend_model" xsi:type="string">Vendor\Module\Model\Design\Backend\Custom</item>
                    <item name="base_url" xsi:type="array">
                        <item name="type" xsi:type="string">media</item>
                        <item name="scope_info" xsi:type="string">1</item>
                        <item name="value" xsi:type="string">custom</item>
                    </item>
                </item>
            </argument>
        </arguments>
    </type>
</config>

app/code/Vendor/Module/Model/Design/Backend/Custom.php

Backend model that saves the image to the specific custom folder

<?php
namespace Vendor\Module\Model\Design\Backend;

class Custom extends \Magento\Theme\Model\Design\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     *
     */
    const UPLOAD_DIR = 'custom';

    /**
     * Return path to directory for upload file
     *
     * @return string
     * @throw \Magento\Framework\Exception\LocalizedException
     */
    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getRelativePath($this->_appendScopeInfo(static::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[]
     */
    public function getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png'];
    }
}

app/code/Vendor/Module/Block/Html/Custom.php

Create custom block to get image url

<?php
namespace Vendor\Module\Block\Html;

class Custom extends \Magento\Framework\View\Element\Template
{

    /**
     * @var \Magento\MediaStorage\Helper\File\Storage\Database
     */
    protected $_fileStorageHelper;

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\MediaStorage\Helper\File\Storage\Database $fileStorageHelper
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\MediaStorage\Helper\File\Storage\Database $fileStorageHelper,
        array $data = []
    ) {
        $this->_fileStorageHelper = $fileStorageHelper;
        parent::__construct($context, $data);
    }

    /**
     * Get logo image URL
     *
     * @return string
     */
    public function getImageSrc()
    {
        if (empty($this->_data['logo_src'])) {
            $this->_data['logo_src'] = $this->_getImageUrl();
        }
        return $this->_data['logo_src'];
    }

    /**
     * Retrieve logo image URL
     *
     * @return string
     */
    protected function _getImageUrl()
    {
        $folderName = \Vendor\Module\Model\Design\Backend\Custom::UPLOAD_DIR;
        $storeLogoPath = $this->_scopeConfig->getValue(
            'design/header/custom_logo_src',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        );
        $path = $folderName . '/' . $storeLogoPath;
        return $imgUrl = $this->_urlBuilder
                ->getBaseUrl(['_type' => \Magento\Framework\UrlInterface::URL_TYPE_MEDIA]) . $path;

        if ($storeLogoPath !== null && $this->_isFile($path)) {
            $url = $imgUrl;
        }

        return $url;
    }

    /**
     * If DB file storage is on - find there, otherwise - just file_exists
     *
     * @param string $filename relative path
     * @return bool
     */
    protected function _isFile($filename)
    {
        if ($this->_fileStorageHelper->checkDbUsage() && !$this->getMediaDirectory()->isFile($filename)) {
            $this->_fileStorageHelper->saveFileToFilesystem($filename);
        }

        return $this->getMediaDirectory()->isFile($filename);
    }
}

You can get url from your phtml like below

<?php
$blockObj= $block->getLayout()->createBlock('Vendor\Module\Block\Html\Custom');
echo $blockObj->getImageSrc();
?>

Answer 2

Please check this tutorial Use Magento\Config\Block\System\Config\Form\Field\Image type instead of File that provided in article. There is an explanation.