magento 2 : Display Uploaded image in admin form custom module

Question

I created one form in frontend and from form i submit customer details and also upload one image.

For display all above form data i created admin grid.For show details of grid data while click on grid row i want to show all data don't want to edit or save only show details.But i can't display uploaded image.Please help me to show image in admin form.

My form data as follows :

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/**
 * Newsletter Template Edit Form Block
 *
 * @author Magento Core Team <[email protected]>
 */
namespace [Vendor]\[Module_name]\Block\Adminhtml\Quotation\Edit;
use Magento\Store\Model\StoreManagerInterface;
class Form extends \Magento\Backend\Block\Widget\Form\Generic {
 /**
 * @var \Sample\Gridpart2\Helper\Option
 */
 protected $_statusOption;
 protected $_storeManager;
 protected $_productloader;
 /**
 * @param \Magento\Backend\Block\Template\Context $context
 * @param \Magento\Framework\Registry $registry
 * @param \Magento\Framework\Data\FormFactory $formFactory
 * @param \Magento\Cms\Model\Wysiwyg\Config $wysiwygConfig
 * @param array $data
 */
 public function __construct(
 \Magento\Backend\Block\Template\Context $context, \Magento\Framework\Registry $registry, \Magento\Framework\Data\FormFactory $formFactory, StoreManagerInterface $storemanager, \Magento\Catalog\Model\ProductFactory $_productloader,
// \Sample\Gridpart2\Helper\Option $optionData,
 array $data = []
 ) {
//$this->_statusOption = $optionData;
 $this->_productloader = $_productloader;
 parent::__construct($context, $registry, $formFactory, $data);
 }
 /**
 * Retrieve template object
 *
 * @return \Magento\Newsletter\Model\Template
 */
 public function getLoadProduct($id) {
 return $this->_productloader->create()->load($id);
 }
 public function getModel() {
 return $this->_coreRegistry->registry('cart2quote_quotation');
 }
 protected function _prepareForm() {
 $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
 \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
 );
 $model = $this->getModel();
 /** @var \Magento\Framework\Data\Form $form */
 $form = $this->_formFactory->create(
 ['data' => ['id' => 'edit_form', 'action' => $this->getData('action'), 'method' => 'post']]
 );
 $imageUrl = $mediaDirectory . 'cart2quote/images/' . $model->getLogoImage();
 $flag = false;
 if ($model->getLogoImage()) {
 $flag = true;
 }
 $fieldset = $form->addFieldset(
 'base_fieldset', ['legend' => __('Quotation Information'), 'class' => 'fieldset-wide']
 );
 if ($model->getId()) {
 $fieldset->addField('id', 'hidden', ['name' => 'id', 'value' => $model->getId()]);
 }
 $fieldset->addField(
 'product_id', 'label', [
 'name' => 'product_id',
 'label' => __('Product Name'),
 'title' => __('Product Name'),
 'value' => $this->getLoadProduct($model->getProductId())->getName()
 ]
 );
 $fieldset->addField(
 'quote_type', 'label', [
 'name' => 'quote_type',
 'label' => __('Quotation Type'),
 'title' => __('Quotation Type'),
 'value' => $model->getQuoteType()
 ]
 );
 $fieldset->addField(
 'company', 'label', [
 'name' => 'company',
 'label' => __('Company'),
 'title' => __('Company'),
 'value' => $model->getCompany()
 ]
 );
 $fieldset->addField(
 'salutation', 'label', [
 'name' => 'salutation',
 'label' => __('Salutation'),
 'title' => __('Salutation'),
 'value' => $model->getSalutation()
 ]
 );
 $fieldset->addField(
 'first_name', 'label', [
 'name' => 'first_name',
 'label' => __('First Name'),
 'title' => __('First Name'),
 'value' => $model->getFirstName()
 ]
 );
 $fieldset->addField(
 'last_name', 'label', [
 'name' => 'last_name',
 'label' => __('Last Name'),
 'title' => __('Last Name'),
 'value' => $model->getLastName()
 ]
 );
 $fieldset->addField(
 'street', 'label', [
 'name' => 'street',
 'label' => __('Street'),
 'title' => __('Street'),
 'value' => $model->getStreet()
 ]
 );
 $fieldset->addField(
 'number', 'label', [
 'name' => 'number',
 'label' => __('Number'),
 'title' => __('Number'),
 'value' => $model->getNumber()
 ]
 );
 $fieldset->addField(
 'zipcode', 'label', [
 'name' => 'zipcode',
 'label' => __('Zip Code'),
 'title' => __('Zip Code'),
 'value' => $model->getZipcode()
 ]
 );
 $fieldset->addField(
 'city', 'label', [
 'name' => 'city',
 'label' => __('City'),
 'title' => __('City'),
 'value' => $model->getCity()
 ]
 );
 $fieldset->addField(
 'country', 'label', [
 'name' => 'country',
 'label' => __('Country'),
 'title' => __('Country'),
 'value' => $model->getCountry()
 ]
 );
 $fieldset->addField(
 'email', 'label', [
 'name' => 'email',
 'label' => __('Email'),
 'title' => __('Email'),
 'value' => $model->getEmail()
 ]
 );
 $fieldset->addField(
 'phone', 'label', [
 'name' => 'phone',
 'label' => __('Phone'),
 'title' => __('Phone'),
 'value' => $model->getPhone()
 ]
 );
 $fieldset->addField(
 'extra_info', 'label', [
 'name' => 'extra_info',
 'label' => __('Extra Information'),
 'title' => __('Extra Information'),
 'value' => $model->getExtraInfo()
 ]
 );
 $fieldset->addField(
 'message', 'label', [
 'name' => 'message',
 'label' => __('Message'),
 'title' => __('Message'),
 'value' => $model->getMessage()
 ]
 );
 $fieldset->addField(
 'delivery_date', 'label', [
 'name' => 'delivery_date',
 'label' => __('Delivery Date'),
 'title' => __('Delivery Date'),
 'value' => $model->getDeliveryDate()
 ]
 );
 $fieldset->addField(
 'delivery_date_status', 'label', [
 'name' => 'delivery_date_status',
 'label' => __('Delivery Date Status'),
 'title' => __('Delivery Date Status'),
 'value' => $model->getDeliveryDateStatus()
 ]
 );
 if ($flag === true) {
 $fieldset->addField(
 'logo_image', 'label', [
 'name' => 'logo_image',
 'label' => __('Logo Image'),
 'title' => __('Logo Image'),
 'value' => '<img src="' . $imageUrl . '" width="50"/>',
 ]
 );
 // $renderer = $this->getLayout()->createBlock('[Vendor]\[Module Name]\Block\Adminhtml\Quotation\Renderer\LogoImage');
 //$logo_html->setRenderer($renderer);
 }
 $form->setAction($this->getUrl('*/* /save'));
 $form->setUseContainer(true);
 $this->setForm($form);
 return parent::_prepareForm();
 }
}

