Magento2.23.4 Custom Module backend image preview error

Question

image preview html:

<div class="file-uploader-summary">
<div class="file-uploader-preview image-uploader-preview">
    <a class="image-uploader-preview-link" attr="href: $parent.getFilePreview($file)" target="_blank">
        <div class="file-uploader-spinner image-uploader-spinner" />
        <img
                class="preview-image"
                tabindex="0"
                event="load: $parent.onPreviewLoad.bind($parent)"
                attr="
                src: $parent.getFilePreview($file),
                alt: $file.name,
                title: $file.name">
    </a>

    <div class="actions">
        <button
                type="button"
                class="action-remove"
                data-role="delete-button"
                attr="title: $t('Delete image')"
                disable="$parent.disabled"
                click="$parent.removeFile.bind($parent, $file)">
            <span translate="'Delete image'"/>
        </button>
    </div>
</div>

<div class="file-uploader-filename" text="$file.name"/>
<div class="file-uploader-meta">
    <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>,
    <text args="$parent.formatSize($file.size)"/>
</div>

Ui component form xml:

<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">image</item>
                </item>
            </argument>
            <settings>
                <elementTmpl>ui/form/element/uploader/uploader</elementTmpl>
                <dataType>string</dataType>
                <label translate="true">Image</label>
                <visible>true</visible>
                <required>false</required>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <required>false</required>
                        <uploaderConfig>
                            <param xsi:type="url" name="url" path="vendor_module/juliano/upload"/>
                        </uploaderConfig>
                        <previewTmpl>Vendor_Module/image-preview</previewTmpl>
                        <openDialogTitle>Media Gallery</openDialogTitle>
                        <initialMediaGalleryOpenSubpath>juliano/vargas</initialMediaGalleryOpenSubpath>
                        <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                        <maxFileSize>4194304</maxFileSize>
                    </settings>
                </imageUploader>
            </formElements>
        </field>

The only issue that i have is when the page reload: everything else is ok:

The tab is empty and there is an error in file-uploader.js which I've looked into it and find out the it's not doing what it supposed to do.

console.log in the line errored:

/**
         * Defines initial value of the instance.
         *
         * @returns {FileUploader} Chainable.
         */
        setInitialValue: function () {
            console.log(this.getInitialValue());
            var value = this.getInitialValue();

            value = value.map(this.processFile, this);

            this.initialValue = value.slice();

            this.value(value);
            this.on('value', this.onUpdate.bind(this));
            this.isUseDefault(this.disabled());

            return this;
        },

Is Show the image string NOT right!

From category page display an obj Correct!

But what am i missing? Thanks in advance

Answer 1

After investigating module-catalog Model Category DataProvider method I've seem that it requires an array for the backend image-preview to work:

**
     * Get data
     *
     * @return array
     * @since 101.0.0
     */
    public function getData()
    {
        if (isset($this->loadedData)) {
            return $this->loadedData;
        }
        $category = $this->getCurrentCategory();
        if ($category) {
            $categoryData = $category->getData();
            $categoryData = $this->addUseConfigSettings($categoryData);
            $categoryData = $this->filterFields($categoryData);
            $categoryData = $this->convertValues($category, $categoryData);

            $this->loadedData[$category->getId()] = $categoryData;
        }

        return $this->loadedData;
    }

looking the above convertValues method:

 /**
     * Converts category image data to acceptable for rendering format
     *
     * @param \Magento\Catalog\Model\Category $category
     * @param array $categoryData
     * @return array
     */
    private function convertValues($category, $categoryData): array
    {
        foreach ($category->getAttributes() as $attributeCode => $attribute) {
            if ($attributeCode === 'custom_layout_update_file') {
                if (!empty($categoryData['custom_layout_update'])) {
                    $categoryData['custom_layout_update_file']
                        = \Magento\Catalog\Model\Category\Attribute\Backend\LayoutUpdate::VALUE_USE_UPDATE_XML;
                }
            }
            if (!isset($categoryData[$attributeCode])) {
                continue;
            }

            if ($attribute->getBackend() instanceof ImageBackendModel) {
                unset($categoryData[$attributeCode]);

                $fileName = $category->getData($attributeCode);
                $fileInfo = $this->getFileInfo();

                if ($fileInfo->isExist($fileName)) {
                    $stat = $fileInfo->getStat($fileName);
                    $mime = $fileInfo->getMimeType($fileName);

                    // phpcs:ignore Magento2.Functions.DiscouragedFunction
                    $categoryData[$attributeCode][0]['name'] = basename($fileName);

                    if ($fileInfo->isBeginsWithMediaDirectoryPath($fileName)) {
                        $categoryData[$attributeCode][0]['url'] = $fileName;
                    } else {
                        $categoryData[$attributeCode][0]['url'] = $category->getImageUrl($attributeCode);
                    }

                    $categoryData[$attributeCode][0]['size'] = isset($stat) ? $stat['size'] : 0;
                    $categoryData[$attributeCode][0]['type'] = $mime;
                }
            }
        }

        return $categoryData;
    }

So my final solution was to convert my image string to array like so:

     /**
         * Get data
         *
         * @return array
         */
public function getData()
   {
     if (isset($this->_loadedData)) {
          return $this->_loadedData;
        }
       $items = $this->collection->getItems();
     if($items) {
        foreach ($items as $item) {
             $this->_loadedData[$item->getId()] = $item->getData();
             $item['store_view_id'] = $this->request->getParam('store');
             $i['image'][0]['name'] = 'test'; //TODO
             $i['image'][0]['url'] = $item['image'];
             $i['image'][0]['size'] = 1200; //TODO
             $i['image'][0]['type'] = 'image';
             $allData = $this->_loadedData;
             $this->_loadedData[$item->getId()] = array_merge($allData[$item->getId()], $i);
           }
         return $this->_loadedData;
       }
            return;
        }