Magento 2 Dynamic rows with upload image in admin module not in system configuration

Question

I have created a custom module which have dynamic rows. I have added Image field there with dropdown and some other text field. But when I am trying to save input type file is not getting in post request but when i changed to text it is working fine.

/**
 * Prepare to render
 *
 * @return void
 */
protected function _prepareToRender() {
 $this->addColumn(
 'image_thumb', [
 'label' => __('Thumbnail'),
 'renderer' => $this->getImageColumnRenderer()
 ]
 );
 $this->_addAfter = false;
 $this->_addButtonLabel = __('Add');
}
/**
 * Image Column Renderer
 *
 * @param string $columnName
 * @return string
 * @throws \Exception
 */
protected function getImageColumnRenderer() {
 if (!$this->_imageRenderer) {
 $this->_imageRenderer = $this->getLayout()->createBlock(
 \Namespace\Module\Block\Adminhtml\Form\Field\Thumbnail::class, '', ['data' => ['is_render_to_js_template' => true]]
 );
 }
 return $this->_imageRenderer;
}

Namespace\Module\Block\Adminhtml\Form\Field\Thumbnail.php

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

/**
 * Class Thumbnail
 */
class Thumbnail extends \Magento\Framework\View\Element\AbstractBlock
{
 /**
 * @return image html
 */
 protected function _toHtml()
 {
 $html = '<input type="file" name="' . $this->getInputName() . '" id="' . $this->getInputId() . '" />';
 return $html;
 }
}

If you guys have any Idea please share

Any help will be appreciated

Answer 1

I think one of the alternative approach you can follow is, override Magento_Config::system/config/form/field/array.phtml only when it is called from your module and add value of the images in the hidden field which you can get when you save the form.

In your dynamic row php class you can override this file just by adding below code

protected $_template = 'Vendor_Module::array_extended.phtml';

Add array_extended.phtml file in view/adminhtml/templates folder of your module.

Inside _toHtml() function of Thumbnail class you can add one hidden field like below

 $html .= '<input type="hidden" name="uploaded_image_' . $this->getInputId() . '" id="uploaded_image_' . $this->getInputId() . '" value="">'; 

And in the extended phtml file you can set the value via js.

Around line 124 you will see code like

var rowInputElementNames = Object.keys(rowData.column_values);
for (var i = 0; i < rowInputElementNames.length; i++) {
 .... //remaining code

There you can add value of the hidden field like

document.getElementById("uploaded_image_" + rowInputElementNames[i]).value = rowData.column_values[rowInputElementNames[i]];

• Jaisa: i have tried as you said, but nothing works