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

Question

I did it:

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.

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.