How to add image uploader as like in the category?


Reference Link : Click Here

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 name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="vendor_module/index/upload"/>

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">
        <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>
<type name="VendorName\ModuleName\Controller\Adminhtml\Index\Upload">
        <argument name="imageUploader" xsi:type="object">VirtualTypeName</argument>
<!-- End Image Uploader -->

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


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
    ) {
        $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.

  • where to define the image directory path?
    – jojo
    Mar 30 '20 at 2:39

in form`s.xml where path="vendor_module/index/upload" instead "vendor_module" we have to past our "admin_rote"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.