• Vishwas Bhatnagar: Share code what is not working , how else will ppl know what is the issue with the code ?
• Sneha Panchal: please check Form.php code in my que just updated
• Ramkishan Suthar: You should provide more info this is not sufficient to answer ?
• Sneha Panchal: but i just want to display image now it display img tag as a value not image preview so for that above code sufficient
• Jackson: github.com/tzyganu/Magento2SampleModule This will help u

Answer 1

if ($flag === true) {
 $fieldset->addField(
 'logo_image', 'label', [
 'name' => 'logo_image',
 'label' => __('Logo Image'),
 'title' => __('Logo Image'),
 'renderer' => '[Vendor]\[Module Name]\Block\Adminhtml\Quotation\Renderer\LogoImage',
 ]
 );
}

In LogoImage.php

<?php
namespace [Vendor]\[Module Name]\Block\Adminhtml\Quotation\Renderer;
use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\Object;
use Magento\Store\Model\StoreManagerInterface;
class LogoImage extends AbstractRenderer
{
 private $_storeManager;
 /**
 * @param \Magento\Backend\Block\Context $context
 * @param array $data
 */
 public function __construct(\Magento\Backend\Block\Context $context, 
StoreManagerInterface $storemanager, array $data = [])
 {
 $this->_storeManager = $storemanager;
 parent::__construct($context, $data);
 $this->_authorization = $context->getAuthorization();
 }
 /**
 * Renders grid column
 *
 * @param Object $row
 * @return string
 */
 public function render(Object $row)
 {
 $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
 \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
 );
 $imageUrl = $mediaDirectory.'cart2quote/images/'.$this->_getValue($row);
 return '<img src="'.$imageUrl.'" width="50"/>';
 }
}

• sudo55: i have use the above way, but my image is not visible.

Answer 2

Image Form id field_name

Form.php

$fieldset->addType('productimage', '\Vendor\Module\Block\Adminhtml\Post\Renderer\Image');
$fieldset->addField('field_name', 'productimage', array( 
 'label' => __('Image')));

Image.php

<?php
namespace Vendor\Module\Block\Adminhtml\Post\Renderer;
use Magento\Store\Model\StoreManagerInterface;
class Image extends \Magento\Framework\Data\Form\Element\AbstractElement
{ 
 private $_storeManager;
 /**
 * @param \Magento\Backend\Block\Context $context
 * @param array $data
 */
 public function __construct(\Magento\Backend\Block\Context $context, 
StoreManagerInterface $storemanager, array $data = [])
 {
 $this->_storeManager = $storemanager;
 parent::__construct($context, $data);
 }
 /**
 * get category name
 * @param DataObject $row
 * @return string
 */
 public function getElementHtml()
 {
 // here you can write your code.
 $html = '';
 if ($this->getValue()) 
 {
 $html = $this->getMediaImageHtml($this->getValue());
 } 
 return $html;
 }
 public function getMediaImageHtml($imageName)
 {
 $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
 \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
 );
 $Image = $this->getValue(); 
 $html = "<img src='".$mediaDirectory.$Image."' height='250px' width='250px'>"; 
 return $html;
 }
}

• hardik malkani: This is ok, but works only if we have single image. What if we have multiple images coming into $this->getValue with comma seperated ? Like abc.png , xyz.png ? I have the similar case, i did explode and make $html as array but multiple images not coming up. Please help if anyone has solution for this