Skip to content

Custom Content-Type Image not saving

I’m using Magento 2.4.7 and I have a custom content-type. I need an image field. For some reason, while I can actually upload an image, it always returns Undefined NaN once uploaded. What am I missing here?

enter image description here

The Upload works as expected, and the JSON returned appears correct

{
  "success": true,
  "file": {
    "name": "dino_1.",
    "full_path": "dino.jpeg",
    "type": "image/jpeg",
    "tmp_name": "/tmp/phpdohaPg",
    "error": 0,
    "size": 162767,
    "path": "/var/www/html/pub/media/something",
    "file": "dino_1.jpeg",
    "url": "http://something.local/media/something/dino_1.jpeg"
  }
}

Vendor/Module/etc/adminhtml/di.xml

...
    <type name="VendorModuleModelImageUploader">
        <arguments>
            <argument name="baseTmpPath" xsi:type="string">something/tmp</argument>
            <argument name="basePath" xsi:type="string">something</argument>
            <argument name="allowedExtensions" xsi:type="array">
                <item name="jpg" xsi:type="string">jpg</item>
                <item name="jpeg" xsi:type="string">jpeg</item>
                <item name="gif" xsi:type="string">gif</item>
                <item name="png" xsi:type="string">png</item>
            </argument>
        </arguments>
    </type>

    <virtualType name="AppearanceSourceHeroBanner" type="MagentoPageBuilderModelSourceVisualSelect">
        <arguments>
            <argument name="optionsSize" xsi:type="string">large</argument>
            <argument name="optionsData" xsi:type="array">
                <item name="0" xsi:type="array">
                    <item name="value" xsi:type="string">default</item>
                    <item name="title" xsi:type="string" translate="true">Default</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
...

Vendor/Module/view/adminhtml/layout/herobanner_form.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="pagebuilder_module_herobanner_form"/>
        </referenceContainer>
    </body>
</page>

Vendor/Module/view/adminhtml/pagebuilder/content_type/module_herobanner.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="module_herobanner"
          label="Hero Banner"
          component="Magento_PageBuilder/js/content-type"
          preview_component="Magento_PageBuilder/js/content-type/preview"
          master_component="Magento_PageBuilder/js/content-type/master"
          form="pagebuilder_module_herobanner_form"
          icon="icon-pagebuilder-image"
          sortOrder="50"
          translate="label">
        <children default_policy="deny"/>
        <appearances>
            <appearance name="default"
                default="true"
                preview_template="Vendor_Module/content-type/vendor_module/default/preview"
                master_template="Vendor_Module/content-type/vendor_module/default/master"
                reader="Magento_PageBuilder/js/master-format/read/configurable">
                <elements>
                    <element name="main">
                        <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="hero_banner_image">
                        <attribute name="image" source="image" />
                    </element>
                </elements>

            </appearance>
        </appearances>
    </type>
</config>

Vendor/Module/view/adminhtml/ui_component/pagebuilder_module_herobanner_form.xml

...

    <fieldset name="general" sortOrder="20">
        <settings>
            <label/>
        </settings>

        <field name="entity_id" formElement="hidden">
            <settings>
                <dataType>text</dataType>
                <visible>false</visible>
                <dataScope>entity_id</dataScope>
            </settings>
        </field>

        <field name="image" formElement="imageUploader">
             <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Hero Banner Image</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="dataScope" xsi:type="string">image</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="module_pagebuilder/image/upload"/>
                    </item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="baseTmpPath" xsi:type="string">custom_entity/tmp</item>
                    <item name="basePath" xsi:type="string">custom_entity</item>
                    <item name="maxFileSize" xsi:type="string">2097152</item>
                    <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png</item>
                </item>
            </argument>
        </field>
    </fieldset>
...