2

In magento 2, Edit the image uploaded image field works in localhost but not works in server

I follow this blog https://blog.qaisarsatti.com/magento_2/magento-2-ui-component-image-upload/

Before Save

enter image description here

After saved a form image saved in db

enter image description here

After saved and edit form

enter image description here

app/code/Cm/Module/view/adminhtml/ui-component/sales_rule_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">
  <dataSource name="sales_rule_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Cm\Module\Model\SalesRule\DataProvider</argument>
            <argument name="name" xsi:type="string">sales_rule_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">rule_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="sales_rule/promo_quote/save"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="highlight_promotion">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Highlight Promotion</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">50</item>
        </item>
    </argument>
    <field name="promo_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">helloworld</item>
                    <item name="label" xsi:type="string" translate="true">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">Cm_Module/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="cm_module/index/upload"/>
                    </item>
                </item>
            </argument>
   </field>
  </fieldset>
</form>

app/code/Cm/Module/Model/SalesRule/DataProvider.php

<?php
namespace Cm\Module\Model\SalesRule;
use Magento\SalesRule\Model\ResourceModel\Rule\Collection;
use Magento\SalesRule\Model\ResourceModel\Rule\CollectionFactory;
use Magento\SalesRule\Model\Rule;

/**
 * Class DataProvider
 */
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    /**
     * @var Collection
     */
    protected $collection;

    /**
     * @var array
     */
    protected $loadedData;

    /**
     * Core registry
     *
     * @var \Magento\Framework\Registry
     */
    protected $coreRegistry;

    /**
     * @var \Magento\SalesRule\Model\Rule\Metadata\ValueProvider
     */
    protected $metadataValueProvider;

    /**
     * Initialize dependencies.
     *
     * @param string $name
     * @param string $primaryFieldName
     * @param string $requestFieldName
     * @param CollectionFactory $collectionFactory
     * @param \Magento\Framework\Registry $registry
     * @param Metadata\ValueProvider $metadataValueProvider
     * @param array $meta
     * @param array $data
     */
    public function __construct(
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $collectionFactory,
        \Magento\Framework\Registry $registry,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\SalesRule\Model\Rule\Metadata\ValueProvider $metadataValueProvider,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $collectionFactory->create();
        $this->coreRegistry = $registry;
        $this->_storeManager=$storeManager;
        $this->metadataValueProvider = $metadataValueProvider;
        $meta = array_replace_recursive($this->getMetadataValues(), $meta);
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }

    /**
     * Get metadata values
     *
     * @return array
     */
    protected function getMetadataValues()
    {
        $rule = $this->coreRegistry->registry(\Magento\SalesRule\Model\RegistryConstants::CURRENT_SALES_RULE);
        return $this->metadataValueProvider->getMetadataValues($rule);
    }
    /**
     * {@inheritdoc}
     */
    public function getData()
    {

        if(isset($this->loadedData))
        {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        $baseurl =  $this->_storeManager->getStore()->getBasUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
        /** @var Rule $rule */
        foreach ($items as $rule) {

            $this->loadedData[$rule->getId()] = $rule->getData();
             if($rule->getPromoImage()) {
                $m['promo_image'][0]['name'] = $rule->getPromoImage();
                $m['promo_image'][0]['url'] = $this->getMediaUrl().$rule->getPromoImage();
               $fullData = $this->loadedData;
                $this->loadedData[$rule->getId()] = array_merge($fullData[$rule->getId()], isset($m));
            }
        } 
        return $this->loadedData;
    }
    public function getMediaUrl()
    {
        $mediaUrl = $this->_storeManager->getStore()
            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'test/tmp/';
        return $mediaUrl;
    }
}

app/code/Cm/Module/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="Cm\Module\ImageUpload" type="Cm\Module\Model\ImageUploader">
    <arguments>
            <argument name="baseTmpPath" xsi:type="string">test/tmp</argument>
            <argument name="basePath" xsi:type="string">test</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="Cm\Module\Controller\Adminhtml\Index\Upload">
    <arguments>
            <argument name="imageUploader" xsi:type="object">Cm\Module\ImageUpload</argument>
    </arguments>
</type>
<type name="Cm\ModuleModel\SalesRule\DataProvider">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Cm\Module\ImageUpload</argument>
    </arguments>
</type>
<type name="Cm\Module\Observer\SaveImage">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Cm\Module\ImageUpload</argument>
    </arguments>
</type>
<type name="Magento\Checkout\Model\ShippingInformationManagement">
        <plugin name="ken_save_custom_fee_in_quote" type="Cm\Module\Plugin\Checkout\Model\ShippingInformationManagement" sortOrder="1"/>
    </type>
</config>

Someone please help me resolve this issue

  • I think you missed some files to upload...Can you please update di.xml...Which is used to override dataprovider? – Ranganathan Oct 11 at 7:15
  • Where this file called from Cm\Module\Model\SalesRule\DataProvider? – Ranganathan Oct 11 at 7:33
  • DataProvider file calls in the sales_rule_form.xml file – divya sekar Oct 11 at 7:40
  • In DataProvider remove isset($m), and add only $m. – Ranganathan Oct 11 at 8:30
  • i will check that way its not working – divya sekar Oct 11 at 9:11
1

app/code/Cm/Module/etc/di.xml

<type name="Magento\SalesRule\Model\Rule\DataProvider">
    <plugin name="data_provider_custom" type="Cm\Module\Plugin\Dataprovider" sortOrder="1" disabled="false"/>
</type>

app\code\Cm\Module\Plugin\Dataprovider.php

<?php
namespace Cm\Module\Plugin\Rule;
/**
 * Class DataProvider
 */
class DataProvider
{
    /**
     * @var \Magento\Store\Model\StoreManagerInterface $storeManager
     */
    protected $storeManager;
    /**
     * @param \Magento\Store\Model\StoreManagerInterface $storeManager
     */
    public function __construct(
        \Magento\Store\Model\StoreManagerInterface $storeManager
    ) {
        $this->_storeManager = $storeManager;
    }
    /**
     * {@inheritdoc}
     */
    public function afterGetData(
        \Magento\SalesRule\Model\Rule\DataProvider $subject,
        $result
    ) {
        foreach ($result as $key => $value) {
            $result[$key]['promo_image'] = array(
                array('name' => $value['promo_image'],
                'url' => $this->getMediaUrl().$result[$key]['promo_image'])
            );
        }
        return $result;
    }
    /**
     * @return string media url
     */
    public function getMediaUrl()
    {
        $mediaUrl = $this->_storeManager->getStore()
            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'test/tmp/';
        return $mediaUrl;
    }
}

Please adjust your plugin logic...May be it has some error...

  • 1
    thanks for your code i will check and update you – divya sekar Oct 12 at 12:21
  • i was used a plugin but its not works – divya sekar Oct 14 at 5:28
  • Did you removed datasource code in sales_rule_form.xml? – Ranganathan Oct 14 at 5:42
  • i removed it from sales_rule_from.xml – divya sekar Oct 14 at 5:51
  • i still get the file-uploader.js:69 Uncaught TypeError: value.map is not a function error in console – divya sekar Oct 14 at 5:59

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.