With reference to this Q&A there's another question.

How do I clear the image selected using the Media Browser on category edit page in the admin Panel?

Here's what I tried:

in app/code/Vendor/Module/view/base/web/template/form/element/custom-button.html

I added an extra button which will clear the value of the hidden input field, when clicked.

But the real problem starts here. When the Category is saved (Save button is clicked), the Knockout JS observables, replace the already saved value or newly selected value (image url) to the input field.

ref: vendor/magento/magento2-base/lib/web/knockoutjs/knockout.js line 1276

function observable() {
    if (arguments.length > 0) {
        // Write

        // Ignore writes if the value hasn't changed
        if (observable.isDifferent(_latestValue, arguments[0])) {
            _latestValue = arguments[0];
            if (DEBUG) observable._latestValue = _latestValue;
        return this; // Permits chained assignments
    else {
        // Read
        ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
        return _latestValue;

now I used the component property in the category_form.xml to override this behaviour, but unsuccessful.

    <field name="custom_attribute_code">
         <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">40</item>
                <item name="formElement" xsi:type="string">input</item>
                <!--<item name="notice" xsi:type="string">The categroy has to be saved after selecting an image</item>-->
                <item name="elementTmpl" xsi:type="string">Vendor_Module/form/element/bg-button</item>
                <item name="elementId" xsi:type="string">custom_attribute_code</item>
                <item name="dialogUrl" xsi:type="url" path="cms/wysiwyg_images/index">
                    <param name="target_element_id">custom_attribute_code</param>
                    <param name="type">file</param>
                <item name="component" xsi:type="string">Vendor_Module/js/form/element/button</item>
                <item name="label" xsi:type="string" translate="true">Custom Attribute Label</item>

[only that line]

<item name="component" xsi:type="string">Vendor_Module/js/form/element/button</item>

where button.js is in the following path


But I get the following error.

TypeError: Constr is not a constructor                      layout.js (line 66, col 25)

Can someone show me the right direction on how do I override the above mention Knockout JS observable with my js file???

  • Did you get this working yet? I am struggling with exactly the same situation ...
    – hallleron
    Aug 18, 2017 at 11:49
  • Nope! no luck yet...
    – Shathish
    Aug 18, 2017 at 16:27


Your Answer

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