magento 2 como subir imágenes y videos en un módulo personalizado

15

Estoy usando magento 2.1

Necesito subir múltiples imágenes y videos usando el componente ui

Como magento-admin -> productos -> caralog -> producto

ingrese la descripción de la imagen aquí

¿Qué necesito hacer para lograr esto?

magento2 image-upload Deexit Sanghani
fuente
¿Todavía M2 usa el código de estilo antiguo para 'Imagen y Video' sin UI_Component? ¿Necesitas esto?
Sohel Rana

Respuestas:

7

Finalmente obtuve la respuesta

Recomiendo este módulo y lo implemento en mi módulo personalizado

Encuentra debajo el código útil:

siguiendo los pasos a continuación

1) crear 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) Crear bloque de ayuda

[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) Crear bloque de formulario 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 : - debe extenderse correctamente por encima de ambos bloques

4) Crear plantilla

Debe copiar el formulario gallery.phtml vendor/magento/module-product-video/view/adminhtml/templates/helper/gallery.phtml y modificarlo según sus requisitos y plagas en su módulo[vendor]/[module]/view/adminhtml/templates/helper/gallery.phtml

Por favor, avíseme en comentario si necesita ayuda

Deexit Sanghani
fuente
recibo un error porque se debe crear el documento OBJECT DOM
vijay b
@vijayb, ¿puedes poner este error aquí?
Salir de Sanghani
docs.google.com/document/d/…
vijay b
@vijayb Espero que estés trabajando en el formulario de interfaz de usuario, así que establece aquí tu nombre de formulario de interfaz de protected $formName = 'your_ui_form
usuario
Seguí cada paso exactamente como se explica en answer.do, ¿tenemos que crear cualquier otro archivo para definir ese componente Ui?
vijay b
0

Para agregar video en Magento 2, debe seguir estos pasos:

  1. Genera una clave API de Youtube.
  2. Integración de la clave API de Youtube para
  3. Magento 2. Integración de la URL del video de Youtube al producto.
Syed Muneeb Ul Hasan
fuente
0

La respuesta de Deexit Sanghani puede estar desactualizada ya que estoy usando magento2.2.2 v y la ubicación para el xml no funciona para mí, [vendor]/[module]/operation/view/adminhtml/layout/layout_edit.xmlpero todo lo demás es correcto, así que también fue votado. Y aquí está lo que funcionó para mí, eche un vistazo a la ../vendor/magento/module-product-video/view/adminhtml/ui_component/product_form.xmlubicación de su módulo: ../app/code/[vendor]/[module]/view/adminhtml/ui_component/your_ layout_edit.xmldentro del <form></form>complemento:

    <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>

Tengo que manejar para cargar papeles imagen adicional personalizados, etc .. pero no guardar en la base de datos todavía contra una fila, NOTA: Se necesita mucha atención para hacer que funcione para sus necesidades, sobreescritura a sus necesidades, por ejemplo gallery.pthml, getImagesJson(), getImageTypes(), getMediaAttributesmétodos, etc .. . y entonces tiene acerque estructura de base de datos que sigue los mismos patrones o similares a la tabla de consulta Magento orígenes: catalog_product_entity_media_gallery_value, catalog_product_entity_media_gallery,catalog_product_entity_media_gallery_value etc ... ¿no han trabajado en el video todavía!

Espero que ayude a alguien!

Juliano Vargas
fuente