How to do a file upload in Magento 2 store configuration?

Learn how to carry file upload in Magento 2 store configuration with different methods.

One of the best elements of Magento is its administrative interface. Entire types of input types (text fields, radio buttons, dropdowns, multiple selections, etc.) are shown in various ways (blank, encrypted, sorted) and displayed in a variety of ways (grids, shapes, and so on).

Build your Amazon-like multi-vendor marketplace website @ $249/- now!!!

            Get your free live demo now: Click here

What creates Magento great is possible to extend this default interface (save part of the structure, especially), and simply include our own fields. We will develop it with a custom file upload field.

File upload in Magento 2 store configuration – Method 1

You can discover a set in the store> Configuration, menu. Include our custom one under the sales section. In the system.xml file on your module (etc / adminhtml / system.xml), we have to build a new section called “custom_section”, a new group called “custom_group”, “custom_file_upload” file uploading field.

• Here is the following code:

<section id="custom_section" translate="label" type="text" sortOrder="301" showInDefault="1" showInWebsite="1" showInStore="0">

    <label>Custom</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>

There are some differences evaluated to Magento 1: arrange the order, type and scope are now characteristic of the division (or group, or field) instead of child edges. Section fields are self-explanatory. “Tab” points are placed anywhere in our area.

The “Sales” tab is formed on Magento_Sales:: etc / admin / html / system.xml file, so you can specify it here. The “resource” is used for ACL. The only admin who have allowed Magento_Sales:: config_sales are capable to access this part.

The group is alike as in Magento. In our group, we place a domain that permits uploading the file. What should it enclose? Our option is “ID”; however it should be a component per one. What issues the most is type. We notice that it is set up for Magento \ Config \ Block \ System \ Config \ Form \ Field \ File

The following file upload is the default type of Magento. Keep in mind that there is a divided category for uploading the image: Magento \ Framework \ Module \ Structure \ Framework \ Form \ Field \ Image.

They are almost the same, but not quite.

File transfer in Magento – method 2

We will find the upload file field when we update the page. We can get in touch with it, upload a file, but it still does not work. Likewise, we need to add two things.

First, the background_model. The file can be used to hold the upload process: setting up an upload folder, checking permissions extensions, verifying file size, and saves the file path to the database. The Default Backend Model of Uploaded File is Magento \ Framework \ Sample \ Framework \ Backend \ File.

We have to include one more thing to have a working file upload: <upload_dir> – upload directory.

Including these two entries gives us the job file upload field:

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

<Upload_dir> upload </ upload_dir>

To connect a job file you want to include one more thing: <upload_dir> – Upload directory.

The upload directory initiates out of the application root. If we upload a file at this time, it will be placed in magento_root / upload /. The upload directory holds various exciting attributes. For eg, scope_info = “1” will store the files based on the scope. If we upload a file in the default scope, the path is magento_root / upload/default. Website 1 provides us magento_root / upload / websites / 1 /

Here is the final configuration

<section id="custom_section" translate="label" type="text" sortOrder="301" showInDefault="1" showInWebsite="1" showInStore="0">

    <label>Custom</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>

There are some other choices that we can include: frontend_model (eg custom “drag & drop” file upload), comment, tooltip, note, validations, etc. (You can still notice on Magento_Config :: etc / system_file.xsd).

Some modifies are needed to control the allowed file types. First, we want to create our own backend model. Create a class of your module and extend the original backend model. Here is an example of such a class:

<?php

namespace Webnexs\Custom\Model\Config\Backend;

class CustomFileType extends \Magento\Config\Model\Config\Backend\File

{

    /**

     * @return string[]

     */

    public function getAllowedExtensions() {

        return ['csv', 'xls'];

    }

}

transform backend model in system.xml file to be \Webnexs\Custom\Model\Config\Backend\CustomFileType(or your class). By extending the getAllowedExtensions() method, we allow only .csv and .xls files to be uploaded.

Wrapping up

That’s it. Only some lines of localization were able to build a fully loaded file upload in Magento 2  configuration button, with a custom upload directory and function support.

Click here to have a store developed with Magento 2 platform.