Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange
2 correction in grammar
source | link

This is xml :

This is XML :

                 <field id="threesegmentimages" translate="label"  sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">   <label>Add Segment Detail</label>
                     <frontend_model>Namespace\Module\Block\Adminhtml\Form\Field\ThreeSegmentImage</frontend_model>
   <field id="threesegmentimages" translate="label"  sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">   <label>Add Segment Detail</label>
     <backend_model>Namespace\Module\Config\Backend\SegmentImage</backend_model>
                    <base_url type="media" scope_info="1">namespage/module<<frontend_model>Namespace\Module\Block\Adminhtml\Form\Field\ThreeSegmentImage</base_url>frontend_model>
                    <comment>Maximum 12 Segment Allowed< <backend_model>Namespace\Module\Config\Backend\SegmentImage</comment>backend_model>
               </field>

this is Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField.php

namespace Namespace\Module\Block\Adminhtml\Form\Field;
class SegmentImageField extends \Magento\Config\Block\System\Config\Form\Field
{
public function __construct(\Magento\Backend\Block\Template\Context $context, array $data =<base_url [])
{
parent::__construct($context,type="media" $data);
}scope_info="1">namespage/module</base_url>
protected function _toHtml() {
$html = '<input type="file" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';      
$html .= 'value="<%-<comment>Maximum '12 .Segment $this->getColumnName()Allowed</comment>
 .' %>" ';
$html .= 'class="' . $this->getClass() . '" ' . $this->getExtraParams() . '/> ';  
return $html;
}
} </field>

this is Namespace/Module/Block/Adminhtml/Form/Field/ThreeSegmentImage.php

this is Namespace/Module/Block/Adminhtml/Form/Field/ThreeSegmentImage.php

namespace Namespace\Module\Block\Adminhtml\Form\Field; 

use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray; 

class ThreeSegmentImage extends AbstractFieldArray
{
protected $renderer = [];
 private $_imageRenderer;
protected function _geImageColumnRenderer() { 
if( !$this->_imageRenderer ) {
  $this->_imageRenderer = $this->getLayout()->createBlock('Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField','',['data' => ['is_render_to_js_template' => true,]]);
    }
    return $this->_imageRenderer;
}
protected function _prepareToRender()
{
    $this->addColumn('three_segmentimage',['label' => __('Segment Image'),'size' => '50px', 'class' => 'required-entry', 'renderer' => $this->_geImageColumnRenderer()]);
    $this->_addAfter = false;;
    $this->_addButtonLabel = __('Add New Segment');
}
}

This is BackendModel :

namespace Namespace\Module\Config\Backend\;

class SegmentImage extends \Magento\Config\Model\Config\Backend\Image { /** * The tail part of directory path for uploading */

This is BackendModel :

namespace Namespace\Module\Config\Backend\;

class SegmentImage extends \Magento\Config\Model\Config\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     */

    const UPLOAD_DIR = 'namespage/module';

    /**
     * Upload max file size in kilobytes
     *
     * @var int
     */
    protected $_maxFileSize = 2048;

    /**
     * Return path to directory for upload file
     *
     * @return string
     */
    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
    }

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

    /**
     * Save uploaded file before saving config value
     *
     * Save changes and delete file if "delete" option passed
     *
     * @return $this
     */
    public function beforeSave()
    {
        $value = $this->getValue();
        $deleteFlag = is_array($value) && !empty($value['delete']);
        $fileTmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];

        if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
            $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
        }
        return parent::beforeSave();
    }
}

}

This is xml :

                 <field id="threesegmentimages" translate="label"  sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">   <label>Add Segment Detail</label>
                     <frontend_model>Namespace\Module\Block\Adminhtml\Form\Field\ThreeSegmentImage</frontend_model>
                    <backend_model>Namespace\Module\Config\Backend\SegmentImage</backend_model>
                    <base_url type="media" scope_info="1">namespage/module</base_url>
                    <comment>Maximum 12 Segment Allowed</comment>
               </field>

this is Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField.php

