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
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">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\SaveUrl</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">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\Uploader\OpenDialogUrl</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">Magento\PageBuilder\Model\Config\ContentType\AdditionalData\Provider\StoreId</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> 