How to Add Custom File Upload Control in Magento 2

Working with Magento sometimes require various file uploads to store and use in the extension. While using backend, you may need uploading for example CSV, to add data and use somewhere or validate data from frontend. And from frontend, you need file upload option to let users upload screenshots, images or any other input files you need to store and further use or process.

By defualt, Magento 2 accepts all kind of input types such as text, radio button, check box etc. and allows to extend default interface to add fields without any hassle. Here, I will share the custom code to add file upload control both the backend and frontend of Magento 2.

Backend:
Go to Stores > Configuration > Sales, create a new section custom_section, create a new group of fields custom_group, and create a file upload custom_file_upload with following code.

<section id="[vendor]_[modulename]_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> / <!-- for ACL - only administrators can access this section.-->
    <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>

<label>Sales</label>

<tab>sales</tab>

<resource>Magento_Sales::config_sales</resource> /

<label>Custom group</label>

<label>Upload custom file</label>

</field>

</group>

</section>

Here, Group in the code include the fields that permit you to upload the files as need. ID attribute points to the certain custom file upload and it is unique per group. And type attribute is set for the file type, if you want to allow uploading image, it should be replaced with image.
Even if you have got upload file option but it will still not work. to make them work,

You need to set the upload folder, 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. Add upload_dir – upload directory to run the file.

<backend_model>Magento\Config\Model\Config\Backend\File</backend_model>
<upload_dir>pub/media/myupload</upload_dir>

1 2	<backend_model>Magento\Config\Model\Config\Backend\File</backend_model> <upload_dir>pub/media/myupload</upload_dir>

Magento 2 allows many types of files to upload but if you want to restrict some file types, to do the same go to system.xml file to be \[Vendor]\[ModuleName]\Model\Config\Backend\CustomFileType and put below code which allows only csv and xls file types. change the code as per your requirements.

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

<?php

namespace [Vendor]\[ModuleName]\Model\Config\Backend;

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

