Uncaught TypeError: value.map is not a function coming from file-uploader.js

Question

I am running Magento 2.2.3

When I try and go to admin/catalog/category/ and select a category it just spins and I get this javascript error.

file-uploader.js:74 
Uncaught TypeError: value.map is not a function
at UiClass.setInitialValue (file-uploader.js:74)
at UiClass.initialize (abstract.js:73)
at UiClass.initialize (wrapper.js:109)
at new UiClass (class.js:49)
at Object.initComponent (layout.js:137)
at fire (jquery.js:3232)
at Object.fireWith [as resolveWith] (jquery.js:3362)
at Object.deferred.(/admin_1u9idw/catalog/category/edit/key/6bfefd3ede425d7d38ed258f6746c49ffc93015a1417f514ea0773cbf7c503ea/id/165/anonymous function) (http://magento.local/static/version1524775074/adminhtml/Magento/backend/en_US/jquery.js:3461:37)
at fire (jquery.js:3232)
at Object.fireWith [as resolveWith] (jquery.js:3362)

file-uploader.js is a core file I believe, and I have never touched it.

This is the code in the file that is giving me the error-

 /**
     * Defines initial value of the instance.
     *
     * @returns {FileUploader} Chainable.
     */
    setInitialValue: function () {
        var value = this.getInitialValue();

        value = value.map(this.processFile, this);

        this.initialValue = value.slice();

        this.value(value);
        this.on('value', this.onUpdate.bind(this));
        this.isUseDefault(this.disabled());

        return this;
    },

Specifically this line- value = value.map(this.processFile, this);

This is all core Magento and I have never touched any of the code. I have done the standard clear cache, clear browser, deploy static content, reindex, and remove static files.

I have made a child theme off the blank theme.

Answer 1

If anyone is coming here because you are creating a custom fileUploader element. Your data has to be an array of arrays. The fileUploader expects multiple files.

I changed my image_value to an array when loading the data.

$item->setData("image_value", [[$item->getData("image_value")]]);

Answer 2

For anyone struggling with what I had: to render the image after saving the image, the UI component needs an array to be passed back to it. For me I had to create: [Vendor]\[Module]\Ui\DataProvider\[element]\Form\Modifier\[element]Data.php (for example if your element is "Store" it will be StoreData.php. The contents of your [element]Data file should be:

namespace [Vendor]\[Module]\Ui\DataProvider\[element]\Form\Modifier;

use Magento\Ui\DataProvider\Modifier\ModifierInterface;
use [Vendor]\[Module]\Model\ResourceModel\[element]\CollectionFactory;

class [element]Data implements ModifierInterface
{
    /**
     * @var \[Vendor]\[Module]\Model\ResourceModel\[element]\Collection
     */
    protected $collection;

    /**
     * @param CollectionFactory $CollectionFactory
     */
    public function __construct(
        CollectionFactory $CollectionFactory
    ) {
        $this->collection = $CollectionFactory->create();
    }

    /**
     * @param array $meta
     * @return array
     */
    public function modifyMeta(array $meta)
    {
        return $meta;
    }

    /**
     * @param array $data
     * @return array|mixed
     * @throws \Magento\Framework\Exception\LocalizedException
     */
    public function modifyData(array $data)
    {
        $items = $this->collection->getItems();
        foreach ($items as $element) {
            $_data = $element->getData();
            if (isset($_data['image'])) { //have a look in $_data to make sure "image" is the index you want.
                $image = [];
                $image[0]['name'] = $element->getImage();
                $image[0]['url'] = $element->getImageUrl($image[0]['name']);
                $_data['image'] = $image;
            }
            $element->setData($_data);
            $data[$element->getId()] = $_data;
        }
        return $data;
    }
}

And then in your di.xml, you need something like this:

<virtualType name="{your modifier pool name, i've called mine VendorModuleUiElementFormModifierPool" type="Magento\Ui\DataProvider\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="[element]_data" xsi:type="array">
                <item name="class" xsi:type="string">[vendor]\[Module]\Ui\[Element]\Form\Modifier\[element]Data</item>
            </item>
        </argument>
    </arguments>
</virtualType>

Essentially whatever your data provider is for your form page, make sure the data being provided for your image uploader is an array. The code for this is

        $image = $element->getImage();
        if (isset($image)) {
            $image = [];
            $image[0]['name'] = $element->getImage();
            $image[0]['url'] = $element->getImageUrl();
        }

Answer 3

The problem is with Amasty Layered Navigation. If that is disabled everything works fine.