namespace Namespace\Module\Block\Adminhtml\Form\Field;
class SegmentImageField extends \Magento\Config\Block\System\Config\Form\Field
{
public function __construct(\Magento\Backend\Block\Template\Context $context, array $data = [])
{
parent::__construct($context, $data);
}
protected function _toHtml() {
$html = '<input type="file" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';      
$html .= 'value="<%- ' . $this->getColumnName() .' %>" ';
$html .= 'class="' . $this->getClass() . '" ' . $this->getExtraParams() . '/> ';  
return $html;
}
} 

this is Namespace/Module/Block/Adminhtml/Form/Field/ThreeSegmentImage.php

namespace Namespace\Module\Block\Adminhtml\Form\Field;
use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
class ThreeSegmentImage extends AbstractFieldArray
{
protected $renderer = [];
 private $_imageRenderer;
protected function _geImageColumnRenderer() { 
if( !$this->_imageRenderer ) {
  $this->_imageRenderer = $this->getLayout()->createBlock('Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField','',['data' => ['is_render_to_js_template' => true,]]);
    }
    return $this->_imageRenderer;
}
protected function _prepareToRender()
{
    $this->addColumn('three_segmentimage',['label' => __('Segment Image'),'size' => '50px', 'class' => 'required-entry', 'renderer' => $this->_geImageColumnRenderer()]);
    $this->_addAfter = false;;
    $this->_addButtonLabel = __('Add New Segment');
}
}

This is BackendModel :

namespace Namespace\Module\Config\Backend\;

class SegmentImage extends \Magento\Config\Model\Config\Backend\Image { /** * The tail part of directory path for uploading */

const UPLOAD_DIR = 'namespage/module';

/**
 * Upload max file size in kilobytes
 *
 * @var int
 */
protected $_maxFileSize = 2048;

/**
 * Return path to directory for upload file
 *
 * @return string
 */
protected function _getUploadDir()
{
    return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
}

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

/**
 * Save uploaded file before saving config value
 *
 * Save changes and delete file if "delete" option passed
 *
 * @return $this
 */
public function beforeSave()
{
    $value = $this->getValue();
    $deleteFlag = is_array($value) && !empty($value['delete']);
    $fileTmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];

    if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
        $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
    }
    return parent::beforeSave();
}

}

This is XML :

<field id="threesegmentimages" translate="label"  sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">
                     <field id="threesegmentimages" translate="label"  sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">   <label>Add Segment Detail</label>
                         <frontend_model>Namespace\Module\Block\Adminhtml\Form\Field\ThreeSegmentImage</frontend_model>
                        <backend_model>Namespace\Module\Config\Backend\SegmentImage</backend_model>
                        <base_url type="media" scope_info="1">namespage/module</base_url>
                        <comment>Maximum 12 Segment Allowed</comment>
                   </field>

this is Namespace/Module/Block/Adminhtml/Form/Field/ThreeSegmentImage.php

namespace Namespace\Module\Block\Adminhtml\Form\Field; 

use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray; 

class ThreeSegmentImage extends AbstractFieldArray
{
protected $renderer = [];
 private $_imageRenderer;
protected function _geImageColumnRenderer() { 
if( !$this->_imageRenderer ) {
  $this->_imageRenderer = $this->getLayout()->createBlock('Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField','',['data' => ['is_render_to_js_template' => true,]]);
    }
    return $this->_imageRenderer;
}
protected function _prepareToRender()
{
    $this->addColumn('three_segmentimage',['label' => __('Segment Image'),'size' => '50px', 'class' => 'required-entry', 'renderer' => $this->_geImageColumnRenderer()]);
    $this->_addAfter = false;;
    $this->_addButtonLabel = __('Add New Segment');
}
}

This is BackendModel :

namespace Namespace\Module\Config\Backend\;

class SegmentImage extends \Magento\Config\Model\Config\Backend\Image
{
    /**
     * The tail part of directory path for uploading
     */

    const UPLOAD_DIR = 'namespage/module';

    /**
     * Upload max file size in kilobytes
     *
     * @var int
     */
    protected $_maxFileSize = 2048;

