Magento 1.9 – How to Add Image Uploader to CMS Page

magento-1.9moduleupload

I followed this tutorial to add a custom field to CMS pages:
https://www.atwix.com/magento/adding-custom-attribute-to-a-cms-page/

And it works very well. But I want an image uploader instead of a text field. How do I do this?

This is my Observer:

class test_CmsBanner_Model_Observer
{
    public function cmsField($observer)
    {
        //get CMS model with data
        $model = Mage::registry('cms_page');
        //get form instance
        $form = $observer->getForm();
        //create new custom fieldset 'test_content_fieldset'
        $fieldset = $form->addFieldset('test_content_fieldset', array('legend'=>Mage::helper('cms')->__('Custom'),'class'=>'fieldset-wide'));
        //add new field
        $fieldset->addField('content_custom', 'text', array(
            'name'      => 'content_custom',
            'label'     => Mage::helper('cms')->__('Banner Image'),
            'title'     => Mage::helper('cms')->__('Banner Image'),
            'disabled'  => false,
            //set field value
            'value'     => $model->getContentCustom()
        ));

    }
}

And I saw this line:

$fieldset->addField('content_custom', 'text', array(

It says text at the moment. What do I change it to, to create an image upload field?

Best Answer

Try this:

$fieldset->addField('content_custom', 'image', array(

You can see all availabe form elements types inside the directory lib/Varien/Data/Form/Element/Image.php. See all availabe form element types in below screen-shot.

enter image description here

But I believe this is not enough. Since your form holds a file input, it is required to hold your form following attribute enctype="mutltipart/form-data". Without this attribute in your form, it wont save your file inputs.

So For this, I believe you need to do this in your observer.

$form = $observer->getForm();
$form->setEnctype("mutltipart/form-data");
Related Topic