{"id":369570,"date":"2023-02-21T10:51:03","date_gmt":"2023-02-21T10:51:03","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=369570"},"modified":"2024-01-12T06:40:36","modified_gmt":"2024-01-12T06:40:36","slug":"how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/","title":{"rendered":"How to add media gallery field using ui-component for the admin custom form in Magento2."},"content":{"rendered":"\n

What is the ui-component in magento2: <\/a><\/strong><\/p>\n\n\n\n

Basically, we are using UI components in magento2 to create the Grids<\/strong>, Forms<\/strong>, Dialogs<\/strong> and etc. And we can easily be designed the form and grid for the user interface And we can easily add multiple types of fields to the form. So help of this blog we want to add the media gallery field on the admin custom ui-component form.<\/p>\n\n\n\n

Media Gallery:<\/strong><\/p>\n\n\n\n

To upload multiple images at the same time from one field in the form.<\/p>\n\n\n\n

Step1:<\/strong> We need to create the layout file to define the ui component form in view\/adminhtml\/layout\/routename_controllername_actionname.xml:<\/p>\n\n\n\n

<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <update handle="styles"\/>\n    <update handle="editor"\/>\n\t<body>\n\t    <referenceBlock name="menu">\n\t        <action method="setActive">\n   \t\t    <argument name="itemId" xsi:type="string">\n                        VendorName_ModuleName::businesslisting\n                    <\/argument>\n\t\t<\/action>\n\t    <\/referenceBlock>\n\t    <referenceBlock name="page.title">\n\t        <action method="setTitleClass">\n\t\t    <argument name="class" xsi:type="string">\n                        complex\n                    <\/argument>\n\t\t<\/action>\n\t    <\/referenceBlock>\n            <referenceContainer name="content">\n\t\t<uiComponent name="business_form"\/>\n\t    <\/referenceContainer>\n\t<\/body>\n<\/page><\/pre>\n\n\n\n
Step2:<\/strong> Create the ui-component form and we need to write below code to add the media gallery field:<\/p>\n\n\n\n
<fieldset name="gallery">\n    <argument name="data" xsi:type="array">\n        <item name="config" xsi:type="array">\n            <item name="collapsible" xsi:type="boolean">true<\/item>\n            <item name="label" xsi:type="string" translate="true">\n                Media Gallery\n            <\/item>\n            <item name="sortOrder" xsi:type="number">22<\/item>\n        <\/item>    \n    <\/argument>\n    <container name="gallery" >\n        <argument name="data" xsi:type="array">\n            <item name="config" xsi:type="array">\n                <item name="sortOrder" xsi:type="number">10<\/item>\n            <\/item>\n        <\/argument>\n        <htmlContent name="gallery">\n            <argument name="block" xsi:type="object">\nVendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form\\Gallery\n            <\/argument>\n        <\/htmlContent>\n    <\/container>\n<\/fieldset><\/pre>\n\n\n\n
Step3<\/strong>: Create the block file, VendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form\\Gallery<\/code>.php<\/p>\n\n\n\n
<?php\nnamespace \nVendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form;\n\nuse Magento\\Framework\\Registry;\n\nclass Gallery extends \\Magento\\Framework\\View\\Element\\AbstractBlock\n{\n    \/**\n     * Gallery field name suffix\n     *\n     * @var string\n     *\/\n    protected $fieldNameSuffix = 'business_list';\n\n    \/**\n     * Gallery html id\n     *\n     * @var string\n     *\/\n    protected $htmlId = 'media_gallery';\n\n    \/**\n     * Gallery name\n     *\n     * @var string\n     *\/\n    protected $name = 'media_gallery';\n\n    \/**\n     * Html id for data scope\n     *\n     * @var string\n     *\/\n    protected $image = 'image';\n\n    \/**\n     * @var string\n     *\/\n    protected $formName = 'business_form';\n\n    \/**\n     * @var \\Magento\\Framework\\Data\\Form\n     *\/\n    protected $form;\n\n    \/**\n     * @var Registry\n     *\/\n    protected $registry;\n\n    \/**\n     * @var \\VendorName\\ModuleName\\Model\\BusinessListFactory     *\/\n    protected $businessListFactory;\n\n    \/**\n     * @var \\Magento\\Store\\Model\\StoreManagerInterface\n     *\/\n    protected $storeManager;\n\n    \/**\n     * @param \\Magento\\Framework\\View\\Element\\Context $context\n     * @param Registry $registry\n     * @param \\Magento\\Framework\\Data\\Form $form\n     * @param array $data\n     *\/\n    public function __construct(\n        \\Magento\\Framework\\View\\Element\\Context $context,\n        Registry $registry,\n        \\Magento\\Framework\\Data\\Form $form,\n        \\VendorName\\ModuleName\\Model\\BusinessListFactory $businessListFactory,\n        \\Magento\\Store\\Model\\StoreManagerInterface $storeManager,\n        $data = []\n    ) {\n        $this->registry = $registry;\n        $this->form = $form;\n        $this->businessListFactory = $businessListFactory;\n        $this->storeManager = $storeManager;\n        parent::__construct($context, $data);\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getElementHtml()\n    {\n        return $this->getContentHtml();\n    }\n\n    \/**\n     * Get product images\n     *\n     * @return array|null\n     *\/\n    public function getImages()\n    {\n        $result = [];\n        $gallery = [];\n        $id = $this->registry->registry('id');\n        $businessList = $this->businessListFactory->create()->getCollection()->addFieldToFilter('entity_id', $id)->getFirstItem();\n        $mediaUrl = $this->storeManager->getStore()->getBaseUrl(\\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA);\n        if ($businessList->getMediaGallery()) {\n            $gallery = explode(";", $businessList->getMediaGallery());\n        }\n        if (count($gallery)) {\n            $result['images'] = [];\n            $position = 1;\n            foreach ($gallery as $image) {\n                $label = str_replace("business\/business\/mediagallery\/","",$image);\n                $result['images'][] = [\n                    'value_id' => $image,\n                    'file' => $image,\n                    'label' => $label,\n                    'position' => $position,\n                    'url' => $mediaUrl.$image,\n                ];\n                $position++;\n            }\n        }\n\n        return $result;\n    }\n\n    \/**\n     * Prepares content block\n     *\n     * @return string\n     *\/\n    public function getContentHtml()\n    {\n        $content = $this->getChildBlock('content');\n        if (!$content) {\n            $content = $this->getLayout()->createBlock(      \\VendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form\\Gallery\\Content::class,\n                '',\n                [\n                    'config' => [\n                        'parentComponent' => 'business_form.business_form.block_gallery.block_gallery'\n                    ]\n                ]\n            );\n        }\n\n        $content\n            ->setId($this->getHtmlId() . '_content')\n            ->setElement($this)\n            ->setFormName($this->formName);\n        $galleryJs = $content->getJsObjectName();\n        $content->getUploader()->getConfig()->setMegiaGallery($galleryJs);\n        return $content->toHtml();\n    }\n\n    \/**\n     * @return string\n     *\/\n    protected function getHtmlId()\n    {\n        return $this->htmlId;\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getName()\n    {\n        return $this->name;\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getFieldNameSuffix()\n    {\n        return $this->fieldNameSuffix;\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getDataScopeHtmlId()\n    {\n        return $this->image;\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function toHtml()\n    {\n        return $this->getElementHtml();\n    }\n}<\/pre>\n\n\n\n
Step4<\/strong>: Create another block file to pass the phtml path: VendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form\\Gallery<\/code>\\Content.php<\/p>\n\n\n\n
<?php\nnamespace VendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form\\Gallery;\n\nuse Magento\\Framework\\App\\ObjectManager;\nuse Magento\\Backend\\Block\\Media\\Uploader;\nuse Magento\\Framework\\View\\Element\\AbstractBlock;\n\nclass Content extends \\Magento\\Backend\\Block\\Widget\n{\n    \/**\n     * @var string\n     *\/\n    protected $_template = 'business\/form\/gallery.phtml';\n\n    \/**\n     * @var \\Magento\\Framework\\Json\\EncoderInterface\n     *\/\n    protected $_jsonEncoder;\n\n    \/**\n     * @var ImageUploadConfigDataProvider\n     *\/\n    private $imageUploadConfigDataProvider;\n\n    \/**\n     * Content constructor.\n     * @param \\Magento\\Backend\\Block\\Template\\Context $context\n     * @param \\Magento\\Framework\\Json\\EncoderInterface $jsonEncoder\n     * @param array $data\n     * @param null $imageUploadConfigDataProvider\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        \\Magento\\Framework\\Json\\EncoderInterface $jsonEncoder,\n        array $data = [],\n        $imageUploadConfigDataProvider = null\n    ) {\n        $this->_jsonEncoder = $jsonEncoder;\n        parent::__construct($context, $data);\n        try {\n            \/* Try for old magento version where ImageUploadConfigDataProvider does not exist *\/\n            if (class_exists(\\Magento\\Backend\\Block\\DataProviders\\ImageUploadConfig::class)) {\n                $this->imageUploadConfigDataProvider = $imageUploadConfigDataProvider\n                    ?: ObjectManager::getInstance()->get(\\Magento\\Backend\\Block\\DataProviders\\ImageUploadConfig::class);\n            } elseif (class_exists(\\Magento\\Backend\\Block\\DataProviders\\UploadConfig::class)) {\n                \/* Workaround for Magento 2.2.8 *\/\n                $this->imageUploadConfigDataProvider = ObjectManager::getInstance()->get(\n                    \\Magento\\Backend\\Block\\DataProviders\\UploadConfig::class\n                );\n            }\n        } catch (\\Exception $e) {\n            return;\n        }\n    }\n\n    \/**\n     * @return AbstractBlock\n     *\/\n    protected function _prepareLayout()\n    {\n        $this->addChild(\n            'uploader',\n            \\Magento\\Backend\\Block\\Media\\Uploader::class,\n            ['image_upload_config_data' => $this->imageUploadConfigDataProvider]\n        );\n\n        $this->getUploader()->getConfig()->setUrl(\n            $this->_urlBuilder->getUrl('business\/listing_upload\/gallery')\n        )->setFileField(\n            'image'\n        )->setFilters(\n            [\n                'images' => [\n                    'label' => __('Images (.gif, .jpg, .png)'),\n                    'files' => ['*.gif', '*.jpg', '*.jpeg', '*.png'],\n                ],\n            ]\n        );\n\n        $this->_eventManager->dispatch('business_listing_gallery_prepare_layout', ['block' => $this]);\n\n        return parent::_prepareLayout();\n    }\n\n    \/**\n     * Retrieve uploader block\n     *\n     * @return Uploader\n     *\/\n    public function getUploader()\n    {\n        return $this->getChildBlock('uploader');\n    }\n\n    \/**\n     * Retrieve uploader block html\n     *\n     * @return string\n     *\/\n    public function getUploaderHtml()\n    {\n        return $this->getChildHtml('uploader');\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getJsObjectName()\n    {\n        return $this->getHtmlId() . 'JsObject';\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getAddImagesButton()\n    {\n        return $this->getButtonHtml(\n            __('Add New Images'),\n            $this->getJsObjectName() . '.showUploader()',\n            'add',\n            $this->getHtmlId() . '_add_images_button'\n        );\n    }\n\n    \/**\n     * @return string\n     *\/\n    public function getImagesJson()\n    {\n        $value = $this->getElement()->getImages();\n        if (is_array($value) &&\n            array_key_exists('images', $value) &&\n            is_array($value['images']) &&\n            count($value['images'])\n        ) {\n            $images = $this->sortImagesByPosition($value['images']);\n\n            return $this->_jsonEncoder->encode($images);\n        }\n        return '[]';\n    }\n\n    \/**\n     * Sort images array by position key\n     *\n     * @param array $images\n     * @return array\n     *\/\n    private function sortImagesByPosition($images)\n    {\n        if (is_array($images)) {\n            usort($images, function ($imageA, $imageB) {\n                return ($imageA['position'] < $imageB['position']) ? -1 : 1;\n            });\n        }\n        return $images;\n    }\n}<\/pre>\n\n\n\n
Step5<\/strong>: Create the phtml file to declare the js content and file: \/view\/adminhtml\/templates\/business\/form\/gallery.phtml<\/p>\n\n\n\n
<?php\n\/** @var $block \\VendorName\\ModuleName\\Block\\Adminhtml\\Listing\\Helper\\Form\\Gallery\\Content *\/\n$elementName = $block->getElement()->getName() . '[images]';\n$formName = $block->getFormName();\n?>\n<div id="<?= $block->getHtmlId() ?>"\n     class="gallery"\n     data-mage-init='{"VendorName_ModuleName\/js\/post-gallery":{"template":"#<?= $block->getHtmlId() ?>-template"}}'     data-parent-component="<?= $block->escapeHtml($block->getData('config\/parentComponent')) ?>"\n     data-images="<?= $block->escapeHtml($block->getImagesJson()) ?>"\n     data-types="{}"\n    >\n    <?php if (!$block->getElement()->getReadonly()) {?>\n        <div class="image image-placeholder">\n            <?= $block->getUploaderHtml(); ?>\n            <div class="product-image-wrapper">\n                <p class="image-placeholder-text">\n                    <?=  $block->escapeHtml(__('Browse to find or drag image here')); ?>\n                <\/p>\n            <\/div>\n        <\/div>\n    <?php } ?>\n\n    <script id="<?= $block->getHtmlId() ?>-template" type="text\/x-magento-template">\n        <div class="image item<% if (data.disabled == 1) { %> hidden-for-front<% } %>"\n             data-role="image">\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][position]"\n                   value="<%- data.position %>"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   class="position"\/>\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][file]"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   value="<%- data.file %>"\/>\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][value_id]"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   value="<%- data.value_id %>"\/>\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][label]"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   value="<%- data.label %>"\/>\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][disabled]"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   value="<%- data.disabled %>"\/>\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][media_type]"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   value="image"\/>\n            <input type="hidden"\n                   name="<?= $block->escapeHtml($elementName) ?>[<%- data.file_id %>][removed]"\n                   data-form-part="<?= $block->escapeHtml($formName) ?>"\n                   value=""\n                   class="is-removed"\/>\n\n            <div class="product-image-wrapper">\n                <img class="product-image"\n                     data-role="image-element"\n                     src="<%- data.url %>"\n                     alt="<%- data.label %>"\/>\n\n                <div class="actions">\n                    <button type="button"\n                            class="action-remove"\n                            data-role="delete-button"\n                            title="<?= $block->escapeHtml(__('Delete image')) ?>">\n                    <span>\n                        <?= $block->escapeHtml(__('Delete image')) ?>\n                    <\/span>\n                    <\/button>\n                    <div class="draggable-handle"><\/div>\n                <\/div>\n                <div class="image-fade">\n                    <span><?= $block->escapeHtml(__('Hidden')) ?><\/span>\n                <\/div>\n            <\/div>\n\n            <div class="item-description">\n                <div class="item-title" data-role="img-title"><%- data.label %><\/div>\n            <\/div>\n        <\/div>\n    <\/script>\n<\/div>\n<script>\n    jQuery('body').trigger('contentUpdated');\n<\/script><\/pre>\n\n\n\n
Step6<\/strong>: Create the js file to write the js code: view\/adminhtml\/web\/js\/post-gallery.js<\/p>\n\n\n\n
define([\n    'jquery',\n    'underscore',\n    'mage\/template',\n    'uiRegistry',\n    'productGallery',\n    'jquery-ui-modules\/core',\n    'jquery-ui-modules\/widget',\n    'baseImage'\n], function ($, _, mageTemplate, registry, productGallery) {\n    'use strict';\n    $.widget('mage.productGallery', $.mage.productGallery, {\n        _showDialog: function (imageData) {}\n    });\n    return $.mage.productGallery;\n});<\/pre>\n\n\n\n
After created above files we need to run these commands from our end:<\/p>\n\n\n\n
php bin\/magento setup:di:compile<\/strong><\/p>\n\n\n\n
php bin\/magento setup:static-content:deploy<\/strong> <\/p>\n\n\n\n
php bin\/magento cache:flush<\/strong><\/p>\n\n\n\n
\"Media<\/figure>\n\n\n\n
Step7<\/strong>: After create the field then we can save the multiple image through this code:<\/p>\n\n\n\n
<?php\nnamespace VendorName\\ModuleName\\Controller\\Adminhtml\\Upload\\Image;\n\nuse Magento\\Framework\\Controller\\ResultFactory;\n\n\/**\n * Business media image upload controller\n *\/\nabstract class Action extends \\Magento\\Catalog\\Controller\\Adminhtml\\Category\\Image\\Upload\n{\n    \/**\n     * File key\n     *\n     * @var string\n     *\/\n    protected $_fileKey;\n\n    public function execute()\n    {\n        try {\n            $result = $this->imageUploader->saveFileToTmpDir($this->_fileKey);\n\n            $result['cookie'] = [\n                'name' => $this->_getSession()->getName(),\n                'value' => $this->_getSession()->getSessionId(),\n                'lifetime' => $this->_getSession()->getCookieLifetime(),\n                'path' => $this->_getSession()->getCookiePath(),\n                'domain' => $this->_getSession()->getCookieDomain(),\n            ];\n        } catch (\\Exception $e) {\n            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];\n        }\n        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);\n    }\n}<\/pre>\n\n\n\n
<?php\nnamespace VendorName\\ModuleName\\Controller\\Adminhtml\\Listing\\Upload;\n\nuse VendorName\\ModuleName\\Controller\\Adminhtml\\Upload\\Image\\Action;\n\n\/**\n * busimess gallery image upload controller\n *\/\nclass Gallery extends Action\n{\n    \/**\n     * File key\n     *\n     * @var string\n     *\/\n    protected $_fileKey = 'image';\n}<\/pre>\n\n\n\n
VendorName\\ModuleName<\/code><\/strong>\\Controller\\Adminhtml\\Listing\\Save.php<\/strong><\/p>\n\n\n\n
<?php\n\nnamespace VendorName\\ModuleName\\Controller\\Adminhtml\\Listing;\n\nuse Magento\\Backend\\App\\Action;\nuse Magento\\Backend\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\Filesystem\\DirectoryList;\nuse Magento\\Framework\\Filesystem;\nuse Magento\\Framework\\Filesystem\\Driver\\File;\n\nclass Save extends Action\n{\n    \/**\n     * @var Magento\\Framework\\View\\Result\\PageFactory\n     *\/\n    protected $resultPageFactory;\n\n    \/**\n     * @var \\Magento\\Backend\\Model\\View\\Result\\ForwardFactory\n     *\/\n    protected $resultForwardFactory;\n\n    \/**\n     * @var \\Magento\\Framework\\Filesystem\\Directory\\WriteInterface\n     *\/\n    protected $mediaDirectory;\n\n    \/**\n     * @var \\Magento\\Framework\\Filesystem\\Driver\\File\n     *\/\n    protected $fileDriver;\n\n    \/**\n     * @var Filesystem\n     *\/\n    protected $filesystem;\n\n    \/**\n     * @var \\Magento\\MediaStorage\\Helper\\File\\Storage\\Database\n     *\/\n    protected $coreFileStorageDatabase;\n\n    \/**\n     * @var Webkul\\Businessform\\Model\\BusinessListFactory *\/\n    protected $businessListFactory;\n\n    \/**\n     * @var \\Magento\\Framework\\Registry\n     *\/\n    protected $coreRegistry = null;\n\n    \/**\n     * @param Context $context\n     * @param PageFactory $resultPageFactory\n     * @param \\Magento\\Backend\\Model\\View\\Result\\ForwardFactory $resultForwardFactory\n     * @param Filesystem $filesystem\n     * @param \\Magento\\MediaStorage\\Helper\\File\\Storage\\Database $coreFileStorageDatabase\n     * @param File $fileDriver\n     * @param \\VendorName\\ModuleName\\Model\\BusinessListFactory $businessListFactory\n     * @param \\Magento\\Framework\\Registry $coreRegistry\n     *\/\n    public function __construct(\n        Context $context,\n        PageFactory $resultPageFactory,\n        \\Magento\\Backend\\Model\\View\\Result\\ForwardFactory $resultForwardFactory,\n        Filesystem $filesystem,\n        \\Magento\\MediaStorage\\Helper\\File\\Storage\\Database $coreFileStorageDatabase,\n        File $fileDriver,\n        \\VendorName\\ModuleName\\Model\\BusinessListFactory $businessListFactory,\n        \\Magento\\Framework\\Registry $coreRegistry\n    ) {\n        parent::__construct($context);\n        $this->resultPageFactory = $resultPageFactory;\n        $this->resultForwardFactory = $resultForwardFactory;\n        $this->fileDriver = $fileDriver;\n        $this->filesystem = $filesystem;\n        $this->mediaDirectory = $filesystem->getDirectoryWrite(DirectoryList::MEDIA);\n        $this->coreFileStorageDatabase = $coreFileStorageDatabase;\n        $this->businessListFactory = $businessListFactory;\n        $this->coreRegistry = $coreRegistry;\n    }\n\n    \/**\n     * Save Media Gallery Data\n     *\n     * @return \\Magento\\Framework\\App\\Response\\Http\n     *\/\n    public function execute()\n    {\n        $resultRedirect = $this->resultRedirectFactory->create();\n        $originalRequestData = $this->getRequest()->getPostValue();\n        $galleryArray = $this->uploadMediaGallery($originalRequestData);\n        if(!empty($galleryArray)){\n            $mediaGallery = implode(';',$galleryArray);\n            $data['media_gallery'] = $mediaGallery;\n            $businessList = $this->businessListFactory->create();\n            $businessList->setData($data)->save();\n            $id = $businessList->getId();\n            $this->coreRegistry->register("entity_id", $id);\n            $this->messageManager->addSuccess("Gallery data has been saved.");\n            return $resultRedirect->setPath('*\/*\/edit',['entity_id'=> $id]);\n        } else{\n            $this->messageManager->addError(\n                __('Something went wrong while saving the media gallery.')\n            );\n            return $resultRedirect->setPath('*\/*\/edit');\n        }\n       \n    }\n\n    \/**\n     * Upload MediaGallery\n     *\n     * @return array Data\n     *\/\n    public function uploadMediaGallery($data)\n    {\n        $bannerimageDirPath = $this->mediaDirectory->getAbsolutePath("business\/business\/mediagallery");\n        $tmp = $this->mediaDirectory->getAbsolutePath("business\/business\/mediagallery\/tmp");\n        if (!$this->fileDriver->isExists($bannerimageDirPath)) {\n            $this->fileDriver->createDirectory($bannerimageDirPath, 0777);\n            $this->fileDriver->createDirectory($tmp, 0777);\n        }\n        $gallery = [];\n        if (!empty($data['media_gallery']['images'])) {\n            $images = $data['media_gallery']['images'];\n            foreach ($images as $image) {\n                if (empty($image['removed'])) {\n                    if (!empty($image['value_id'])) {\n                        $gallery[] = $image['value_id'];\n                    } elseif (!empty($image['file'])) {\n                        $originalImageName = $image['file'];\n                        $imageName = $originalImageName;\n                        $basePath = "business\/business\/mediagallery";\n                        $baseTmpImagePath = "catalog\/tmp\/category\/" . $imageName;\n                        $baseImagePath = $basePath . "\/" . $imageName;\n                        $mediaPath = $this->filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath();\n                        $baseImageAbsolutePath = $mediaPath . $baseImagePath;\n                        $i = 1;\n                        while (file_exists($baseImageAbsolutePath)) {\n                            $i++;\n                            $p = mb_strrpos($originalImageName, '.');\n                            if (false !== $p) {\n                                $imageName = mb_substr($originalImageName, 0, $p) . $i .  mb_substr($originalImageName, $p);\n                            } else {\n                                $imageName = $originalImageName . $i;\n                            }\n                            $baseImagePath = $basePath . "\/" . $imageName;\n                            $baseImageAbsolutePath = $mediaPath . $baseImagePath;\n                        }\n                        $this->coreFileStorageDatabase->copyFile(\n                            $baseTmpImagePath,\n                            $baseImagePath\n                        );\n                        $this->mediaDirectory->renameFile(\n                            $baseTmpImagePath,\n                            $baseImagePath\n                        );\n\n                        $gallery[] = $baseImagePath;\n                    }\n                }\n            }\n        }\n        return $gallery;\n    }\n}<\/pre>\n\n\n\n
After uploading the images will show in the form:<\/p>\n\n\n\n
\"blog\"<\/figure>\n\n\n\n
Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"
What is the ui-component in magento2: Basically, we are using UI components in magento2 to create the Grids, Forms, Dialogs and etc. And we can easily be designed the form and grid for the user interface And we can easily add multiple types of fields to the form. So help of this blog we want […]<\/a><\/p>\n","protected":false},"author":368,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[],"class_list":["post-369570","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"\nHow to add media gallery field using ui-component for the admin custom form in Magento2.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add media gallery field using ui-component for the admin custom form in Magento2.\" \/>\n<meta property=\"og:description\" content=\"What is the ui-component in magento2: Basically, we are using UI components in magento2 to create the Grids, Forms, Dialogs and etc. And we can easily be designed the form and grid for the user interface And we can easily add multiple types of fields to the form. So help of this blog we want [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-21T10:51:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-12T06:40:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322-1200x617.png\" \/>\n<meta name=\"author\" content=\"Anurag Jain\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anurag Jain\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\"},\"author\":{\"name\":\"Anurag Jain\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/c62926ca988352d74ad5c2e85fcd4a63\"},\"headline\":\"How to add media gallery field using ui-component for the admin custom form in Magento2.\",\"datePublished\":\"2023-02-21T10:51:03+00:00\",\"dateModified\":\"2024-01-12T06:40:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\"},\"wordCount\":251,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322-1200x617.png\",\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\",\"name\":\"How to add media gallery field using ui-component for the admin custom form in Magento2.\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322-1200x617.png\",\"datePublished\":\"2023-02-21T10:51:03+00:00\",\"dateModified\":\"2024-01-12T06:40:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322.png\",\"width\":1290,\"height\":663,\"caption\":\"Selection_322\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add media gallery field using ui-component for the admin custom form in Magento2.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/c62926ca988352d74ad5c2e85fcd4a63\",\"name\":\"Anurag Jain\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e15e522c60de7a76ffd1efc2152f6d848fcd5c14ce27b1d30bac29701d4c9837?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e15e522c60de7a76ffd1efc2152f6d848fcd5c14ce27b1d30bac29701d4c9837?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Anurag Jain\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/anuragjain-magento209\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add media gallery field using ui-component for the admin custom form in Magento2.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/","og_locale":"en_US","og_type":"article","og_title":"How to add media gallery field using ui-component for the admin custom form in Magento2.","og_description":"What is the ui-component in magento2: Basically, we are using UI components in magento2 to create the Grids, Forms, Dialogs and etc. And we can easily be designed the form and grid for the user interface And we can easily add multiple types of fields to the form. So help of this blog we want [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-02-21T10:51:03+00:00","article_modified_time":"2024-01-12T06:40:36+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322-1200x617.png","type":"","width":"","height":""}],"author":"Anurag Jain","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Anurag Jain","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/"},"author":{"name":"Anurag Jain","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/c62926ca988352d74ad5c2e85fcd4a63"},"headline":"How to add media gallery field using ui-component for the admin custom form in Magento2.","datePublished":"2023-02-21T10:51:03+00:00","dateModified":"2024-01-12T06:40:36+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/"},"wordCount":251,"commentCount":3,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322-1200x617.png","articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/","url":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/","name":"How to add media gallery field using ui-component for the admin custom form in Magento2.","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322-1200x617.png","datePublished":"2023-02-21T10:51:03+00:00","dateModified":"2024-01-12T06:40:36+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/Selection_322.png","width":1290,"height":663,"caption":"Selection_322"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-add-media-gallery-field-using-ui-component-for-the-admin-custom-form-in-magento2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to add media gallery field using ui-component for the admin custom form in Magento2."}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/c62926ca988352d74ad5c2e85fcd4a63","name":"Anurag Jain","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e15e522c60de7a76ffd1efc2152f6d848fcd5c14ce27b1d30bac29701d4c9837?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e15e522c60de7a76ffd1efc2152f6d848fcd5c14ce27b1d30bac29701d4c9837?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Anurag Jain"},"url":"https:\/\/webkul.com\/blog\/author\/anuragjain-magento209\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/369570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/368"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=369570"}],"version-history":[{"count":16,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/369570\/revisions"}],"predecessor-version":[{"id":417635,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/369570\/revisions\/417635"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=369570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=369570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=369570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}