How to preview uploaded image in custom module form

Question

I am learning Magento and trying to make a module to manage Chefs in a Restaurant. I created an upload button to upload image and it works (images save in directory, file name saved in database).

But I don't know how to have a small preview of the image next to the button when the image has been uploaded (like when uploading Catalog picture). At the moment, when I click "edit" to edit a Chef Info, the Image field look the same if I uploaded image already or not.

Here is my field:

 $fieldset->addField('image_url', 'image', array(
        'label'     => Mage::helper('tressympa_cheflist')->__('Profile Picture'),
        'required'  => false,
        'name'      => 'image_url',
    ));

Any suggestion? Thank you very much!

Answer 1

save image name with your complete path.

media/{yourfolder}/imagename.jpg

save in database with yourfolder/imagename.jpg

it will show automatically in edit form.

OR

you can rendered the field and show the image

$fieldset->addField('image_url', 'image', array(
        'label'     => Mage::helper('tressympa_cheflist')->__('Profile Picture'),
        'required'  => false,
        'renderer' => 'modulename/adminhtml_modulename_renderer_image',
        'name'      => 'image_url',
    ));

add your file Block/Adminhtml/ModuleName/Renderer/Image.php

 <?php
    class NameSpace_ModuleName_Block_Adminhtml_ModuleName_Renderer_Image extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract{
       public function render(Varien_Object $row)   {
            $html = '<img id="' . $this->getColumn()->getId() . '" src="'.Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA).$row->getData($this->getColumn()->getIndex()) . '"';
            $html .= '/>';
            return $html;
        }
    }
    ?>

Answer 2

You can achieve this if you save your image in default media folder instead of media/{yourfolder}/imagename.jpg like change image path

media/{yourfolder}/imagename.jpg => media/imagename.jpg