Magento 2 File Upload in System Configuration

Uploading the file in Magento 2 system configuration is totally possible to do when you work with Magento 2 admin interface. In Magento 2, the admin interface accepts all kinds of the input types such as text files, radio buttons, dropdowns, and multiple selects which are plain, encrypted or serialized, then shown in different ways such as grids, forms, simple fields and images. There are multiple file types that are supported like XML, PHP, JPG, CSV, DOCS, XLS. Especially, Magento also allows you to extend the default interface, then you can add the fields freely. Now let’s read this article and get the detailed instruction.

Method to upload the file in Magento 2 store configuration

• Step 1: Create system.xml file
• Step 2: Flush Cache and check result

Step 1: Create system.xml file.

Follow the path Store > Configuration, under Sales section, you can create a new section custom_section, create a new group of fields custom_group, and create a file upload custom_file_upload by adding the system.xml file in your module

Apply the following code snippet. File path: app/code/Mageplaza/HelloWorld/etc/adminhtml/system.xml

<section id="mageplaza_helloworld_section" translate="label" type="text" sortOrder="301" showInDefault="1" showInWebsite="1" showInStore="0">
    <label>Sales</label>
    <tab>sales</tab>
    <resource>Magento_Sales::config_sales</resource>
    <group id="custom_group" translate="label" type="text" sortOrder="6" showInDefault="1" showInWebsite="1" >
        <label>Custom group</label>
        <field id="custom_file_upload" translate="label" type="Magento\Config\Block\System\Config\Form\Field\File" sortOrder="6" showInDefault="1" showInWebsite="1" >
            <label>Upload custom file</label>
        </field>
    </group>
</section>

In the above script, there are some of points you need to know what they are. Firstly, Section fields are self-explanatory while tab is the exact place for the section, sales tab is set from Magento_Sales::etc/adminhtml/system.xml file, and resource will be applied for ACL. However, remember that only administrators with Magento_Sales::config_sales possibly access this section.

Next,Group in the script code requires will include the fields that permit you to upload the files as need. The group contains id and type attributes. id points to the certain custom file upload but it is surely unique per group. And type is set to Magento\Config\Block\System\Config\Form\Field\File, but if you want to upload image, remember the type Magento\Config\Block\System\Config\Form\Field\Image.

Finally, although you get an upload file, it is still not working. Two things are suggested for you as the below.

• In this backend module, you should set the upload directory, check allowed extensions, validate file size and save the file path to database. Default backend model for file upload is Magento\Config\Model\Config\Backend\File. Then let’s add <upload_dir> – upload directory to run the file.

<backend_model>Magento\Config\Model\Config\Backend\File</backend_model>
<upload_dir>upload</upload_dir>

From the application root, the file upload will be put in magento_root/upload/. However, when you insert a scope_info=”1″ to the upload directory, the file upload will be saved into the place which is based on the scope. In case you apply the default scope, the file will be in magento_root/upload/default. Website 1 would give us magento_root/upload/websites/1/ etc. Run the configuration to clear all:

<section id="mageplaza_helloworld_section" translate="label" type="text" sortOrder="301" showInDefault="1" showInWebsite="1" showInStore="0">
    <label>Sales</label>
    <tab>sales</tab>
    <resource>Magento_Sales::config_sales</resource>
    <group id="custom_group" translate="label" type="text" sortOrder="6" showInDefault="1" showInWebsite="1" >
        <label>Security</label>
        <field id="custom_file_upload" translate="label" type="Magento\Config\Block\System\Config\Form\Field\File" sortOrder="6" showInDefault="1" showInWebsite="1" >
            <label>Upload custom file</label>
            <backend_model>Magento\Config\Model\Config\Backend\File</backend_model>
            <upload_dir config="system" scope_info="1">test</upload_dir>
        </field>
    </group>
</section>

• Apart from the backend model, you can refer other options like frontend_model (eg. for a custom “drag and drop” file upload ), comment, tooltip, hint, validations etc.

When uploading the file in Magento 2 store configuration, many types of the files are accepted. But it is unallowed if you want to limit that. In order to do, in system.xml file to be \Mageplaza\HelloWorld\Model\Config\Backend\CustomFileType, please take a look at the following example that only includes csv and xls thanks to the function getAllowedExtensions().

<?php
 
namespace Mageplaza\HelloWorld\Model\Config\Backend;
 
class CustomFileType extends \Magento\Config\Model\Config\Backend\File
{
    /**
     * @return string[]
     */
    public function getAllowedExtensions() {
        return ['csv', 'xls'];
    }
}

Step 2: Flush Cache and check result

Flush Magento cache and check your result.

That is it! If that you have any queries about the article or any questions in general, use the comment section below!

Related Post

• Magento 2 Create Admin Menu
• Magento 2 How to Create System.xml Configuration
• Create Admin Grid in Magento 2
• Magento 2 Admin ACL