0

In magento 2, how to edit the uploaded image field

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

enter image description here

ui-component

<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">specialpromotion</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">Bg_SpecialPromotion/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path=bg_specialpromotion/index/upload"/>
                    </item>
                </item>
            </argument>
   </field>

Bg\SpecialPromotion\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="Bg\SpecialPromotion\ImageUpload" type="Bg\SpecialPromotion\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="Bg\SpecialPromotion\Controller\Adminhtml\Index\Upload">
    <arguments>
            <argument name="imageUploader" xsi:type="object">Bg\SpecialPromotion\ImageUpload</argument>
    </arguments>
</type>
<type name="Bg\SpecialPromotion\Model\SalesRule\DataProvider">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Bg\SpecialPromotion\ImageUpload</argument>
    </arguments>
</type>
<type name="Bg\SpecialPromotion\Observer\SaveImage">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Bg\SpecialPromotion\ImageUpload</argument>
    </arguments>
</type>
</config>

Bg\SpecialPromotion\Observer\SaveImage

 <?php
namespace Bg\SpecialPromotion\Observer;

use Magento\Framework\Event\Observer;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\App\Filesystem\DirectoryList;

class SaveImage implements ObserverInterface
{

    public function execute(Observer $observer)
    {
     // $data = $observer->getRequest()->getPostValue();
      $request = $observer->getEvent()->getRequest();
       $img_name = $request->getPostValue('promo_image');

       if(!empty( $img_name ))
       {
         if(!is_array($img_name ))
         {
            $img = $img_name;  
         }
         else
         {
           $img = $img_name[0]['name']; 
         }
        // $this->imageUploader = \Magento\Framework\App\ObjectManager::getInstance()->get('Bg\SpecialPromotion\ImageUpload');
        // $this->imageUploader->moveFileFromTmp($img);
       }
       else  
       {
           $img =  NULL;
       }   
      $request->setPostValue('promo_image',$img);
    }  
}

after save the uploaded image and edit the save image field not appear in admin

enter image description here

Bg\SpecialPromotion\Model\SalesRul\DataProvider.php

namespace Bg\SpecialPromotion\Model\SalesRule;

use Magento\Store\Model\StoreManagerInterface;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{

    protected $salesRuleFactory;
    public function __construct(

    \Bg\SpecialPromotion\Model\ResourceModel\SalesRule\CollectionFactory $salesRuleFactory, 

    )
    {

    $this->collection = $salesRuleFactory;

    }
    public function getData()
    {

        $items = $this->collection->getItems();

        //Replace icon with fileuploader field name
        foreach ($items as $model) {
            $this->loadedData[$model->getId()] = $model->getData();
            if ($model->getPromoImage()) {
                $m['promo_image'][0]['name'] = $model->getPromoImage();
                $m['promo_image'][0]['url'] = $this->getMediaUrl().$model->getPromoImage();
                $fullData = $this->loadedData;
                $this->loadedData[$model->getId()] = array_merge($fullData[$model->getId()], $m);
            }
        }

        return $this->loadedData;
    }

    public function getMediaUrl()
    {
        $mediaUrl = $this->storeManager->getStore()
            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'test/tmp/';
        return $mediaUrl;
    }
}

Can anyone help me to solve this issue

This question had a bounty worth +50 reputation from divya sekar that ended 18 hours ago. Grace period ends in 5 hours

Looking for an answer drawing from credible and/or official sources.

2

On Step 5: Controller Save Image. There is a line which tell the uploader move the image uploaded from baseTmpPath : test/tmp to basePath : test

$this->imageUploader->moveFileFromTmp($data['image']);

So basically on your Bg\SpecialPromotion\Model\SalesRul\DataProvider.php the function to get the media url should be

public function getMediaUrl()
    {
        $mediaUrl = $this->storeManager->getStore()
            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'test/';
        return $mediaUrl;
    }

Hope this help.

1

The issue with value.map usually, come from di.xml, please ensure you have created your own virtual type and inject it into every file you use ImageUploader.

For e.g

etc\di.xml

<!-- CMS Image Uploader -->
<virtualType name="Bg\SpecialPromotion\ThumbnailImageUpload" type="Bg\SpecialPromotion\Model\ImageUploader">
    <arguments>
        <argument name="baseTmpPath" xsi:type="string">sales/tmp/promo</argument>
        <argument name="basePath" xsi:type="string">sales/promo</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>
            <item name="svg" xsi:type="string">svg</item>
        </argument>
    </arguments>
</virtualType>
<type name="Bg\SpecialPromotion\Controller\Adminhtml\Index\Upload">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Bg\SpecialPromotion\ThumbnailImageUpload</argument>
    </arguments>
</type>
<type name="Bg\SpecialPromotion\Plugin\Model\Page\DataProvider">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Bg\SpecialPromotion\ThumbnailImageUpload</argument>
    </arguments>
</type>
<type name="Bg\SpecialPromotion\Observer\SalesRulePrepareSave">
    <arguments>
        <argument name="imageUploader" xsi:type="object">Bg\SpecialPromotion\ThumbnailImageUpload</argument>
    </arguments>
</type>

Hope this helps.

  • i corrected my di.xml file after i upload and save a image i will get a error like this Notice: Undefined variable: data in D:\wamp64\www\m2\magento\vendor\magento\module-sales-rule\Controller\Adminhtml\Promo\Quote\Save.php on line 102 – divya sekar Aug 19 at 13:30
  • What is line 102 and how 'data' looks like? @divyasekar – Toan Nguyen Aug 19 at 13:31
  • here the screen shot is prnt.sc/oun2ty – divya sekar Aug 19 at 13:38
  • That line does not look line a core Magento code. It says undefined variable because $data defined inside try block. Remove that line and try again. – Toan Nguyen Aug 19 at 14:03
  • i will remove the $data inside a block again its reflect a same error – divya sekar Aug 20 at 12:32

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.