Ui form: image field in Magento 2.2

Question

I need to create a image upload field in my Ui form.

I have created below files.

But while trying to upload an image, it shows a below error.

Please suggest me a solution to save a image in DB. I got following error

Upload.php

<?php

namespace OX\HomeSlider\Controller\Adminhtml\HomeSlider\Image;

use Magento\Framework\Controller\ResultFactory;

/**
 * Class Upload
 */
class Upload extends \Magento\Backend\App\Action
{

    /**
     * Image uploader
     *
     * @var \Namespace\Module\Model\ImageUploader
     */
    protected $imageUploader;

    /**
     * @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;
    }

    /**
     * Check admin permissions for this controller
     *
     * @return boolean
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('OX_HomeSlider::HomeSlider');
    }

    /**
     * Upload file controller action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {

        try {
            $result = $this->imageUploader->saveFileToTmpDir('image');

        } catch (\Exception $e) {
            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
        }
        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
    }

}

di.xml

<virtualType name="OXHomeSliderImageUploader" type="Magento\Catalog\Model\ImageUploader">
        <arguments>
            <argument name="baseTmpPath" xsi:type="string">homeslider/tmp</argument>
            <argument name="basePath" xsi:type="string">homeslider</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="OX\HomeSlider\Controller\Adminhtml\HomeSlider\Image\Upload">
        <arguments>
            <argument name="imageUploader" xsi:type="object">OXHomeSliderImageUploader</argument>
        </arguments>
    </type>

ox_homeslider_form.xml

<field name="image" formElement="fileUploader">
            <settings>
                <notice translate="true">Allowed file types: jpeg, gif, png.</notice>
                <label translate="true">Image</label>
                <componentType>fileUploader</componentType>
            </settings>
            <formElements>
                <fileUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>2097152</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">ox_homeslider/homeslider_image/upload</param>
                        </uploaderConfig>
                    </settings>
                </fileUploader>
            </formElements>
        </field>

save.php

namespace OX\HomeSlider\Controller\Adminhtml\Post;

class Save extends \Magento\Backend\App\Action
{

    public function __construct(
    \Magento\Backend\App\Action\Context $context, \Magento\Backend\Model\View\Result\RedirectFactory $resultRedirectFactory
    )
    {
        $this->resultRedirectFactory = $resultRedirectFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $id = $this->getRequest()->getParam('id');
        $postModel = $this->_objectManager->create('OX\HomeSlider\Model\Post');

        if ($id) {
            $postModel = $postModel->load($id);
        }  
        $post = $this->getRequest()->getParams();

        if(empty($post['id'])) {
             $post['id'] = null;
         }
        $postModel->setData($post);
        $postModel->save();
        return $this->resultRedirectFactory->create()->setPath('homeslider/post/index');
        return $result;
    }

}

Can you show up your controller used for save image in filesystem? — Nolwennig
– Nolwennig, Commented Nov 14, 2017 at 10:44
Can you show up your controller used for save image path in database? — Nolwennig
– Nolwennig, Commented Nov 14, 2017 at 10:44
After uploading a image which is stored in pub/media folder. But it is not visible in grid and also Not saved in DB.. and that server error remains same. Am i need to change grid.xml for image to store image in DB — Jaisa
– Jaisa, Commented Nov 15, 2017 at 7:14

Piyush · Accepted Answer · 2017-11-14 14:06:46Z

it is giving error because of this code

<uploaderConfig>
     <param xsi:type="string" name="url">theme/design_config_fileUploader/save</param>
</uploaderConfig>

Reason is the mentioned url theme/design_config_fileUploader/save may not exist or having wrong code.

you can refer category edit form and uploaded action for this, below are the path for files

Category Form

vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml

Upload Action

vendor/magento/module-catalog/Controller/Adminhtml/Category/Image/Upload.php

Check this answer to create controller action to upload image

Update:

change url in your above <uploaderConfig> node to below

<uploaderConfig>
     <param xsi:type="string" name="url">namespace_module/module_image/upload</param>
</uploaderConfig>

Create a controller action at path Filename - Upload.php

Namespace\Module\Controller\Adminhtml\Module\Image

In this File add below code

namespace Namespace\Module\Controller\Adminhtml\Module\Image;

use Magento\Framework\Controller\ResultFactory;

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

    /**
     * @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;
    }

    /**
     * Check admin permissions for this controller
     *
     * @return boolean
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('Namespace_Module::Module');
    }

    /**
     * Upload file controller action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        try {
            $result = $this->imageUploader->saveFileToTmpDir('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);
    }
}

Add below code to your module's etc/di.xml

<virtualType name="ModuleImageUploader" type="Magento\Catalog\Model\ImageUploader"><!-- replace Module with your entity name -->
    <arguments>
        <argument name="baseTmpPath" xsi:type="string">module/tmp</argument>
        <argument name="basePath" xsi:type="string">module</argument>
        <argument name="allowedExtensions" xsi:type="array"><!-- you can add here file extension restrictions -->
            <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="Namespace\Module\Controller\Adminhtml\Module\Image\Upload">
    <arguments>
        <argument name="imageUploader" xsi:type="object">ModuleImageUploader</argument><!-- again, replace Module with the name of your entity. Make sure it matches the name of the virtual type above. -->
    </arguments>
</type>

Note: Do not forgot to change Namespace and Module to your Namespace and Module name

Am i need to create additional controller file for image upload? — Jaisa
– Jaisa, Commented Nov 14, 2017 at 12:46
yes you have to create that controller to upload and save image at a particular directory. Check this answer magento.stackexchange.com/a/180200/20064 — Piyush
– Piyush, Commented Nov 14, 2017 at 12:48
Is this file can help for my custom form to upload an image Because it refers for catalog — Jaisa
– Jaisa, Commented Nov 14, 2017 at 13:25
this file is to save your uploaded image in a particular directory which you have to mention in di.xml , image name will be save in database when you submit the form — Piyush
– Piyush, Commented Nov 14, 2017 at 13:27
I am unable to understand that code which is specified in core class. Can you explain me how to write controller for Upload.php — Jaisa
– Jaisa, Commented Nov 14, 2017 at 13:44

Stack Exchange Network

Ui form: image field in Magento 2.2

1 Answer 1

Update:

Note: Do not forgot to change Namespace and Module to your Namespace and Module name

Your Answer

Linked

Hot Network Questions

Ui form: image field in Magento 2.2

1 Answer 1

Update:

Note: Do not forgot to change Namespace and Module to your Namespace and Module name

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions