Magento – Image Preview in admin form magento 2

image-previewimage-uploadmagento2PHP

I have admin form in which I have image upload option,
everything is working fine, but I am not able to figure out, how to display preview of uploaded image.

It will be great help if someone can help me with this.
thanks

Best Answer

Namespace: Book

ModuleName: Flip

Add addType() in admin form

 $fieldset->addType(
        'image',
        '\Book\Flip\Block\Adminhtml\Flip\Renderer\Image'
        );

Now create renderer block(Image.php) at

Book\Flip\Block\Adminhtml\Flip\Renderer

Copy this code

<?php

namespace Book\Flip\Block\Adminhtml\Flip\Renderer;

class Image extends \Magento\Framework\Data\Form\Element\Image
{
    protected function _getUrl()
    {   
        $url = 'book'.$this->getValue(); // book is image directory
        return $url;
    }
}

Now you can see image on admin form.

Related Solutions

Magento – How to Create Multiple Custom Image Uploader Forms

Finally i found solution for more than one image upload in that custom form.Its simple concept for adding image upload more than one in custom form.Here following procedure for that image upload concept:

Step:1

Image file : Block/Adminhtml/Next/Edit/Tab/Image.php add custom image field tag in that image file.

[...]     
$fieldset->addField('collar_image', 'image', array(
            'name'      => 'collar_image',
            'label'     => Mage::helper('measurement_setter')->__('collar Image'),
            'title'     => Mage::helper('measurement_setter')->__('collar Image'),
            'required'  => true,
            'disabled'  => $isElementDisabled
        ));

 [...]

Step:2

Controller File: controllers/Adminhtml/[ModuleName]Controller.php Add that below line into saveAction()function.

//Assign that values 
 if (isset($data['collar_image'])) {
                $collar_imageData = $data['collar_image'];
                unset($data['collar_image']);
            } else {
                $collar_imageData = array();
            }
  //collar Remove Image
                if (isset($collar_imageData['delete']) && $model->getCollar_image()) {
                    $imageHelper->removeImage($model->getCollar_image());
                    $model->setCollar_image(null);
                } 
//Upload new Collar Image upload tag
$imageFile = $imageHelper->uploadImage('collar_image');
                if ($imageFile) {
                    if ($model->getCollar_image()) {
                        $imageHelper->removeImage($model->getCollar_image());
                    }
                    $model->setCollar_image($imageFile);
                }

And then you can clear cache and index section in Var/Cache and Var/Index.

NOTICE:

[Modulename] =>your module name

How to Preview Uploaded Image in Custom Module Form in Magento 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.

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;
        }
    }
    ?>

Best Answer

Related Solutions

Magento – How to Create Multiple Custom Image Uploader Forms

How to Preview Uploaded Image in Custom Module Form in Magento 1

Related Topic