1 of 2
Abdul Kadir
  • 316
  • 2
  • 10

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 ?

Abdul Kadir
  • 316
  • 2
  • 10