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


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

  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.


    1. You can do that by modifying the Element’s HTML. 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.

  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 Kathir,

    It’s working perfectly, thanks for your code.

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

    1. Thanks Karthi! Updated the code.

  4. varunbharill

    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.

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

      1. varunbharill

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

  5. Manoj Taneja

    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.

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

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

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