Skip to content

How to add image/file uploader in dynamic rows component?

I added below code and when i upload image it shows me this error
enter image description here

ui_component xml file

Dynamic Rows
Magento_Ui/js/dynamic-rows/record

true
true
false

                <field name="colour_image">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataType" xsi:type="string">string</item>
                            <item name="label" xsi:type="string" translate="true">Image</item>
                            <item name="visible" xsi:type="boolean">true</item>
                            <item name="formElement" xsi:type="string">fileUploader</item>
                            <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                            <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                            <item name="required" xsi:type="boolean">true</item>
                            <item name="validation" xsi:type="array">
                                <item name="required-entry" xsi:type="boolean">true</item>
                            </item>
                            <item name="uploaderConfig" xsi:type="array">
                                <item name="url" xsi:type="url" path="fabrics/index/upload"/>
                            </item>
                        </item>
                    </argument>
                </field>
 

               <field name="color">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="label" xsi:type="string" translate="true">Color</item>
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="dataScope" xsi:type="string">color</item>
                            <item name="showFallbackReset" xsi:type="boolean">false</item>
                            <item name="validation" xsi:type="array">
                                <item name="required-entry" xsi:type="boolean">true</item>
                            </item>
                            <item name="sortOrder" xsi:type="string">10</item>
                        </item>
                    </argument>
                </field>

                  <actionDelete>
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="componentType" xsi:type="string">actionDelete</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="fit" xsi:type="boolean">false</item>
                            <item name="label" xsi:type="string">Actions</item>
                            <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                            <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete
                            </item>
                        </item>
                    </argument>
                </actionDelete>
            </container>
        </container>

di.xml

<!-- Image Uploader -->
<virtualType name="customImageuploader" type="MagentoCatalogModelImageUploader">
    <arguments>
        <argument name="baseTmpPath" xsi:type="string">colours/tmp/image</argument>
        <argument name="basePath" xsi:type="string">colours/image</argument>
        <argument name="allowedExtensions" xsi:type="array">
            <item name="jpg" xsi:type="string">jpg</item>
            <item name="jpeg" xsi:type="string">jpeg</item>
            <item name="gif" xsi:type="string">gif</item>
            <item name="png" xsi:type="string">png</item>
        </argument>
    </arguments>
</virtualType>
<type name="CompanyModuleControllerAdminhtmlIndexUpload">
    <arguments>
        <argument name="imageUploader" xsi:type="object">customImageuploader</argument>
    </arguments>
</type>
<!-- End Image Uploader -->

CompanyModuleControllerAdminhtmlIndexUpload.php

  <?php

namespace CompanyModuleControllerAdminhtmlIndex;

use MagentoFrameworkControllerResultFactory;

class Upload extends MagentoBackendAppAction {
/**
 * Image uploader
 *
 * @var MagentoCatalogModelImageUploader
 */
protected $imageUploader;

/**
 * Upload constructor.
 *
 * @param MagentoBackendAppActionContext $context
 * @param MagentoCatalogModelImageUploader $imageUploader
 */
public function __construct(
    MagentoBackendAppActionContext $context,
    MagentoCatalogModelImageUploader $imageUploader
) {
    parent::__construct($context);
    $this->imageUploader = $imageUploader;
}

/**
 * Upload file controller action.
 *
 * @return MagentoFrameworkControllerResultInterface
 */
public function execute() {
    $imageUploadId = $this->_request->getParam('param_name', 'colour_image');
    
    try {
        $imageResult = $this->imageUploader->saveFileToTmpDir($imageUploadId);

        $imageResult['cookie'] = [
            'name' => $this->_getSession()->getName(),
            'value' => $this->_getSession()->getSessionId(),
            'lifetime' => $this->_getSession()->getCookieLifetime(),
                'path' => $this->_getSession()->getCookiePath(),
                'domain' => $this->_getSession()->getCookieDomain(),
            ];
        } catch (Exception $e) {
            $imageResult = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
        }
        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($imageResult);
    }
}