I have a custom content type that I want to add an image uploader to. I was able to get the images to upload and display on the frontend. However, when I tried to add code to get the uploader to display in preview.html, I get these errors:
preview-factory.js:25 TypeError: parts.split is not a function
Error within preview component (Vendor_Module/js/content-type/content-type/preview) for content_type. @ content-type-factory.js:70
sortable.js:196 Uncaught (in promise) TypeError: Cannot set properties of null (setting ‘dropped’)
I am still fairly new to M2, so I am not sure what I am missing in my custom preview.js file that it doesn’t like.
I tried to follow the directions outlined in the Magento 2 documentation for this, but am clearly missing something.
https://devdocs.magento.com/page-builder/docs/content-types/customize/add-image-uploader.html
I also looked at this question in StackExchange to get the images upload to work initially:
How to add an Image element for the new PageBuilder content-type in Magento2?
/app/code/Vendor/Module/view/adminhtml/web/js/content-type/content-type/preview.js:
define([
'Magento_PageBuilder/js/uploader',
'Magento_PageBuilder/js/content-type/preview',
], function (PreviewBase, Uploader) {
'use strict';
var $super;
function Preview(parent, config, stageId) {
PreviewBase.call(this, parent, config, stageId);
}
Preview.prototype = Object.create(PreviewBase.prototype);
$super = PreviewBase.prototype;
$super.getUploader = function () {
var initialImageValue = this.contentType.dataStore
.get(this.config.additional_data.uploaderConfig.dataScope, "");
return new Uploader(
"imageuploader_" + this.contentType.id,
this.config.additional_data.uploaderConfig,
this.contentType.id,
this.contentType.dataStore,
initialImageValue,
);
};
return Preview;
});
/app/code/Vendor/Module/view/adminhtml/pagebuilder/content_type/content_type.xml
<appearances>
<appearance name="default"
default="true"
preview_template="Vendor_Module/content-type/content_type/option-one/preview"
master_template="Vendor_Module/content-type/content_type/option-one/master"
reader="Magento_PageBuilder/js/master-format/read/configurable">
<elements>
<element name="main">
<style name="text_align" source="text_align"/>
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
<style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
<attribute name="name" source="data-content-type"/>
<attribute name="appearance" source="data-appearance"/>
<css name="css_classes"/>
</element>
<element name="title">
<style name="text_align" source="text_align"/>
<html name="title_title" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
</element>
<element name="subtitle">
<style name="text_align" source="text_align"/>
<html name="title_subtitle" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
</element>
<element name="desktop_image">
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<static_style source="max-width" value="100%"/>
<static_style source="height" value="auto"/>
<attribute name="image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
<attribute name="alt" source="alt"/>
<attribute name="title_attribute" source="title"/>
</element>
<element name="mobile_image">
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<static_style source="max-width" value="100%"/>
<static_style source="height" value="auto"/>
<attribute name="mobile_image" source="src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
<attribute name="alt" source="alt"/>
<attribute name="title_attribute" source="title"/>
</element>
</elements>
</appearance>
</appearances>
<additional_data>
<item name="uploaderConfig" xsi:type="array">
<item name="isShowImageUploadInstructions" xsi:type="boolean">false</item>
<item name="isShowImageUploadOptions" xsi:type="boolean">true</item>
<item name="maxFileSize" xsi:type="object">ImageMaxFileSizeDesktop</item>
<item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
<item name="component" xsi:type="string">Magento_PageBuilder/js/form/element/image-uploader</item>
<item name="componentType" xsi:type="string">imageUploader</item>
<item name="dataScope" xsi:type="string">background_image</item>
<item name="formElement" xsi:type="string">imageUploader</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="object">MagentoPageBuilderModelConfigContentTypeAdditionalDataProviderUploaderSaveUrl</item>
</item>
<item name="previewTmpl" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview</item>
<item name="template" xsi:type="string">Magento_PageBuilder/form/element/uploader/preview/image</item>
<item name="mediaGallery" xsi:type="array">
<item name="openDialogUrl" xsi:type="object">MagentoPageBuilderModelConfigContentTypeAdditionalDataProviderUploaderOpenDialogUrl</item>
<item name="openDialogTitle" xsi:type="string" translate="true">Insert Images...</item>
<item name="initialOpenSubpath" xsi:type="string">wysiwyg</item>
<item name="storeId" xsi:type="object">MagentoPageBuilderModelConfigContentTypeAdditionalDataProviderStoreId</item>
</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</additional_data>
/app/code/Vendor/Module/view/adminhtml/ui_component/pagebuilder_content_type_form.xml
<fieldset name="general" sortOrder="20">
<settings>
<label/>
</settings>
<field name="title_title" sortOrder="10" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">page</item>
</item>
</argument>
<settings>
<dataScope>title_title</dataScope>
<dataType>text</dataType>
<label translate="true">Title</label>
</settings>
</field>
<field name="title_subtitle" sortOrder="40" formElement="input">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">page</item>
</item>
</argument>
<settings>
<dataScope>title_subtitle</dataScope>
<dataType>text</dataType>
<label translate="false">Subtitle</label>
</settings>
</field>
<field name="image" formElement="imageUploader">
<settings>
<label translate="true">Image</label>
<componentType>imageUploader</componentType>
</settings>
<formElements>
<imageUploader>
<settings>
<allowedExtensions>jpg jpeg gif png</allowedExtensions>
<maxFileSize>4194304</maxFileSize>
<uploaderConfig>
<param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
</uploaderConfig>
<previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
</settings>
</imageUploader>
</formElements>
</field>
<field name="mobile_image" formElement="imageUploader">
<settings>
<label translate="true">Mobile 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">pagebuilder/contenttype/image_upload</param>
</uploaderConfig>
<previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
</settings>
</imageUploader>
</formElements>
</field>
</fieldset>
/app/code/Vendor/Module/view/adminhtml/web/template/content-type/content_type/option-one/preview.html
<div attr="data.main.attributes"
ko-style="data.main.style"
class="pagebuilder-content-type title-section one pagebuilder-image type-nested"
css="data.main.css"
event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
<render args="getOptions().template" />
<figure attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), !data.desktop_image.attributes().src ? {} : {borderStyle: 'none'})" css="data.main.css">
<scope args="getUploader().getUiComponent()">
<render />
</scope>
<img if="getViewportImageData().attributes().src"
attr="getViewportImageData().attributes"
class="preview-image"
css="getViewportImageData().css"
ko-style="getViewportImageData().style" />
<figcaption if="data.caption.html()"
attr="data.caption.attributes"
css="data.caption.css"
html="data.caption.html"
ko-style="data.caption.style">
</figcaption>
</figure>
</div>
