Magento – Magento 2 Add Image Upload in Configuration issue “The base directory to upload file is not specified”

backendcore-config-dataimage-uploadmagento2media-images

I am new in MAgento2, and I installed custom module of Magento 2.3 to add image file upload configuration in system.xml.
But i encountred this isuue when i try to save the config :

enter image description here

system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="mageplaza" translate="label" sortOrder="10">
            <label>Mageplaza</label>
        </tab>
        <section id="helloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Hello World</label>
            <tab>mageplaza</tab>
            <resource>Mageplaza_HelloWorld::helloworld_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>

                <field id="image_upload" translate="label" type="image" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Image Upload</label>
                    <!-- Backend model which saves uploaded files on a defined directory path -->
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <base_url type="media" scope_info="1">don/post</base_url>
                    <!-- Comment about allowed extensions of uploaded files which are defined in the backend model -->
                    <comment><![CDATA[Allowed file types: jpg, jpeg, gif, png, svg]]></comment>
                </field>

            </group>
        </section>
    </system>
</config>

my backend_model Image.php :

<?php
namespace Mageplaza\HelloWorld\Model\Config\Backend;

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

    /**
     * Upload max file size in kilobytes
     *
     * @var int
     */
    protected $_maxFileSize = 2048;

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

    /**
     * @return string|null
     */
    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;
    }

    /**
     * Save uploaded file before saving config value
     *
     * Save changes and delete file if "delete" option passed
     *
     * @return $this
     */
    public function beforeSave()
    {
        $value = $this->getValue();
        $deleteFlag = is_array($value) && !empty($value['delete']);
        $fileTmpName = $this->getTmpFileName();

        if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
            $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
        }
        return parent::beforeSave();
    }
}

I created also the folder pub/media/don/post/default

i did not succeed in finding a solution of this issue

Thanks in advance

Best Answer

Replace system.xml with the below code,

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="mageplaza" translate="label" sortOrder="10">
            <label>Mageplaza</label>
        </tab>
        <section id="helloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Hello World</label>
            <tab>mageplaza</tab>
            <resource>Mageplaza_HelloWorld::helloworld_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>

                <field id="image_upload" translate="label" type="image" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Image Upload</label>
                    <!-- Backend model which saves uploaded files on a defined directory path -->
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <base_url type="media" scope_info="1">don/post</base_url>
                    <upload_dir config="system" scope_info="1">don/post</upload_dir>
                    <!-- Comment about allowed extensions of uploaded files which are defined in the backend model -->
                    <comment><![CDATA[Allowed file types: jpg, jpeg, gif, png, svg]]></comment>
                </field>
            </group>
        </section>
    </system>
</config>

Clear cache and check it.