magento 2 como fazer upload de imagens e vídeos no módulo personalizado

15

Estou usando o magento 2.1

Preciso fazer upload de várias imagens e vídeos usando o componente da interface do usuário

Como magento-admin -> produtos -> catálogo -> produto

insira a descrição da imagem aqui

o que preciso fazer para conseguir isso?

magento2 image-upload Deexit Sanghani
fonte
O M2 ainda usa o código de estilo antigo para 'Imagem e vídeo' sem UI_Component? Você precisa disso?
Sohel Rana

Respostas:

7

Finalmente eu tenho a resposta

Refiro este módulo e implemento no meu módulo personalizado

Encontre abaixo o código útil:

seguindo as etapas abaixo

1) criar 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) Criar bloco auxiliar

[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) Criar bloco de formulário auxiliar

[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 '[]';
    }

}

Nota : - você deve se estender adequadamente acima dos dois blocos

4) Criar modelo

Você deve copiar o formulário gallery.phtml vendor/magento/module-product-video/view/adminhtml/templates/helper/gallery.phtml e modificá-lo conforme sua exigência e pragas em seu módulo[vendor]/[module]/view/adminhtml/templates/helper/gallery.phtml

Entre em contato conosco se precisar de ajuda

Deexit Sanghani
fonte
Estou recebendo erro como documento objeto DOM deve ser criado
Vijay b
@vijayb você pode por favor, coloque esse erro aqui
Deexit Sanghani
docs.google.com/document/d/…
vijay b
@vijayb I hop está trabalhando em ui formulário para definir aqui o seu ui nome do formulárioprotected $formName = 'your_ui_form
Deexit Sanghani
Eu segui todas as etapas exatamente como explicado em answer.do, precisamos criar qualquer outro arquivo para definir esse componente da interface do usuário?
Vijay b
0

Para adicionar vídeo no Magento 2, siga estas etapas:

  1. Gere uma chave de API do YouTube.
  2. Integração da chave da API do YouTube para
  3. Magento 2. Integração da URL do vídeo do Youtube ao produto.
Syed Muneeb Ul Hasan
fonte
0

A resposta de Deexit Sanghani pode estar desatualizada, pois estou usando o magento2.2.2 ve a localização do xml não funcionou para mim, [vendor]/[module]/operation/view/adminhtml/layout/layout_edit.xmlmas todo o resto está certo quanto à aprovação . E aqui está o que funcionou para mim, observe ../vendor/magento/module-product-video/view/adminhtml/ui_component/product_form.xmle localize o módulo: ../app/code/[vendor]/[module]/view/adminhtml/ui_component/your_ layout_edit.xmldentro do <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>

Eu tenho conseguem carregar papéis imagem add personalizados etc .. mas não salva no banco de dados ainda contra uma fileira, NOTA: É preciso muita atenção para fazer ele funciona para as suas necessidades, de substituição às suas necessidades, por exemplo gallery.pthml, getImagesJson(), getImageTypes(), getMediaAttributesmétodos, etc .. . e, em seguida, ele precisa se aproxima estrutura de banco de dados que segue os mesmos padrões ou semelhantes a tabela look magento nativa: catalog_product_entity_media_gallery_value, catalog_product_entity_media_gallery, catalog_product_entity_media_gallery_valueetc ... não funcionaram no vídeo ainda!

Espero que ajude alguém!

Juliano Vargas
fonte