2

I followed the steps from the following post (Magento 2 : Add Hero Image Upload Field on CMS page) to create an image upload field on the CMS page. I managed to create the field on the CMS page, as well as create the column where the field should write to in the database. However when I try to upload an image I get the following error "A technical problem with the server created an error. Try again to continue what you were doing. If the problem persists, try again later." on the other side I can select an image from the "select from gallery" option and this does work. I figured that something must be wrong with the Upload.php, DataProvider.php or cms_page_form.xml does someone know what I'm doing wrong?

This is the cms_page_form.xml under Module\PaginaContent\view\adminhtml\ui_component\cms_page_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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="content_afbeelding">
            <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">Content afbeelding</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="required" xsi:type="boolean">false</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="PaginaContent/Cms/ContentImage/Upload"/>
                    </item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                </item>
            </argument>
        </field>     
    </fieldset>
</form>

This is the Upload.php under Module\PaginaContent\Controller\Adminhtml\Cms\Contentimage\Upload.php

<?php

namespace Module\PaginaContent\Controller\Adminhtml\Cms\Contentimage;

use Magento\Framework\Controller\ResultFactory;

class Upload extends \Magento\Backend\App\Action
{
    /**
     * Image uploader
     *
     * @var \Dima\PaginaContent\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;
    }


    /**
     * Upload file controller action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        try {
            $result = $this->imageUploader->saveFileToTmpDir('contentimage');

            $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);
    }
}
?>

This is the DataProvider.php under Module\PaginaContent\Model\Cms\Page\DataProvider.php

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Module\PaginaContent\Model\Cms\Page;

use Magento\Cms\Model\ResourceModel\Page\CollectionFactory;
use Magento\Framework\App\Request\DataPersistorInterface;

/**
 * Class DataProvider
 */
class DataProvider extends \Magento\Cms\Model\Page\DataProvider
{

    /**
     * Get data
     *
     * @return array
     */
    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        /** @var $page \Magento\Cms\Model\Page */
        foreach ($items as $page) {
            $this->loadedData[$page->getId()] = $page->getData();
        }

        $data = $this->dataPersistor->get('cms_page');


        if (!empty($data)) {
            $page = $this->collection->getNewEmptyItem();

            $page->setData($data);
            $this->loadedData[$page->getId()] = $page->getData();
            $this->dataPersistor->clear('cms_page');
        }
        /* For Modify  You custom image field data */
        if(!empty($this->loadedData[$page->getId()]['content_afbeelding'])){
            $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
            $storeManager = $objectManager->get('Magento\Store\Model\StoreManagerInterface');
            $currentStore = $storeManager->getStore();
            $media_url=$currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

            $image_name=$this->loadedData[$page->getId()]['content_afbeelding'];
            unset($this->loadedData[$page->getId()]['content_afbeelding']);
            $this->loadedData[$page->getId()]['content_afbeelding'][0]['name']=$image_name;
            $this->loadedData[$page->getId()]['content_afbeelding'][0]['url']=$media_url."cms/contentafbeelding/tmp/".$image_name;
        }
        return $this->loadedData;
    }
}
?>

I added textfields to the same module to see if these work and they do. What else could be wrong with the upload field beside that the formElement cant be named fileUploader?

2

Seem like this is the magento bug in 2.3. you can check this https://github.com/magento/magento2/issues/19872

You need to override this file: /vendor/magento/module-theme/view/adminhtml/ui_component/design_config_form.xml

Change the formElement i.e Replace fileUploader with imageUploader.

I hope this will help

  • I just checked this file but can't find fileUploader only imageUploader. The only rules that still have file uploader are <param xsi:type="string" name="url">theme/design_config_fileUploader/save</param> and <param xsi:type="string" name="url">theme/design_config_fileUploader/save</param> – Remco Hendriks Apr 17 at 7:11
2

@Remco Hendriks, in "Vendor\Module\view\adminhtml\ui_component\cms_page_form.xml" it's better to use field like in Magento_Caatalog module to have correct image display after page save. In your case image is broken.

<field name="image" sortOrder="110" formElement="fileUploader">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">category</item>
        </item>
    </argument>
    <settings>
        <elementTmpl>ui/form/element/uploader/uploader</elementTmpl>
        <dataType>string</dataType>
        <label translate="true">News Image</label>
        <visible>true</visible>
        <required>false</required>
    </settings>
    <formElements>
        <fileUploader>
            <settings>
                <required>false</required>
                <uploaderConfig>
                    <param xsi:type="url" name="url" path="[admin_route]/image/upload"/>
                </uploaderConfig>
                <previewTmpl>Magento_Catalog/image-preview</previewTmpl>
            </settings>
        </fileUploader>
    </formElements>
</field>
1

Okay this was very stupid but I forgot to add the following file under (Module\etc\adminhtml\routes.xml) when I added this the uploadField worked. This fixed the issue for me.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="admin">
        <route id="module_paginacontent" frontName="module_paginacontent">
            <module name="Module_PaginaContent" before="Magento_Backend" />
        </route>
    </router>
</config>
  • Your answer is also appropriate and right. +1 for that – Muhammad Hasham Nov 28 at 7:09

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.