1

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: enter image description here

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?

4
+25

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>
0

Change the uploaderConfig to:

 <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="string">cssslider/configuration/upload</item>
    </item>
  • Unfortunately no change. Still the same error with this code. – jennymo Mar 27 '18 at 7:18
0

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

0

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;
}
0

I add the same issue.

Your upload action should be like this :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.