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

Published 20 Comments on Adding an Image Upload Field to the Magento System.xml Configuration


Allowed file types: jpeg, gif, png.


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

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


  1. 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.


  2. 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’);

  3. 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.

  4. 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.

  5. 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

    1. 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.

      1. 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.

          1. 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

Comments are closed.