Magento2.23.4 Custom Module backend image preview error
-
13-04-2021 - |
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
No correct solution
OTHER TIPS
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;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange