15

I am using magento 2.1

I need to upload multiple images and video using ui component

Like magento-admin -> products -> caralog -> product

enter image description here

what do i need to do to achieve this ?

  • Still M2 use old style code for 'Image and Video' without UI_Component? Do you need this? – Sohel Rana Jan 18 '17 at 18:25
7

Finally i got the answer

I refer this module and implement in my custom module

Find below useful code :

following below steps

1) create layout.xml

[vendor]/[module]/operation/view/adminhtml/layout/layout_edit.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <body>
            <referenceContainer name="content">
                <uiComponent name="sample_form"/>
            </referenceContainer>
            <referenceContainer name="sample_form">
                <block name="gallery" class="[vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery">
                    <arguments>
                        <argument name="config" xsi:type="array">
                            <item name="label" xsi:type="string" translate="true">Images</item>
                            <item name="collapsible" xsi:type="boolean">true</item>
                            <item name="opened" xsi:type="boolean">false</item>
                            <item name="sortOrder" xsi:type="string">22</item>
                            <item name="canShow" xsi:type="boolean">true</item>
                            <item name="componentType" xsi:type="string">fieldset</item>
                        </argument>
                    </arguments>
                    <block class="[vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery\Content" as="content" template="[vendor]_[[module]::helper/gallery.phtml">
                        <arguments>
                            <argument name="config" xsi:type="array">
                                <item name="parentComponent" xsi:type="string">sample_form.sample_form.block_gallery.block_gallery</item>

                            </argument>
                        </arguments>

                    </block>
                </block>
            </referenceContainer>

    </body>
</page>

2) Create helper block

[vendor]/[module]/Block/Adminhtml/Grid/Helper/Form/Gallery.php

namespace [vendor]\[module]\Block\Adminhtml\Grid\Helper\Form;

use Magento\Framework\Registry;
use Magento\Catalog\Model\Product;
use Magento\Eav\Model\Entity\Attribute;
use Magento\Catalog\Api\Data\ProductInterface;

class Gallery extends \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery
{
    /**
     * @var here you set your ui form 
     */
    protected $formName = 'sample_form';

}

3) Create helper form block

[vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery\Content.php

namespace [vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery;

use Magento\Framework\Data\Form\Element\AbstractElement;
use Magento\Backend\Block\Media\Uploader;
use Magento\Framework\View\Element\AbstractBlock;
use Magento\Framework\App\Filesystem\DirectoryList;

class Content extends \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content
{


    protected function _prepareLayout()
    {
        $this->addChild('uploader', 'Magento\Backend\Block\Media\Uploader');

        $a = $this->getUploader()->getConfig()->setUrl(
            $this->_urlBuilder->addSessionParam()->getUrl('[vendor]/grid_gallery/upload')/* here set you upload Controller */
        )->setFileField(
            'image'
        )->setFilters(
            [
                'images' => [
                    'label' => __('Images (.gif, .jpg, .png)'),
                    'files' => ['*.gif', '*.jpg', '*.jpeg', '*.png'],
                ],
            ]
        );

    }


    public function getImageTypes()
    {
        return '[]';
    }

    public function getMediaAttributes()
    {
        return '[]';
    }

}

Note :- you should extends properly above both blocks

4) Create template

You should copy gallery.phtml form vendor/magento/module-product-video/view/adminhtml/templates/helper/gallery.phtml and modified it as par your requirement and pest in your module [vendor]/[module]/view/adminhtml/templates/helper/gallery.phtml

Please let me know in comment if you need any help

  • i am getting error as OBJECT DOM document should be created – vijay b Feb 8 '17 at 10:16
  • @vijayb can you please put this error here – Deexit Sanghani Feb 8 '17 at 12:07
  • docs.google.com/document/d/… – vijay b Feb 8 '17 at 12:09
  • @vijayb I hop you working on ui form so set here your ui form name protected $formName = 'your_ui_form – Deexit Sanghani Feb 8 '17 at 12:17
  • i followed the every step exactly as explained in answer.do we have to create any other file to define that Ui Component?? – vijay b Feb 8 '17 at 12:22
0

To add video in Magento 2, you have to follow these steps:

  1. Generate a Youtube API Key.
  2. Integration of the Youtube API key to
  3. Magento 2. Integration of the Youtube Video URL to Product.
0

The answer from Deexit Sanghani may be out dated as i am using magento2.2.2 v and the the location for the xml din't work for me [vendor]/[module]/operation/view/adminhtml/layout/layout_edit.xml but everything else is about right so up-voted as well. And heres is what worked for me take a look in ../vendor/magento/module-product-video/view/adminhtml/ui_component/product_form.xml and in you module location:../app/code/[vendor]/[module]/view/adminhtml/ui_component/your_ layout_edit.xml within the <form></form> add:

    <htmlContent name="gallery" sortOrder="22">
        <argument name="data" xsi:type="array">
            <item name="wrapper" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">My Custom Images And Videos</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">false</item>
            </item>
        </argument>
        <settings>
            <wrapper>
                <canShow>true</canShow>
                <componentType>fieldset</componentType>
            </wrapper>
        </settings>
        <block name="gallery" class="[vendor]\[module]\Block\Adminhtml\[Entity]\Helper\Form\Gallery">
            <!--<arguments>
                <argument name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Images And Videos</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="string">22</item>
                    <item name="canShow" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">fieldset</item>
                </argument>
            </arguments>-->
            <block class="[vendor]\[module]\Block\Adminhtml\[Entity]\Helper\Form\Gallery\Content" as="content">
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="parentComponent" xsi:type="string">ui_component_form.ui_component_form.block_gallery.block_gallery</item>
                    </argument>
                </arguments>
                <block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video" template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
            </block>
        </block>
    </htmlContent> 

I have manage to upload image add custom roles etc.. but not save in database yet against a row, NOTE: It needs a lot of attention to make it works for your needs, overwrite to your needs e.g gallery.pthml, getImagesJson(), getImageTypes(), getMediaAttributes methods etc... and then it needs closely matches database structure that follows the same patterns or similar to native magento look table: catalog_product_entity_media_gallery_value,catalog_product_entity_media_gallery,catalog_product_entity_media_gallery_value etc... Haven't worked on the video yet!

Hope that help someone!

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