    /**
     * Return path to directory for upload file
     *
     * @return string
     */
    protected function _getUploadDir()
    {
        return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
    }

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

    /**
     * Save uploaded file before saving config value
     *
     * Save changes and delete file if "delete" option passed
     *
     * @return $this
     */
    public function beforeSave()
    {
        $value = $this->getValue();
        $deleteFlag = is_array($value) && !empty($value['delete']);
        $fileTmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];

        if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
            $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
        }
        return parent::beforeSave();
    }
}
1
source | link

How to create a dynamic generated admin fields with Image upload?

This is xml :

                 <field id="threesegmentimages" translate="label"  sortOrder="3" showInDefault="1" showInWebsite="1" showInStore="1">   <label>Add Segment Detail</label>
                     <frontend_model>Namespace\Module\Block\Adminhtml\Form\Field\ThreeSegmentImage</frontend_model>
                    <backend_model>Namespace\Module\Config\Backend\SegmentImage</backend_model>
                    <base_url type="media" scope_info="1">namespage/module</base_url>
                    <comment>Maximum 12 Segment Allowed</comment>
               </field>

this is Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField.php

namespace Namespace\Module\Block\Adminhtml\Form\Field;
class SegmentImageField extends \Magento\Config\Block\System\Config\Form\Field
{
public function __construct(\Magento\Backend\Block\Template\Context $context, array $data = [])
{
parent::__construct($context, $data);
}
protected function _toHtml() {
$html = '<input type="file" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" ';      
$html .= 'value="<%- ' . $this->getColumnName() .' %>" ';
$html .= 'class="' . $this->getClass() . '" ' . $this->getExtraParams() . '/> ';  
return $html;
}
} 

this is Namespace/Module/Block/Adminhtml/Form/Field/ThreeSegmentImage.php

namespace Namespace\Module\Block\Adminhtml\Form\Field;
use Magento\Config\Block\System\Config\Form\Field\FieldArray\AbstractFieldArray;
class ThreeSegmentImage extends AbstractFieldArray
{
protected $renderer = [];
 private $_imageRenderer;
protected function _geImageColumnRenderer() { 
if( !$this->_imageRenderer ) {
  $this->_imageRenderer = $this->getLayout()->createBlock('Namespace\Module\Block\Adminhtml\Form\Field\SegmentImageField','',['data' => ['is_render_to_js_template' => true,]]);
    }
    return $this->_imageRenderer;
}
protected function _prepareToRender()
{
    $this->addColumn('three_segmentimage',['label' => __('Segment Image'),'size' => '50px', 'class' => 'required-entry', 'renderer' => $this->_geImageColumnRenderer()]);
    $this->_addAfter = false;;
    $this->_addButtonLabel = __('Add New Segment');
}
}

This is BackendModel :

namespace Namespace\Module\Config\Backend\;

class SegmentImage extends \Magento\Config\Model\Config\Backend\Image { /** * The tail part of directory path for uploading */

const UPLOAD_DIR = 'namespage/module';

/**
 * Upload max file size in kilobytes
 *
 * @var int
 */
protected $_maxFileSize = 2048;

/**
 * Return path to directory for upload file
 *
 * @return string
 */
protected function _getUploadDir()
{
    return $this->_mediaDirectory->getAbsolutePath($this->_appendScopeInfo(self::UPLOAD_DIR));
}

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

/**
 * Save uploaded file before saving config value
 *
 * Save changes and delete file if "delete" option passed
 *
 * @return $this
 */
public function beforeSave()
{
    $value = $this->getValue();
    $deleteFlag = is_array($value) && !empty($value['delete']);
    $fileTmpName = $_FILES['groups']['tmp_name'][$this->getGroupId()]['fields'][$this->getField()]['value'];

    if ($this->getOldValue() && ($fileTmpName || $deleteFlag)) {
        $this->_mediaDirectory->delete(self::UPLOAD_DIR . '/' . $this->getOldValue());
    }
    return parent::beforeSave();
}

}

I want result like this : enter image description here but not working can anyone help me to do this ?