magento 2 how to upload images and videos in custom module

Question

I am using magento 2.1

I need to upload multiple images and video using ui component

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

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

Deexit Sanghani · Accepted Answer · 2017-02-07T10:41:12.233

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

https://docs.google.com/document/d/1XtS-7XQ6Rj2ZhM-Sp6j4_WkQhXRpyV4ziAlG3_DICN0/edit?usp=sharing — vijay b, Feb 08 '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 08 '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 08 '17 at 12:22
@vijayb no this is not define any other file. ; can you please compare your layout with /vendor/magento/module-product-video/view/adminhtml/layout/catalog_product_form.xml — Deexit Sanghani, Feb 08 '17 at 12:30
@Deexit Sanghani you are a rock star! Thxs. You forgot to add the template path inside [vendor]\[module]\Block\Adminhtml\Grid\Helper\Form\Gallery\Content.php Something like this worked for me: protected $_template = '[vendor]_[module]::helper/gallery.phtml'; — Daniel Kratohvil, Mar 28 '17 at 10:28
@DanielKratohvil Thanks..:) Glad to help !! Keep helping.. :) — Deexit Sanghani, Mar 29 '17 at 04:58
I integrated this solution, but getting only a blank page with an "Add Video" button. When I click on that button, nothing will happen. — VIPIN A ROY, Apr 07 '17 at 04:41
@DeexitSanghani is it working for add videos or we can just implement multiple image uploader? — Verdu, Oct 25 '17 at 12:00
@Deexit Sanghani I've followed the steps above but nothing happened! Are you sure it's in the layout and not in ui_component folder as ? — Juliano Vargas, Jan 31 '19 at 13:10
@DeexitSanghani here Display error in Call to a member function getImages() on null in product Edit page backend side in magento 2.3.3 version — Hiren Kapuriya, Jul 14 '20 at 14:12

score 1 · Answer 2 · answered Feb 01 '19 at 14:28

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!

@JulianoVargas Followed the exact steps and nothing rendering return as not defined in product-gallery.js file. ( Using category_form.xml) — Sairam Sigirisetty, Apr 13 '20 at 15:54

score -1 · Answer 3 · edited Jan 11 '18 at 08:49

-1

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

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

edited Jan 11 '18 at 08:49

Marius

197,939
53
422
830

answered Feb 25 '17 at 10:29

Syed Muneeb Ul Hasan

923
12
23

magento 2 how to upload images and videos in custom module

3 Answers3

Linked