Shopping cart

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

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.

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:

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().