Magento 2 : How to add image upload in ui form
-
14-04-2021 - |
Question
How to add image uploader as like in the category?
Solution
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>
<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.
OTHER TIPS
in form`s.xml where path="vendor_module/index/upload" instead "vendor_module" we have to past our "admin_rote"