0

I have a custom ImageUploader

Issue : When I try to create a new Object, the image field appears and works fine. Image send to my media dir and the name saved in database. But, when I try to edit the previously created object, my objet has all his fields registered; but the image field is missing

creation

edit

Here comes the field in ui component

    <field name="image" sortOrder="40" formElement="imageUploader">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">miseenavant</item>
            </item>
        </argument>
        <settings>
            <elementTmpl>ui/form/element/uploader/image</elementTmpl>
            <item name="previewTmpl" xsi:type="string">Cpy_MiseEnAvant/image-preview</item>
            <dataType>string</dataType>
            <label translate="true">Mise En Avant Image</label>
            <visible>true</visible>
            <required>false</required>
        </settings>
        <formElements>
            <imageUploader>
                <settings>
                    <required>false</required>
                    <uploaderConfig>
                        <param xsi:type="url" name="url" path="mev/image/upload"/>
                    </uploaderConfig>
                    <openDialogTitle>Media Gallery</openDialogTitle>
                    <initialMediaGalleryOpenSubpath>mev_image/upload</initialMediaGalleryOpenSubpath>
                    <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                    <maxFileSize>4194304</maxFileSize>
                </settings>
            </imageUploader>
        </formElements>
    </field>

It seems to be related to my dataprovider

public function getData()
{
    $data = [];
    if($id = $this->request->getParam('id')) {
        $mev = $this->mevFactory->create()->load($id);
        $data[$id] = $mev->getData();
    }
    try {
        if(isset($data[$id])){
            $currentStore = $this->storeManager->getStore();
            $mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
            $data[$id]['image'] = array($mediaUrl.$this->mevHelper::MEV_MEDIA_DIRECTORY.$data[$id]['image']);
        }
    } catch (NoSuchEntityException $e) {
        var_dump($e->getMessage());
    }
    return $data;
}

Looks like i'm sending an array as image when it should be an object probably, cause I see this error in console :

file-uploader.js:171 Uncaught TypeError: Cannot create property 'previewType' on string 'http://mywebsite/media/mev_image/upload/60d2f7eb55bd8.png

Edit : There is is the best I can do digging :/

edit-2

$this->image->prepareDataSource(
    [
        'initialMediaGalleryOpenSubpath' => 'mev_image/upload',
        'name' => $data[$id]['image'],
        'file' => $data[$id]['image'],
        'previewType' => 'image',
        'type' => 'image/png',
        'path' => $mediaUrl.$this->mevHelper::MEV_MEDIA_DIRECTORY,
        'url' => $mediaUrl.$this->mevHelper::MEV_MEDIA_DIRECTORY.$data[$id]['image']
    ]
);
$data[$id]['image'] = array($this->image);        
1

You have to pass image array that contains image url,name. For passing it to ui component you can use dataprovider

<argument name=""class"" xsi:type=""string"">Namespace\Modulen\Model\Modelname\DataProvider</argument>

pass array like below.

$categoryData['image'][0]['name'] = $category->getData('image');
$categoryData['image'][0]['url'] = $category->getImageUrl();

for reference you can look

vendor\magento\Magento_Catalog\Model\Category\DataProvider.php

Magento 2 ui component image upload

1
  • Forgot to update the issue but it's indeed how i manage to did it more or less with may be some different data, but, going with an array is the way.
    – Claims
    Jul 28 at 8:55

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.