How to Add Image Field and Preview Image in Magento 2 Admin UI Component Form

Images and videos enhance the user experience of any online store. It helps the visitors to interact with your site in a better manner. Also, visual representation is always better than text content so that the information is delivered in an effective manner.

Hence, the Magento 2 store admin may often require to add images in UI component form.

For example, add customer profile images or document images for verification.

Also, the facility to display the image preview while uploading the images can be helpful to judge the appearance of the image.

As the default Magento 2 does not offer the option for the same, here’s the solution to add image field and preview image in Magento 2 admin UI component form.

You can use the below code to implement image field as shown below:

Add Image Field and Preview Image in Magento 2 Admin UI Component Form

 

Method to Add Image Field and Preview Image in Magento 2 Admin UI Component Form:

  1. Create app/code/Vendor/Module/view/adminhtml/ui_component/product_labels_edit.xml
  2. Create app/code/Vendor/Module/Controller/Adminhtml/Index/Upload.php
  3. Create app/code/Vendor/Module/Model/ImageUploader.php
  4. Create app/code/Vendor/Module/view/adminhtml/web/template/image-preview.html
  5. Create app/code/Vendor/Module/etc/di.xml

That’s it.

Any doubts? Do mention them in the Comments section below. I’d be happy to help you out.

Also, do share the solution with the Magento Community via social media.

Thank you.

5
(based on 10 Reviews)
How to Add Image Field and Preview Image in Magento 2 Admin UI Component Form

Milan Vaghela

Milan is a Magento Developer at Meetanshi. Apart from work, he plays cricket passionately. He loves reading books in his free time.

Leave a Reply

Your email address will not be published. Required fields are marked *