Magento 2 create category attribute thumbnail and upload image using File Uploader Component

Question

I've created a custom module to display category thumbnail image. I've read magento dev doc It is displayed in my category section using category_form.xml

<?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="thumbnail">
 <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">Thumbnail 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">false</item>
 <item name="sortOrder" xsi:type="number">30</item>
 <item name="uploaderConfig" xsi:type="array">
 <item name="url" xsi:type="url" path="categorylist/category_thumbnailimage/upload"/>
 </item>
 </item>
 </argument>
 </field>
 </fieldset>
</form>

when i upload image i showing following error

1 exception(s):
Exception #0 (BadMethodCallException): Missing required argument $baseTmpPath of Magento\Catalog\Model\ImageUploader.
Exception #0 (BadMethodCallException): Missing required argument $baseTmpPath of Magento\Catalog\Model\ImageUploader.

my controller file is

<?php
namespace Company\Categorylist\Controller\Adminhtml\Category\Thumbnailimage;
use Magento\Framework\Controller\ResultFactory;
/**
 * Class Upload
 */
class Upload extends \Magento\Backend\App\Action
{
 protected $baseTmpPath;
 /**
 * 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;
 parent::__construct($context);
 }
 public function execute() {
 try {
 $result = $this->imageUploader->saveFileToTmpDir('thumbnail');
 $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);
 }
}

Answer 1

you need to add this in the di.xml of your module.

<type name="Company\Categorylist\Controller\Adminhtml\Category\Thumbnailimage\Upload">
 <arguments>
 <argument name="imageUploader" xsi:type="object">Magento\Catalog\CategoryImageUpload</argument>
 </arguments>
</type>

this is needed because the dependency of your controller called imageUploader is an instance of \Magento\Catalog\Model\ImageUploader. This is just a general class for upload that does not have the base path and base tmp path set. So it does not know where to upload the files.
But in the etc/di.xml file of the catalog module you have this virtual type defined:

<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>

This means that Magento\Catalog\CategoryImageUpload class does not actually exist, but when this is used you will actually use an instance of the class you are expecting Magento\Catalog\Model\ImageUploader but it has the required member vars (basePath, baseTmpPath and allowedExtensions) already set.

• Amit Bera: marius, i have directly pastebin.com/Qn8dX3Zz add the code at vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml and getting the error The file was not uploaded. error
• Amit Bera: why i getting this error
• Marius: maybe because the file was not uploaded? I don't know exactly why
• Magento2 Devloper: Hi, @Marius. After saving category image not display in position.
• Phoenix128_RiccardoT: Check this out: belvg.com/blog/…

Answer 2

Please check this issue on github category image attribute issue

Answer 3

If you want to create you own $baseTmpPath and $basePath, then you gonna need to do this after @Marius solution.
Put this in your Upload.php

public function execute()
{
 $imageId = $this->_request->getParam('param_name', 'image');
 try {
 $this->imageUploader->setBaseTmpPath('Aht_BannerSlider/tmp/images');
 $this->imageUploader->setBasePath('Aht_BannerSlider/images');
// some code ...

For example: Aht_BannerSlider is my module name.
Thanks @Marius

• Dhaduk Mitesh: After saving the model, image save in Aht_BannerSlider/images path?
• fudu: i think so, its a long time since i posted this answer, so you can try by your own. :)
• Dhaduk Mitesh: It is save in Aht_BannerSlider/tmp/images path while upload image. But not save to Aht_BannerSlider/images path.