How to Create Custom Image Uploader Attribute in Category with Drag & Drop Option
Create registration.php file inside app/code/Webcreta/CustomImage folder
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Webcreta_CustomImage', __DIR__ );
Create module.xml file inside app/code/Webcreta/CustomImage/etc folder
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Webcreta_CustomImage" setup_version="1.0.0" />
</config> Create InstallData.php file inside app/code/Webcreta/CustomImage/Setup folder
<?php
namespace Webcreta\CustomImage\Setup;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
/**
* @codeCoverageIgnore
*/
class InstallData implements InstallDataInterface
{
/**
* EAV setup factory.
*
* @var EavSetupFactory
*/
private $_eavSetupFactory;
protected $categorySetupFactory;
/**
* Init.
*
* @param EavSetupFactory $eavSetupFactory
*/
public function __construct(EavSetupFactory $eavSetupFactory, \Magento\Catalog\Setup\CategorySetupFactory $categorySetupFactory)
{
$this->_eavSetupFactory = $eavSetupFactory;
$this->categorySetupFactory = $categorySetupFactory;
}
/**
* {@inheritdoc}
*
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(
ModuleDataSetupInterface $setup,
ModuleContextInterface $context
) {
/** @var EavSetup $eavSetup */
$eavSetup = $this->_eavSetupFactory->create(['setup' => $setup]);
$setup = $this->categorySetupFactory->create(['setup' => $setup]);
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY, 'custom_image', [
'type' => 'varchar',
'label' => 'Custom Image',
'input' => 'image',
'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
'required' => false,
'sort_order' => 9,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'General Information',
]
);
}
}
Create a category_form.xml file inside app/code/Webcreta/CustomImage/view/adminhtml/ui_component folder
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="content">
<field name="custom_image">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">category</item>
<item name="label" xsi:type="string" translate="true">Custom Image</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">imageUploader</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">false</item>
<item name="sortOrder" xsi:type="number">40</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="customimage/category_image/upload"/>
</item>
</item>
</argument>
</field>
</fieldset>
</form> Create di.xml file inside app/code/Webcreta/CustomImage/etc folder
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Webcreta\CustomImage\Controller\Adminhtml\Category\Image\Upload">
<arguments>
<argument name="imageUploader" xsi:type="object">Magento\Catalog\CategoryImageUpload</argument>
</arguments>
</type>
<virtualType name="Magento\Catalog\CategoryImageUpload" type="Magento\Catalog\Model\ImageUploader">
<arguments>
<argument name="baseTmpPath" xsi:type="string">catalog/tmp/category</argument>
<argument name="basePath" xsi:type="string">catalog/category</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>
<preference for="Magento\Catalog\Model\Category\DataProvider" type="Webcreta\CustomImage\Model\Category\DataProvider" />
</config>
create routes.xml file inside app/code/Webcreta/CustomImage/etc/adminhtml folder
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="customimage" frontName="customimage">
<module name="Webcreta_CustomImage" before="Magento_Backend" />
</route>
</router>
</config> Create Upload.php file inside app/code/Webcreta/CustomImage/Controller/Adminhtml/Category/Image folder
<?php
namespace Webcreta\CustomImage\Controller\Adminhtml\Category\Image;
use Magento\Framework\Controller\ResultFactory;
/**
* Agorae Adminhtml Category Image Upload Controller
*/
class Upload extends \Magento\Backend\App\Action
{
/**
* Image uploader
*
* @var \Magento\Catalog\Model\ImageUploader
*/
protected $imageUploader;
/**
* Uploader factory
*
* @var \Magento\MediaStorage\Model\File\UploaderFactory
*/
private $uploaderFactory;
/**
* Media directory object (writable).
*
* @var \Magento\Framework\Filesystem\Directory\WriteInterface
*/
protected $mediaDirectory;
/**
* Store manager
*
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* Core file storage database
*
* @var \Magento\MediaStorage\Helper\File\Storage\Database
*/
protected $coreFileStorageDatabase;
/**
* @var \Psr\Log\LoggerInterface
*/
protected $logger;
/**
* 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,
\Magento\MediaStorage\Model\File\UploaderFactory $uploaderFactory,
\Magento\Framework\Filesystem $filesystem,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\MediaStorage\Helper\File\Storage\Database $coreFileStorageDatabase,
\Psr\Log\LoggerInterface $logger
) {
parent::__construct($context);
$this->imageUploader = $imageUploader;
$this->uploaderFactory = $uploaderFactory;
$this->mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
$this->storeManager = $storeManager;
$this->coreFileStorageDatabase = $coreFileStorageDatabase;
$this->logger = $logger;
}
/**
* Check admin permissions for this controller
*
* @return boolean
*/
protected function _isAllowed()
{
return $this->_authorization->isAllowed('Webcreta_CustomImage::category');
}
/**
* Upload file controller action
*
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
try {
$result = $this->imageUploader->saveFileToTmpDir('custom_image');
$result['cookie'] = [
'name' => $this->_getSession()->getName(),
'value' => $this->_getSession()->getSessionId(),
'lifetime' => $this->_getSession()->getCookieLifetime(),
'path' => $this->_getSession()->getCookiePath(),
'domain' => $this->_getSession()->getCookieDomain(),
];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
}
} Create DataProvider.php file inside app/code/Webcreta/CustomImage/Model/Category folder
<?php
namespace Webcreta\CustomImage\Model\Category;
class DataProvider extends \Magento\Catalog\Model\Category\DataProvider
{
protected function getFieldsMap()
{
$fields = parent::getFieldsMap();
$fields['content'][] = 'custom_image'; // custom image field
return $fields;
}
} Create di.xml file inside app/code/Webcreta/CustomImage/etc/adminhtml folder
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\Controller\Adminhtml\Category\Save">
<plugin name="webcreta_image_preprocessing" type="Webcreta\CustomImage\Plugin\Catalog\Controller\Adminhtml\Category\SavePlugin" />
</type>
</config> Create SavePlugin.php file inside app/code/Webcreta/CustomImage/Plugin/Catalog/Controller/Adminhtml/Category folder
<?php
namespace Webcreta\CustomImage\Plugin\Catalog\Controller\Adminhtml\Category;
use Magento\Catalog\Controller\Adminhtml\Category\Save as SaveController;
class SavePlugin
{
/**
* Add additional images
*
* @param SaveController $subject
* @param array $data
* @return array
*/
public function beforeImagePreprocessing(SaveController $subject, $data)
{
foreach ($this->getAdditionalImages() as $imageType) {
if (empty($data[$imageType])) {
unset($data[$imageType]);
$data[$imageType]['delete'] = true;
}
}
return [$data];
}
/**
* Get additional Images
*
* @return array
*/
protected function getAdditionalImages() {
return ['custom_image'];
}
}
Related Posts
