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?
