Categories
Magento 2

Magento 2 – Admin form UI Component ImageUploader Field.

In this article today I will disuse about Magento 2 – admin form UI Component imageUploader field. This article is include all steps UI Components tutorial for image upload from your custom module. UI Component imageUploader xml form field, Show image in edit form, Save image info in database.

Below example code is based on a custom module “Extendfeature_RequestQuote” this is my custom module.

Best article for frontend custom form image uploader
Magento 2 – File or image upload via frontend custom module form and Controller

Step 1: Add UI Component imageUploader field

Please add/create following UI component imageUploader code in your UI form located in Extendfeature/RequestQuote/view/adminhtml/ui_component/form.xml file. My image uploader field name is “filesubmission” show field as “File Attachment” in admin form.

Step 2: Create image-preview.html template file

Please add/create image preview template with following code located in Extendfeature/RequestQuote/view/adminhtml/web/template/image-preview.html file.

Step 3: Crate image upload admin Controller file

Now create a adminhtml image upload Controller Filesubmission.php for image upload in Extendfeature\RequestQuote\Controller\Adminhtml\Requestquote\Filesubmission.php file with following code.

Step 4: Crate image upload Model

Now we create a image upload Model ImageUploader.php, in this we added more methods related upload image into pub/media/requestaquote directory, here “requestaquote” is IMAGE_UPLOAD_DIRECTORY name. Please create a model file with following code.

Step 5: Define Image Uploader configuration in di.xml file

Define Image Uploader configuration in your module di di.xml file with following code, File located in Extendfeature/RequestQuote/etc/di.xml.

Magento 2 - Admin form UI Component ImageUploader Field

Step 6: Image name save into the database field

To save image name into the database field please add follow below code into Save controller Extendfeature/RequestQuote/Controller/Adminhtml/Requestquote/Save.php file inside execute method.

Step 7: Display image after save records in edit form

Now add following code into DataProvider like Extendfeature/RequestQuote/Model/Requestquote/DataProvider.php File to display image after save records inside public function getData() method.

Now, Execute below commands via SHELL and enjoy image uploader function in your UI form.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.