How to add upload images form to the custome tab in system->configuration

Question

I created custome tab in the sustem->configuration.

adminhtml.xml

<?xml version="1.0"?>
<config>
    <acl>
        <resources>
            <admin>
                <children>
                    <system>
                        <children>
                            <config>
                                <children>
                                    <sliders translate="title" module="sliders">
                                        <title>Your section</title>
                                        <sort_order>10</sort_order>
                                    </sliders>
                                </children>
                            </config>
                        </children>
                    </system>
                </children>
            </admin>
        </resources>
    </acl>
</config>

system.xml

<?xml version="1.0"?>
<config>
    <tabs>
        <sliders translate="label" module="sliders">
            <label>Sliders</label>
            <sort_order>10</sort_order>
        </sliders>
    </tabs>
    <sections>
        <sliders translate="label" module="sliders">
            <class>separator-top</class>
            <label>Configuration</label>
            <tab>sliders</tab>
            <sort_order>100</sort_order>
            <show_in_default>1</show_in_default>
            <show_in_website>1</show_in_website>
            <show_in_store>1</show_in_store>
            <groups>
                <sliders_conf translate="label">
                    <label>Sliders configurations</label>
                    <frontend_type>text</frontend_type>
                    <sort_order>10</sort_order>
                    <show_in_default>1</show_in_default>
                    <show_in_website>1</show_in_website>
                    <show_in_store>1</show_in_store>
                    <fields>
                        <mycustom_field translate="label tooltip comment">
                            <label>My Custom Field</label>
                            <comment>Some comment about my field</comment>
                            <tooltip>Field ToolTip</tooltip>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                            <frontend_type>text</frontend_type>
                        </mycustom_field>
                    </fields>
                </sliders_conf>                    
            </groups>
        </sliders>
    </sections>
</config>

As you can see I added text field. Now, I must to add upload form, in this tab, for images. How to do this ?

text text text text text text text text text text text text text text text text text text text text text text text

Answer 1

There are two steps to follow ...

         <marker_image translate="label">
                <label>Upload Image</label>
                <frontend_type>image</frontend_type>
                <backend_model>modulename/system_config_backend_image_marker</backend_model>
                <base_url type="media" scope_info="1">modulename/marker</base_url>
                <sort_order>1</sort_order>
                <show_in_default>1</show_in_default>
                <show_in_website>1</show_in_website>
                <show_in_store>1</show_in_store>
                <comment>Allowed file types: ICO, PNG, GIF, JPEG, APNG, SVG. Not all browsers support all these formats!</comment>
            </marker_image>

And add this calss to Model/System

     class ABC_Modulename_Model_System_Config_Backend_Image_Marker extends Mage_Adminhtml_Model_System_Config_Backend_Image
    {
        /**
        * The tail part of directory path for uploading
        *
        */

     const UPLOAD_DIR = 'modulename/marker';

/**
 * Token for the root part of directory path for uploading
 *
 */
const UPLOAD_ROOT = 'media';

/**
 * Return path to directory for upload file
 *
 * @return string
 * @throw Mage_Core_Exception
 */
protected function _getUploadDir()
{
    $uploadDir = $this->_appendScopeInfo(self::UPLOAD_DIR);
    $uploadRoot = $this->_getUploadRoot(self::UPLOAD_ROOT);
    $uploadDir = $uploadRoot . '/' . $uploadDir;
    return $uploadDir;
}

/**
 * Makes a decision about whether to add info about the scope.
 *
 * @return boolean
 */
protected function _addWhetherScopeInfo()
{
    return true;
}

/**
 * Getter for allowed extensions of uploaded files.
 *
 * @return array
 */
protected function _getAllowedExtensions()
{
    return array('ico', 'png', 'gif', 'jpeg', 'apng', 'svg');
}

/**
 * Get real media dir path
 *
 * @param  $token
 * @return string
 */
protected function _getUploadRoot($token) {
    return Mage::getBaseDir($token);
}

}

Now you can find the uploaded image inside media/modulename/marker 777 rights must be for /marker