ui components and dataProvider file for a simple upload file functionality in your custom module

Question

In my module there is a link for an import and then the user should arrive to something like this:

Where they are able to upload a file and then click the import file button and then that file updates some products.

I'm struggling with the ui_components and DataProvider files.

I don't even know if a DataProvider should be needed for something like this but if I don't include it in ui_components then it throws an error.

All of my import logic is done in an importFile.php that should get called by the submit_url.

ui_component/module_form.xml:

<?xml version="1.0" encoding="UTF-8"?>
<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">module_form.stores_form_data_source</item>
            <item name="deps" xsi:type="string">module_form.stores_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Store Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">module_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
    </argument>
    <dataSource name="stores_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Module\Path\DataProvider</argument>
            <argument name="name" xsi:type="string">stores_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">file_id</argument>
            <argument name="requestFieldName" xsi:type="string">file_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="module/path/importFile"/>
                </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="stores_main">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string"/>
            </item>
        </argument>
        <field name="import">
            <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">stores</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">module/file-preview</item>
                    <item name="required" xsi:type="boolean">true</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

I'm not sure how Module\Path\DataProvider should look like. I thought there would be one created in the products module: Magento\Catalog\Model\Product\DataProvider but there isn't.

Any ideas?

Answer 1

The DataSource's class argument should be a reference to your module's DataProvider class.

This class doesn't have to do anything as long as you extend \Magento\Ui\DataProvider\AbstractDataProvider. It should implement \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface which the AbstractDataProvider does.

If you need to provide data to your form, then that class provides a mechanism for you to do that. Magento's standard approach appears to be to have a getData() method that returns nearly an array of data to be output in JSON along with the rest of your component's configuration.

Magento's example is that you would put your DataProvider in the [YourNamespace]\[YourModule]\Ui\DataProvider namespace (where [YourNamespace] and [YourModule] are placeholders for your module's name).