0

I want to add image preview in image-uploader on ajax-request on UI form Magento-2.

I have one drop-down and one image-uploader on change of drop-down pass ajax-request and get data from controller action.

ui_form.xml

<field name="field1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\Make</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">int</item>
            <item name="label" xsi:type="string" translate="true">Make</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">field1</item>
            <item name="dataScope" xsi:type="string">field1</item>
            <item name="component" xsi:type="string">Vendor_Module/js/getData</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>
<field name="description">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Description</item>
            <item name="formElement" xsi:type="string">textarea</item>
            <item name="source" xsi:type="string">description</item>
            <item name="dataScope" xsi:type="string">description</item>
            <!-- <item name="disabled" xsi:type="boolean">true</item> -->
            <item name="cols" xsi:type="number">15</item>
            <item name="rows" xsi:type="number">25</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>
<field name="image">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">string</item>
            <item name="label" xsi:type="string" translate="true">Image</item>
            <item name="formElement" xsi:type="string">fileUploader</item>
            <item name="dataScope" xsi:type="string">image</item>
            <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
            <item name="previewTmpl" xsi:type="string">Vendor_Module/image-preview</item>
            <item name="visible" xsi:type="boolean">false</item>
            <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="*/*/imageUpload"/>
            </item>
        </item>
    </argument>
</field>

getData.js

define([
    'jquery',
    'underscore',
    'mage/url',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal',
    'domReady'
], function ($,_, urlBuilder, uiRegistry, select, modal) {
    'use strict';

    return select.extend({
        initialize: function () {
            this._super();
            this.dropdownChange('initialize',this,this.value());
            return this;
        },
        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            this.dropdownChange('onupdate',this,value);
            return this._super();
        },

        dropdownChange: function(fromWhere,element,value)
        {   
            var provider_name = requirejs('uiRegistry').get(this.provider);
            var selected_value = element.value();

            if(element.index == 'field1') {
                this.field1 = element.value();
            }

            var url = urlBuilder.build('route/index/index');
            $.ajax({
                url: url,
                showLoader: true,
                type: "POST",
                data: {
                    field1: this.field1
                },
                error: function(){
                    console.log('something is going wrong');
                },
                success: function(result){
                    if(result.desc != undefined) {
                        $('textarea[name="description"]').text(result.desc.description);
                    }
                }
            });
        }
    });
});

Thanks in advance.

enter image description here

  • add your code and xml files in your question – Jinesh Mar 24 at 13:18
  • @Jinesh please check updated question. – Mahesh Dave Mar 24 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.