Add UI component Field in Block form

Question

I want to add an image field of UI component on traditional block form.

I want to replace only this field with UI component. The reset field should be in Block class form.

$fieldset->addField(
        'outfit_image',
        'image',
        [
            'name' => 'outfit_image',
            'label' => __('Outfit Image'),
            'title' => __('Outfit Image'),
            'required' => true,
            'data-form-part' => $this->getData('target_form'),
            'note' => __('Maximum file size: 2 MB.'),
        ]
    );

With This

<field name="outfit_image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">string</item>
                <item name="source" xsi:type="string">Outfit Image</item>
                <item name="label" xsi:type="string" translate="true">Image</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="formElement" xsi:type="string">imageUploader</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="url" path="outfit/image/upload"/>
                </item>
            </item>
        </argument>
    </field>

Answer 1

You can try with fileUploader

<field name="outfit_image">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="source" xsi:type="string">source</item>
                    <item name="label" xsi:type="string" translate="true">Outfit Image</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="outfit/image/upload"/>
                    </item>
                </item>
            </argument>
        </field>