{

/**

* @return string[]

public function getAllowedExtensions() {

return ['csv', 'xls'];

}

Frontend:
just as backend, same technique can be used to add file upload control in frontend.
Take a look at sample code to add a field to a form of type file:

<?php
 
$fieldset->addField(
    'title',
    'file',
    [
        'name' => 'file', // to add reference later in controller. 
        'label' => __('File label'),
        'required' => true
    ]
)

<?php

$fieldset->addField(

'title',

'file',

[

'name' => 'file', // to add reference later in controller.

'label' => __('File label'),

'required' => true

]

)

Implementing this code will have a form with an input type=”file” box from which you can select the file you want to upload and press “save”.
Now we will need to create a controller to handle the request in app/code/[Vendor]/[ModuleName]/Controller/[ControllerName].php

<?php
 
namespace [Vendor]\[ModuleName]\Controller;
 
use Magento\Backend\App\Action;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\Filesystem;
use Magento\MediaStorage\Model\File\UploaderFactory;
 
class [ControllerName] extends Action
{
    protected $fileSystem;
 
    protected $uploaderFactory;
 
    protected $allowedExtensions = ['csv']; // to allow file upload types 
 
    protected $fileId = 'file'; // name of the input file box  
 
    public function __construct(
        Action\Context $context,
        Filesystem $fileSystem,
        UploaderFactory $uploaderFactory
    ) {
        $this->fileSystem = $fileSystem;
        $this->uploaderFactory = $uploaderFactory;
        parent::__construct($context);
    }
 
    public function execute()
    {
        $destinationPath = $this->getDestinationPath();
 
        try {
            $uploader = $this->uploaderFactory->create(['fileId' => $this->fileId])
                ->setAllowCreateFolders(true)
                ->setAllowedExtensions($this->allowedExtensions)
                ->addValidateCallback('validate', $this, 'validateFile');
            if (!$uploader->save($destinationPath)) {
                throw new LocalizedException(
                    __('File cannot be saved to path: $1', $destinationPath)
                );
            }
 
            // @todo
            // process the uploaded file
        } catch (\Exception $e) {
            $this->messageManager->addError(
                __($e->getMessage())
            );
        }
    }
    
    public function validateFile($filePath)
    {
        // @todo
        // your custom validation code here
    }
 
    public function getDestinationPath()
    {
        return $this->fileSystem
            ->getDirectoryWrite(DirectoryList::TMP)
            ->getAbsolutePath('/');
    }
}

<?php

namespace [Vendor]\[ModuleName]\Controller;

use Magento\Backend\App\Action;

use Magento\Framework\App\Filesystem\DirectoryList;

use Magento\Framework\Exception\LocalizedException;

use Magento\Framework\Filesystem;

use Magento\MediaStorage\Model\File\UploaderFactory;

class [ControllerName] extends Action

{

protected $fileSystem;

protected $uploaderFactory;

protected $allowedExtensions = ['csv']; // to allow file upload types

protected $fileId = 'file'; // name of the input file box

public function __construct(

Action\Context $context,

Filesystem $fileSystem,

UploaderFactory $uploaderFactory

) {

$this->fileSystem = $fileSystem;

$this->uploaderFactory = $uploaderFactory;

parent::__construct($context);

}

public function execute()

{

$destinationPath = $this->getDestinationPath();

try {

$uploader = $this->uploaderFactory->create(['fileId' => $this->fileId])

->setAllowCreateFolders(true)

->setAllowedExtensions($this->allowedExtensions)

->addValidateCallback('validate', $this, 'validateFile');

if (!$uploader->save($destinationPath)) {

throw new LocalizedException(

__('File cannot be saved to path: $1', $destinationPath)

);

}

// @todo

// process the uploaded file

} catch (\Exception $e) {

$this->messageManager->addError(

__($e->getMessage())

);

}

public function validateFile($filePath)

{

// @todo

// your custom validation code here

}

public function getDestinationPath()

{

return $this->fileSystem

->getDirectoryWrite(DirectoryList::TMP)

->getAbsolutePath('/');

}

In the above code, Magento\Framework\File\Uploader model handles upload, validation and file saving.

File Uploads in System Configuration

While adding file upload control to the system configuration area of Magento, you just need to specify some configuration to give Magento a clue as to where the file should be uploaded.

<field id="file" translate="label comment" type="file" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>File</label>
    <upload_dir config="config/path">pub/media/myupload</upload_dir>
</field>

<upload_dir config="config/path">pub/media/myupload</upload_dir>

</field>

That’s it. Simply by adding few lines of code both in backend and frontend, you can easily create file upload control. Let me know where you have used this code and how it helped. Even feel free to ask if you have any questions in comment section, I would be glad to help.

Click to rate this post!

[Total: 21 Average: 3.9]

7 Comments

Ankita on February 23, 2018

Hi, I want to upload a file on checkout payment step when place order. Can you help me for this?
Thanks in advance.

- magecomp on March 21, 2018
  
  Contact us at support@magecomp.com
  
Ankita on May 12, 2018

Hi, I want to upload a file on checkout payment step when place order. Can you help me for this?
Thanks in advance.

Arsl on November 6, 2017

How can I save the file path In database.
For example, I want to add upload feature on front-end in Current User Account Section. where he can upload PDF.

- magecomp on November 6, 2017
  
  The Blog is written to upload image from admin. For Frontend you will need to write code in your controller file for frontend.
  
Arsl on May 12, 2018

How can I save the file path In database.
For example, I want to add upload feature on front-end in Current User Account Section. where he can upload PDF.

- magecomp on May 12, 2018
  
  The Blog is written to upload image from admin. For Frontend you will need to write code in your controller file for frontend.

Steps to ADD Custom File Upload Control in Magento 2

File Uploads in System Configuration

Dhiren Vasoya

7 Comments

Leave a Reply Cancel reply

Get Connect With Us

Press ESC to close

File Uploads in System Configuration

Share Article:

How to Programmatically Reorder in Magento

How to Send Email with Attachment in Magento Without Saving File to Webserver

7 Comments

Leave a Reply Cancel reply