{"id":535,"date":"2019-08-12T13:21:59","date_gmt":"2019-08-12T13:21:59","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/08\/12\/add-custom-image-upload-control-in-magento-2-backend\/"},"modified":"2025-05-22T16:11:09","modified_gmt":"2025-05-22T10:41:09","slug":"add-custom-image-upload-control-in-magento-2-backend","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-image-upload-control-in-magento-2-backend\/","title":{"rendered":"How to Add Custom Image Upload Control in Magento 2 Backend"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The default Magento 2 admin interface allows input type files such as text fields, radio buttons, dropdowns, etc. Additionally, you can extend&nbsp;the functionality for store configuration to&nbsp;<strong><a href=\"https:\/\/meetanshi.com\/blog\/add-file-upload-control-magento-2-admin-configuration\/\">add custom Image upload control in Magento 2<\/a>&nbsp;backend<\/strong>. This post gives you the programmatic method for the same.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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,&nbsp;etc. For these tasks, you can&nbsp;<em>add custom file upload control in Magento 2 backend<\/em>&nbsp;using the below solution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Note:<\/strong>&nbsp;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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Add Custom Image Upload Control in Magento 2 backend:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Write below code in your&nbsp;<em><strong>Vendor\/Extension\/etc\/adminhtml\/system.xml<\/strong><\/em>&nbsp;file<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;field id=\"background\" translate=\"label\" type=\"image\" sortOrder=\"10\" showInDefault=\"1\" showInWebsite=\"1\">&lt;\n    label>Upload Image&lt;\/label>\n    &lt;backend_model>VendorExtensionModelBackimage&lt;\/backend_model>\n    &lt;base_url type=\"media\">extension\/backimage\/&lt;\/base_url>\n&lt;\/field><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Create&nbsp;<em><strong>Backimage.php<\/strong><\/em>&nbsp;file at&nbsp;<em><em><strong>Vendor\/Extension\/Model\/Backimage.php<\/strong><\/em><\/em><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php\nnamespace VendorExtensionModel;\nclass Backimage extends MagentoConfigModelConfigBackendImage\n{\n    const UPLOAD_DIR = 'extension\/backimage\/';\n    protected function _getUploadDir()\n    {\n        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));\n    }\n    protected function _addWhetherScopeInfo()\n    {\n        return true;\n    }\n    public function getAllowedExtensions()\n    {\n        return ['jpg', 'jpeg', 'png'];\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I\u2019d be very grateful if you helped share this helpful post on social media with fellow developers!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thanks!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The default Magento 2 admin interface allows input type files such as text fields, radio buttons, dropdowns, etc. Additionally, you can extend&nbsp;the functionality for store&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-535","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=535"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/535\/revisions"}],"predecessor-version":[{"id":15313,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/535\/revisions\/15313"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}