Magento 2.2 Uploader component

Question

I am exploring Magento2.2 and trying to use the uploader component as specified here in the docs.

http://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-fileuploader.html

I want to pass a product attribute to the formUploader component using formData.

Below is my XML file.

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="file_uploader_attribute_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Documentation Files</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="string">2</item>
                <item name="canShow" xsi:type="boolean">true</item>
                <item name="componentType" xsi:type="string">fieldset</item>
            </item>
        </argument>
        <!-- Pass in our own preview template with ability to delete. -->
        <field name="file_uploader_attribute">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Sound Check</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="productfileuploader/component/"/>
                        <item name="formData" xsi:type="object">
                            .... ??? ....
                        </item>
                    </item>
                    <item name="isMultipleFiles" xsi:type="boolean">true</item>
                    <item name="component" xsi:type="string">Packt_ProductFileUploader/js/file-uploader</item>
                    <item name="previewTmpl" xsi:type="string">Packt_ProductFileUploader/preview</item>
                    <item name="template" xsi:type="string">Packt_ProductFileUploader/uploader</item>
                </item>
            </argument>
        </field>

    </fieldset>

</form>

I tried DataSource, but couldn't get it working.

Any thoughts ?

score 0 · Answer 1 · answered Nov 15 '18 at 08:42

Having been playing around with this for a good few hours, from my experience, formData can take the following:

Arrays:

<item name="formData" xsi:type="array">
    <item name="some_value" xsi:type="string">Hard Coded Value</item>
    <item name="some_other_value" xsi:type="string">Other Hard Coded Value</item>
</item>

Objects:

Note: when passing in a class, the properties will be converted into values, with the property name being the 'input' and it's value being the value.

<item name="formData" xsi:type="object">Vendor\Module\Model\formData</item>

And the class looks like:

class formData {

     public $dynamicProperty;

     public function __construct()
     {
         $this->dynamicProperty = '10';
     }
}

You can then pass anything you want into the constructor using dependency injection to set the properties within the class. These properties will then be turned into arguments which will be submitted in the request.

The above class will add the following data to the request:

Array
(
    [dynamicProperty] => 10
)

Magento 2.2 Uploader component

1 Answers1