Magento – Magento2 image file in ui component form

imagemagento2

I have ui component layout for an image field

     <field name="image">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Showcase Image</item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="componentType" xsi:type="string">fileUploader</item>
                <item name="notice" xsi:type="string" translate="true">Allowed file types: ico, png, gif, jpg, jpeg, apng, svg. Not all browsers support all these formats!</item>
                <item name="maxFileSize" xsi:type="number">2097152</item>
                <item name="allowedExtensions" xsi:type="string">jpg jpeg gif png svg</item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="string">newstart_showcase_backend/showcase_image/upload</item>
                </item>
            </item>
        </argument>
    </field>

I have an save.php to save image name to database and another controller newstart_showcase_backend/showcase_image/upload to actually save the uploaded image to media folder. All these functions are working fine so far in "add new item" edit page. The real problem I have is image does not show when I open the existing item that I created. All other files are showing as expected, but not the image field. Any suggestion are appreciated. I can post more code here on demand if you need to check it. Thanks in advance.

Following is my main table A, and reference table B which stores store ID for each item in table A by referring the id

id  smallint(5) unsigned Auto Increment Entity ID
image   varchar(255)    Image Name
url varchar(255) [] Image Destination Url
caption varchar(255) NULL   Image Caption
start_date  date NULL    
end_date    date NULL    
order   smallint(6) [1] Image Ordering
status  tinyint(1) [1]  1 - Banner Enabled, 0 - Banner Disabled
created_at  timestamp [CURRENT_TIMESTAMP]   Created time
updated_at  timestamp [0000-00-00 00:00:00] Update time

At "add new item" page, there is uploader

Edit Page doesn't show image, and HOW CAN I MAKE IT SHOW HERE

Best Answer

Your DataProvider class's getData() method should include the image name & the image URL as an array like shown below:

foreach ($items as $item) {
            $itemData = $item->getData();
            $imageName = $itemData['image_name']; // Your database field 
            unset($itemData['image_path']);
            $itemData['image_path'] = array(
                array(
                    'name'  =>  $imageName,
                    'url'   =>  $imageUrl // Should return a URL to view the image. For example, http://domain.com/pub/media/../../imagename.jpeg
                )
            );
            $this->loadedData[$item->getItemId()] = $itemData;
        }

Related Solutions

Magento – Magento2 ui_component – form – image file input field

In Magento 2.1, this has actually become a lot easier.

A good Example for the implementation is the category form: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml#L148

Then you also need a Controller for the Image Upload: https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Controller/Adminhtml/Category/Image/Upload.php

And last but not least some logic in the save controller, which hopefully will get refactored soon:

https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Controller/Adminhtml/Category/Save.php#L259 https://github.com/magento/magento2/blob/develop/app/code/Magento/Catalog/Controller/Adminhtml/Category/Save.php#L82

Magento 2 – Add Image Form Element to Add/Edit Form

I found a way to do it without requiring a class attached to the field. I mean there is a class attached to the form element but not as a renderer.
The column should be defined as this:

<field name="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">[entity]</item>
            <item name="label" xsi:type="string" translate="true">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">[Namespace]_[Module]/image-preview</item>
            <item name="required" xsi:type="boolean">false</item>
            <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="[namespace_module]/[entity]_image/upload"/>
            </item>
        </item>
    </argument>
</field>

I also needed to create the preview template file referenced by [Namespace]_[Module]/image-preview.
That is app/code/[Namespace]/[Module]/view/adminhtml/web/template/image-preview.html that looks like this:

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

This code will generate a field like this:

After uploading an image (real time) it looks like this:

The url item inside the uploaderConfig is the url where the image is posted when uploaded. So I needed to create this also:

namespace [Namespace]\[Module]\Controller\Adminhtml\[Entity]\Image;

use Magento\Framework\Controller\ResultFactory;

/**
 * Class Upload
 */
class Upload extends \Magento\Backend\App\Action
{
    /**
     * Image uploader
     *
     * @var \[Namespace]\[Module]\Model\ImageUploader
     */
    protected $imageUploader;

    /**
     * @param \Magento\Backend\App\Action\Context $context
     * @param \[Namespace]\[Module]\Model\ImageUploader $imageUploader
     */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \[Namespace]\[Module]\Model\ImageUploader $imageUploader
    ) {
        parent::__construct($context);
        $this->imageUploader = $imageUploader;
    }

    /**
     * Check admin permissions for this controller
     *
     * @return boolean
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('[Namespace]_[Module]::[entity]');
    }

    /**
     * Upload file controller action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        try {
            $result = $this->imageUploader->saveFileToTmpDir('image');

            $result['cookie'] = [
                'name' => $this->_getSession()->getName(),
                'value' => $this->_getSession()->getSessionId(),
                'lifetime' => $this->_getSession()->getCookieLifetime(),
                'path' => $this->_getSession()->getCookiePath(),
                'domain' => $this->_getSession()->getCookieDomain(),
            ];
        } catch (\Exception $e) {
            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
        }
        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
    }
}

This class uses an instance of [Namespace]\[Module]\Model\ImageUploader that is similar to \Magento\Catalog\Model\ImageUploader.

This seams to work. I still have troubles saving the image in the db but that's a totally different issue.
I used as inspiration the image field for the category entity

Best Answer

Related Solutions

Magento – Magento2 ui_component – form – image file input field

Magento 2 – Add Image Form Element to Add/Edit Form

Related Topic