🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How to Add Custom Image Upload Control in Magento 2 Backend

By Sanjay JethvaUpdated on May 22, 2025 1 min read

The default Magento 2 admin interface allows input type files such as text fields, radio buttons, dropdowns, etc. Additionally, you can extend the functionality for store configuration to add custom Image upload control in Magento 2 backend. This post gives you the programmatic method for the same.

If you are a Magento 2 developer, you may require to upload a file in Magento 2 backend such as a CSV file to import shipping rates, attach user manuals on product pages, upload logo image on a specific page, etc. For these tasks, you can add custom file upload control in Magento 2 backend using the below solution.

Note: The code given here is an example to add image file upload control in Magento 2. You can tweak the code as per your business requirements.

Method to Add Custom Image Upload Control in Magento 2 backend:

1. Write below code in your Vendor/Extension/etc/adminhtml/system.xml file

<field id="background" translate="label" type="image" sortOrder="10" showInDefault="1" showInWebsite="1"><
    label>Upload Image</label>
    <backend_model>VendorExtensionModelBackimage</backend_model>
    <base_url type="media">extension/backimage/</base_url>
</field>

2. Create Backimage.php file at Vendor/Extension/Model/Backimage.php

<?php
namespace VendorExtensionModel;
class Backimage extends MagentoConfigModelConfigBackendImage
{
    const UPLOAD_DIR = 'extension/backimage/';
    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
    }
    protected function _addWhetherScopeInfo()
    {
        return true;
    }
    public function getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'png'];
    }
}

That’s it.

I’d be very grateful if you helped share this helpful post on social media with fellow developers!

Thanks!

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.