File upload in Magento 2 store configuration

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 showed in various ways (blank, encrypted, sorted) and displayed in a variety of ways (grids, shapes, and so on).

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.

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 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. Only admin who have allowed Magento_Sales :: config_sales are capable to access this part.

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

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

They are almost the same, but not quite.

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. 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 initiate 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 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 of all, 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.

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

Last Update: December 18, 2018  

March 5, 2018   601   Nandini R    Operations    
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn