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 : but not working can anyone help me to do this ?