0

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! This image is from custom module

From category page display an obj Correct!

enter image description here

But what am i missing? Thanks in advance

0

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;
        }
| improve this answer | |

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.