Magento 2 File Upload in System Configuration

Uploading the file in Magento 2 system configuration is total 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 differents ways such as grids, forms, simple fields and images. 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.

Overview of uploading the file in Magento 2 store configuration

  • Step 1: Upload new custom file
  • Step 2: Flush Cache and check result

Step 1: Create new custom file upload

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

Apply the following code snippet:

<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!





Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
how-to
upload
file
system
configuration

Comments for Magento 2 File Upload in System Configuration

Please leave comments if you have any questions, feedbacks.

Module Development

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$99
12 reviews

SEO

FREE
no review

People also searched for:

  • magento 2 file upload in system configuration
  • magento 2 how to upload file in store configuration
  • upload file in store configuration magento 2
  • file upload in store configuration in magento 2
  • upload file in store configuration in magento 2
  • upload magento 2 file in store configuration