1

Today I trying to create new attribute in product_form.xml on M2 admin. This is code I add my field:

<field name="xx" formElement="imageUploader">
    <settings>
        <label translate="true">Image</label>
        <componentType>imageUploader</componentType>
    </settings>
    <formElements>
        <imageUploader>
            <settings>
                <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                <maxFileSize>2097152</maxFileSize>
                <uploaderConfig>
                    <param xsi:type="string" name="url">my/xx/save</param>
                </uploaderConfig>
            </settings>
        </imageUploader>
    </formElements>
</field>

Then I used custom code to save image and it's worked, with attribute value is "a/1/amge.jpg". Now I don't know I can show image in imageUploader UI element. Somebody can let me know how I can this? Thanks.

The message I got is:

TypeError: value.map is not a function in file-uploader.js

1

1 Answer 1

0

Here my column name is thumbnail for image

<field name="thumbnail" formElement="imageUploader">
    <settings>
        <label translate="true">Image</label>
        <componentType>imageUploader</componentType>
    </settings>
    <formElements>
        <imageUploader>
            <settings>
                <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                <maxFileSize>2097152</maxFileSize>
                <uploaderConfig>
                    <param xsi:type="string" name="url">my/xx/save</param>
                </uploaderConfig>
            </settings>
        </imageUploader>
    </formElements>
</field>

add this code for image show in from

<?php

namespace VendoreName\ModuleName\Model;

use Magento\Store\Model\StoreManagerInterface;
use VendoreName\ModuleName\Model\ResourceModel\YourModelName\CollectionFactory;

class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
    protected $loadedData;
    protected $_storeManager;

    public function __construct(
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        $name,
        $primaryFieldName,
        $requestFieldName,
        CollectionFactory $CollectionFactory,
        array $meta = [],
        array $data = []
    ) {
        $this->collection = $CollectionFactory->create();
        $this->_storeManager = $storeManager;
        parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
    }
    // @codingStandardsIgnoreEnd

    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $items = $this->collection->getItems();
        //Replace image with Imageuploader field name
        foreach ($items as $model) {
            $this->loadedData[$model->getId()] = $model->getData();
            if ($model->getThumbnail()) {
                $m['thumbnail'][0]['name'] = $model->getThumbnail();
                $m['thumbnail'][0]['url'] = $this->getMediaUrl() . $model->getThumbnail();
                $fullData = $this->loadedData;
                $this->loadedData[$model->getId()] = array_merge($fullData[$model->getId()], $m);
            }
        }
        return $this->loadedData;
    }
    public function getMediaUrl()
    {
        /* set your path where image store */
        $mediaUrl = $this->_storeManager->getStore()
            ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'YourFolderName/';
        return $mediaUrl;
    }

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.