Magento 2 How to create table setting with image upload in admin system configuration?

Question

I did it:

enter image description here

system.xml

<field id="active" translate="label" sortOrder="220" showInDefault="1" showInWebsite="1" showInStore="0">
 <label>active buy</label>
 <frontend_model>[Vendor]\[Ext]\Block\System\Config\Form\Field\Active</frontend_model>
 <backend_model>Magento\Config\Model\Config\Backend\Serialized\ArraySerialized</backend_model>
</field>

active.php

....
protected function _prepareToRender() {
 $this->addColumn('col_1', ['label' => __('Column 1'), 'renderer' => false]);
 $this->addColumn('col_2', ['label' => __('Column 2'), 'renderer' => false]);
 $this->_addAfter = false;
 $this->_addButtonLabel = __('Add');
 $this->_addAfter = false;
 $this->_addButtonLabel = __('Add');
}
...

Standart field upload image. enter image description here

As instead of "Column 2" to put the "Standart field upload image"? Need that all worked successfully when you click the add button.

Answer 1

For customizing of single column rendering, you need to add renderer in column configuration.

$fileInputRenderer = $this->getLayout()->createBlock(MyFileRenderer::class);
$this->addColumn(
 'col_2',
 [
 'label' => __('Column 2'),
 'renderer' => $fileInputRenderer
 ]
);

Custom renderer must extend from \Magento\Framework\View\Element\AbstractBlock and must renderer template for column cell.

Example:

class MyFileRenderer extends \Magento\Framework\View\Element\AbstractBlock
{
 /**
 * {@inheritdoc}
 */
 protected function _toHtml()
 {
 $column = $this->getColumn();
 return '<input type="file" />';
 }
}

Note, that html rendering in PHP class is not good idea, you can use *.phtml template file for this.

• user3608884: Thanks. It good worked. But how upload image in media magento?
• Max: This is just another question. I think, that you need to use Ajax file uploading with js components for fill configuration values. Alternatively you can add custom plugin or observer for saving of requested images.
• HaFiz Umer: @Max col_2 values are not save in database also. Please check this