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>

• Avesh Naik: Ya but how can i put this in block class. That's my question.
• Avesh Naik: Saving thing i know. I want to add the UI field(XML thing) in Block form Class (PHP thing)
• Birjitsinh Zala: got it to let me check on it
• Birjitsinh Zala: Please check this answer magento.stackexchange.com/questions/151685/…
• Avesh Naik: Not what i was looking for.