0

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>

1 Answer 1

0

I was able to modify my preview.js file and resolve this issue. I looked at the Magento Page Builder examples to modify it.

https://github.com/magento-devdocs/pagebuilder-examples/blob/master/Quote/Custom/view/adminhtml/web/js/content-type/custom-quote/preview.js

Here is what my preview.js file looks like now:

define([
  'Magento_PageBuilder/js/content-type/preview',
  'Magento_PageBuilder/js/uploader'
], function (
  PreviewBase, 
  Uploader
) {
    'use strict';

    function Preview(parent, config, stageId) {
      PreviewBase.call(this, parent, config, stageId);
    }

  var $super = PreviewBase.prototype;

  Preview.prototype = Object.create(PreviewBase.prototype);

  Preview.prototype.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
    );
  };   

  Preview.prototype.getViewportImageData = function getViewportImageData() {
    var desktopImageData = this.data.right_desktop_image;
    var mobileImageData = this.data.right_mobile_image;
    return this.viewport() === "mobile" && typeof mobileImageData !== "undefined" ? mobileImageData : desktopImageData;
  }
  
  return Preview;
 });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.