Adding an Image Upload Field to the Magento System.xml Configuration

Post author By Kathir Sid Vel
Post date September 14, 2012

[xml]

Logo
Allowed file types: jpeg, gif, png.
image
adminhtml/system_config_backend_image
theme
theme
1
1
1
1

[/xml]

The element represents the location where the image will be uploaded to. In the above example, the image will be saved to a sub-folder under the media folder. e.g. /media/theme/.

The element is used to rendering the tag.

To output the image from the above example, you could use the following code

[php]
echo Mage::getBaseUrl(‘media’) . Mage::getStoreConfig(‘system_config_name/group/logo’);
[/php]

20 replies on “Adding an Image Upload Field to the Magento System.xml Configuration”

hello Kathir,
it works fine for me but i want to add more images for background and want to store in media folder and allow admin to select any image from dropdown for frontend background. can u plz help me for that.

thanks,
Angel

You can do that by modifying the Element’s HTML. http://norbertoburciaga.wordpress.com/2012/07/18/adding-a-custom-element-to-a-form-on-adminhtml-on-magento/ shows a sample. Using the custom element render function, you can modify the functionality of the form element. If you are unable to figure out the example, I can look into writing (chargeable) it for you.

Thanks for this helpful tips.

In my case, to use the picture again, I had to use this code:

echo Mage::getBaseUrl(‘media’) . ‘theme/’ . Mage::getStoreConfig(‘system_config_name/group/logo’);

Hi Kathir,

It’s working perfectly, thanks for your code.

btw, closing tag </logoimage> should be </logo>

Thanks Karthi! Updated the code.

Hi. Thanks for the code. I want to put a check on the image size and dimension. If the browsed image exceeds a certain fixed dimension I want to display a message. I want to do this only for files uploaded using this piece of code and not globally. Please let me know how to do it.

Varun, that’s possible. Please send a direct email to me – [email protected] .

Sent you a mail. my id is [email protected]

HI Everyone, I m new in magento.I have added a custom payment method module and its working fine but i want to add a logo of payment method when a user enables the custom method and its should displayed in frontend at the time of checkout. I have added above code in my system.xml but still nothing is dispalyed in frontend. Could u tell what should i do.

Thank in adv.

I added image but still magento allows me to upload all types of file

Hi Ashwin, there should be file type validation. It happens from the model. http://svn.magentocommerce.com/source/branches/1.8/app/code/core/Mage/Adminhtml/Model/System/Config/Backend/Image.php

Thanks man.. Fixed it. While saving i get the message . Thanks Again.

You are welcome!

Alternatively, you can use this method to do further validation https://www.kathirvel.com/magento-run-an-event-or-function-after-system-save-config/

I need a help. We delete an image from admin backend say faviicon , but that file is not deleting from the media folder. do we have any option to delete the file too when , i choose delete image from backend

I know the delete button doesn’t really work. It removes the database entry, but leave the file in the media folder. I didn’t bother much as a few additional files won’t fill up the server. You can surely extend the after save functionality to write your own function to delete the file.

Hmm. We need to write a function only , since we will be having a lot of images. Favi Icon was for an example.
Thanks a lot Kathir.

Have a good day!

Hi Karthir,

while creating a folder from xml file , it is getting created , also another folder default gets created automatically. (if i create a folder test , the folder Structure is like this test->default->test.jpg) but i need this ( test->test.jpg ) can this creation of default folder be avoided

Read http://alanstorm.com/magento_system_configuration_in_depth_tutorial about Scope Info

Comments are closed.