Magento 2 : How to add image upload in ui form

Question

How to add image uploader as like in the category?

Answer 1

Follow this below steps to add image uploader in ui form :

1) Add this below code in your form's xml file :

<field name="review_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="vendor_module/index/upload"/>
            </item>
        </item>
    </argument>
</field>

2) Now, you need to create virtualType of Image uploader in di.xml file. Add this below code in your di.xml file :

<!-- Image Uploader -->
<virtualType name="VirtualTypeName" type="Magento\Catalog\Model\ImageUploader">
    <arguments>
        <argument name="baseTmpPath" xsi:type="string">productreview/tmp/image</argument>
        <argument name="basePath" xsi:type="string">productreview/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="VendorName\ModuleName\Controller\Adminhtml\Index\Upload">
    <arguments>
        <argument name="imageUploader" xsi:type="object">VirtualTypeName</argument>
    </arguments>
</type>
<!-- End Image Uploader -->

3) Now, create controller upload.php and add this below code :

<?php

namespace VendorName\ModuleName\Controller\Adminhtml\Index;

use Magento\Framework\Controller\ResultFactory;

class Upload extends \Magento\Backend\App\Action {
    /**
     * Image uploader
     *
     * @var \Magento\Catalog\Model\ImageUploader
     */
    protected $imageUploader;

    /**
     * Upload constructor.
     *
     * @param \Magento\Backend\App\Action\Context $context
     * @param \Magento\Catalog\Model\ImageUploader $imageUploader
     */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Catalog\Model\ImageUploader $imageUploader
    ) {
        parent::__construct($context);
        $this->imageUploader = $imageUploader;
    }

    /**
     * Upload file controller action.
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute() {
        $imageUploadId = $this->_request->getParam('param_name', 'review_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);
    }
}

4) Then, you need to add js file in requirejs-config.js file. Add this below code in your requirejs-config.js file :

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {
            'Magento_Ui/js/form/element/file-uploader': 'VendorName_ModuleName/js/form/element/file-uploader'
        }
    }
};

5) Then, copy js file from /vendor/magento/module-ui/view/base/web/js/form/element/file-uploader.js and add into VendorName_ModuleName/js/form/element/file-uploader folder.

Refresh it and check it.