Magento 2.2: Weird $_files array after image upload

Question

currently I'm trying to develop an image upload in the Magento admin area with ui components. My fieldset declarations looks like this:

<fieldset name="slide">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Slide Konfiguration</item>
            </item>
        </argument>

        <!-- other fields -->

        <field name="image">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="required" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string">Bild*</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="cssslider/configuration/upload"/>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>

My upload action contains this line

$result = $this->imageUploader->upload('slide');

If I stop code here with a breakpoint and inspect the $_files array, it looks like this:

Every item in the slides array contains another array?! (Whyyy?!!) And because of this my code throws an exception in the Magento\Framework\File\Uploader class in line 162 where it checks, if the file already exists:

if (!file_exists($this->_file['tmp_name'])) {

$this->_file contains the slide-array of the $_files array.

Anybody got an idea what I need to do to fix this issue?

Answer 1

Didn't test this, but I think

$result = $this->imageUploader->upload('slide'); 

should be

$result = $this->imageUploader->upload('image'); //use the name of the field not of the fieldset.  

Also add this inside the <item name="config" xsi:type="array"> element

<item name="dataScope" xsi:type="string">image</item>

Answer 2

Change the uploaderConfig to:

 <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="string">cssslider/configuration/upload</item>
    </item>

Answer 3

You could use my code from here https://github.com/konarshankar07/magento2-cms-hero-image. It will help you to fix your issue. Can you please add more code like di.xml code and upload.php code? It might be easy for me to fix this issue

Thanks

Answer 4

You could try my personal code for the image uploader on Ui component

    <field name="banner_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">template</item>
                <item name="label" xsi:type="string" translate="true">Banner 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">Vendor_Module/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="vendor_module/template_banner/upload"/>
                </item>
            </item>
        </argument>
    </field>

app/code/Vendor/Module/view/adminhtml/web/template/image-preview.html

<div class="file-uploader-summary">
    <div class="file-uploader-preview">
        <a attr="href: $parent.getFilePreview($file)" target="_blank">
            <img
                class="preview-image"
                tabindex="0"
                event="load: $parent.onPreviewLoad.bind($parent)"
                attr="
                    src: $parent.getFilePreview($file),
                    alt: $file.name">
        </a>

        <div class="actions">
            <button
                type="button"
                class="action-remove"
                data-role="delete-button"
                attr="title: $t('Delete image')"
                click="$parent.removeFile.bind($parent, $file)">
                <span translate="'Delete image'"/>
            </button>
        </div>
    </div>

    <div class="file-uploader-filename" text="$file.name"/>
    <div class="file-uploader-meta">
        <text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>
    </div>
</div>

From Save controller

$data = $this->getRequest()->getPostValue();
$data = $this->_filterPostData($data);
$model->setData($data)->save();

Add another filter for image uploader to avoid error before save

/**
 * Filter template data.
 *
 * @param array $rawData
 * @return array
 */
protected function _filterPostData(array $rawData)
{
    $data = $rawData;
    // @todo It is a workaround to prevent saving this data in category model and it has to be refactored in future
    if (isset($data['banner_image']) && is_array($data['banner_image'])) {
        if (!empty($data['banner_image']['delete'])) {
            $data['banner_image'] = null;
        } else {
            if (isset($data['banner_image'][0]['name']) && isset($data['banner_image'][0]['tmp_name'])) {
                $data['banner_image'] = $data['banner_image'][0]['name'];
            } else {
                unset($data['banner_image']);
            }
        }
    }
    return $data;
}

Answer 5

I add the same issue.

Your upload action should be like this :

$result = $this->imageUploader->upload('slide[image]');

Answer 6

I would like to extend @Marius excellent response as I myself got into the same issue with a little difference.

In my case what was making the $_FILES having this strange format is that I had in my form ui component

    <dataScope>data.general</dataScope>

changing the scope to

    <dataScope>data</dataScope>

fixed the $_FILEs having a weird format and everything went fine after that.

I had the same issue for all the data saved and had previously added a 'general' tag to my params array...so i just removed it to suits the new proper dataScope.

Why did I got tricked like that ? Because i generated the main piece of code using the Magento phpstorm plugin and the datascope escaped my attention as originally before adding the image to my form everything were doing well.