Skip to content

How can i Upload image in admin form using data interface and repository?

I want to upload image in admin form by using my DataInterfaceFactory and DataRepositoryInterface Classes, i have create and my interfaces and and form in admin dashboard but don’t know how i apply save functionality?
This is my ui component form and what is next step after this, how to save data using Data Interfaces and Repository approache?

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">promotions_form.promotions_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Upload Images</item>
        <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">promotions_form</item>
        </item>
    </argument>
    <settings>
        <buttons>
            <button name="save" class="RLTSquarePromotionsPopUpBoxBlockAdminhtmlFormEditSaveButton"/>
            <button name="reset" class="MagentoCustomerBlockAdminhtmlEditResetButton"/>
            <button name="back" class="MagentoCustomerBlockAdminhtmlEditBackButton"/>
        </buttons>
        <deps>
            <dep>promotions_form.promotions_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="promotions_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">RLTSquarePromotionsPopUpBoxUiComponentDataProvider</argument>
            <argument name="name" xsi:type="string">promotions_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="promotions/form/save/"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="promotions_popup_box">
        <settings>
            <label translate="true">Upload Images</label>
        </settings>
        <field name="title">
            <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">Title</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">title</item>
                </item>
            </argument>
        </field>
        <field name="image" formElement="imageUploader">
            <settings>
                <label translate="true">Images</label>
                <componentType>imageUploader</componentType>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
            </settings>
            <formElements>
                <imageUploader>
                    <settings>
                        <allowedExtensions>jpg jpeg png</allowedExtensions>
                        <maxFileSize>25097152</maxFileSize>
                        <uploaderConfig>
                            <param xsi:type="string" name="url">imageuploader/images/tempUpload</param>
                        </uploaderConfig>
                    </settings>
                </imageUploader>
            </formElements>
        </field>
        <field name="category_link">
            <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">Category Link</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="dataScope" xsi:type="string">category_link</item>
                </item>
            </argument>
        </field>
        <field name="timer" formElement="date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">timer</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="validate-date" xsi:type="boolean">true</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Timer</label>
                <visible>true</visible>
                <dataScope>timer</dataScope>
            </settings>
        </field>
    </fieldset>
</form>