2
<?xml version="1.0"?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <referenceContainer name="content">
        <uiComponent name="test_form"/>
    </referenceContainer>
</layout>

I am using uiComponent to generate the form. Now I want to use default magento image uploader in my module. After searching i found magento is using this code for multiple image upload.

<referenceContainer name="content">
        <uiComponent name="gallery_form"/>
        <referenceContainer name="product_form">
            <block name="gallery" class="Magento\Catalog\Block\Adminhtml\Product\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="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
                    <arguments>
                        <argument name="config" xsi:type="array">
                            <item name="parentComponent" xsi:type="string">product_form.product_form.block_gallery.block_gallery</item>
                        </argument>
                    </arguments>
                </block>
            </block>
        </referenceContainer>
    </referenceContainer>
4

In layout made following changes

<referenceContainer name="content">
    <uiComponent name="test_form"/>
    <referenceContainer name="test_form">
        <block name="gallery" class="Magento\Catalog\Block\Adminhtml\Product\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="Company name\Modulename\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="parentComponent" xsi:type="string">test_form.test_form.block_gallery.block_gallery</item>
                    </argument>
                </arguments>
            </block>
        </block>
    </referenceContainer>
</referenceContainer>

in Block content.php

Company_name\Modulename\Block\Adminhtml\Product\Helper\Form\Gallery

<?php

namespace Company_name\Modulename\Block\Adminhtml\Product\Helper\Form\Gallery;

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

class Content extends \Magento\Backend\Block\Widget

{

protected $_template = 'gallery/gallery.phtml';


protected $_mediaConfig;


protected $_jsonEncoder;


public function __construct(
    \Magento\Backend\Block\Template\Context $context,
    \Magento\Framework\Json\EncoderInterface $jsonEncoder,
    \Magento\Catalog\Model\Product\Media\Config $mediaConfig,
    array $data = []
) {
    $this->_jsonEncoder = $jsonEncoder;
    $this->_mediaConfig = $mediaConfig;
    parent::__construct($context, $data);
}

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

    $this->getUploader()->getConfig()->setUrl(
        $this->_urlBuilder->addSessionParam()->getUrl('yourmodule_frontend_name/products/upload')
    )->setFileField(
        'image'
    )->setFilters(
        [
            'images' => [
                'label' => __('Images (.gif, .jpg, .png)'),
                'files' => ['*.gif', '*.jpg', '*.jpeg', '*.png'],
            ],
        ]
    );

    $this->_eventManager->dispatch('catalog_product_gallery_prepare_layout', ['block' => $this]);

    return parent::_prepareLayout();
}


public function getUploader()
{
    return $this->getChildBlock('uploader');
}


public function getUploaderHtml()
{
    return $this->getChildHtml('uploader');
}


public function getJsObjectName()
{
    return $this->getHtmlId() . 'JsObject';
}


public function getAddImagesButton()
{
    return $this->getButtonHtml(
        __('Add New Images'),
        $this->getJsObjectName() . '.showUploader()',
        'add',
        $this->getHtmlId() . '_add_images_button'
    );
}


public function getImagesJson()
{
    $value = $this->getElement()->getImages();
    if (is_array($value) &&
        array_key_exists('images', $value) &&
        is_array($value['images']) &&
        count($value['images'])
    ) {
        $directory = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA);
        $images = $this->sortImagesByPosition($value['images']);
        foreach ($images as &$image) {
            $image['url'] = $this->_mediaConfig->getMediaUrl($image['file']);
            $fileHandler = $directory->stat($this->_mediaConfig->getMediaPath($image['file']));
            $image['size'] = $fileHandler['size'];
        }
        return $this->_jsonEncoder->encode($images);
    }
    return '[]';
}


private function sortImagesByPosition($images)
{
    if (is_array($images)) {
        usort($images, function ($imageA, $imageB) {
            return ($imageA['position'] < $imageB['position']) ? -1 : 1;
        });
    }
    return $images;
}


public function getImagesValuesJson()
{
    $values = [];
    foreach ($this->getMediaAttributes() as $attribute) {
        /* @var $attribute \Magento\Eav\Model\Entity\Attribute */
        $values[$attribute->getAttributeCode()] = $this->getElement()->getDataObject()->getData(
            $attribute->getAttributeCode()
        );
    }
    return $this->_jsonEncoder->encode($values);
}


public function getImageTypes()
{
    $imageTypes = [];
    foreach ($this->getMediaAttributes() as $attribute) {
        /* @var $attribute \Magento\Eav\Model\Entity\Attribute */
        $imageTypes[$attribute->getAttributeCode()] = [
            'code' => $attribute->getAttributeCode(),
            'value' => $this->getElement()->getDataObject()->getData($attribute->getAttributeCode()),
            'label' => $attribute->getFrontend()->getLabel(),
            'scope' => __($this->getElement()->getScopeLabel($attribute)),
            'name' => $this->getElement()->getAttributeFieldName($attribute),
        ];
    }
    return $imageTypes;
}


public function hasUseDefault()
{
    foreach ($this->getMediaAttributes() as $attribute) {
        if ($this->getElement()->canDisplayUseDefault($attribute)) {
            return true;
        }
    }

    return false;
}


public function getMediaAttributes()
{
    return $this->getElement()->getDataObject()->getMediaAttributes();
}


public function getImageTypesJson()
{
    return $this->_jsonEncoder->encode($this->getImageTypes());
}
}

in company_name/module/controller/adminhtml/products/ upload.php file

<?php

namespace company_name\module\Controller\Adminhtml\Products;

use Magento\Framework\App\Filesystem\DirectoryList;

    class Upload extends \Magento\Backend\App\Action

{

    const ADMIN_RESOURCE = 'Magento_Catalog::products';

    protected $resultRawFactory;


public function __construct(
    \Magento\Backend\App\Action\Context $context,
    \Magento\Framework\Controller\Result\RawFactory $resultRawFactory
) {
    parent::__construct($context);
    $this->resultRawFactory = $resultRawFactory;
}


public function execute()
{
    try {
        $uploader = $this->_objectManager->create(
            'Magento\MediaStorage\Model\File\Uploader',
            ['fileId' => 'image']
        );
        $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
        /** @var \Magento\Framework\Image\Adapter\AdapterInterface $imageAdapter */
        $imageAdapter = $this->_objectManager->get('Magento\Framework\Image\AdapterFactory')->create();
        $uploader->addValidateCallback('catalog_product_image', $imageAdapter, 'validateUploadFile');
        $uploader->setAllowRenameFiles(true);
        $uploader->setFilesDispersion(true);
        /** @var \Magento\Framework\Filesystem\Directory\Read $mediaDirectory */
        $mediaDirectory = $this->_objectManager->get('Magento\Framework\Filesystem')
            ->getDirectoryRead(DirectoryList::MEDIA);
        $config = $this->_objectManager->get('Magento\Catalog\Model\Product\Media\Config');
        $result = $uploader->save($mediaDirectory->getAbsolutePath($config->getBaseTmpMediaPath()));

        $this->_eventManager->dispatch(
            'catalog_product_gallery_upload_image_after',
            ['result' => $result, 'action' => $this]
        );

        unset($result['tmp_name']);
        unset($result['path']);

        $result['url'] = $this->_objectManager->get('Magento\Catalog\Model\Product\Media\Config')
            ->getTmpMediaUrl($result['file']);
        $result['file'] = $result['file'] . '.tmp';
    } catch (\Exception $e) {
        $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
    }

    /** @var \Magento\Framework\Controller\Result\Raw $response */
    $response = $this->resultRawFactory->create();
    $response->setHeader('Content-type', 'text/plain');
    $response->setContents(json_encode($result));
    return $response;
}
}

Please make changes in directory structure and names according to your module.

  • 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 5 '17 at 6:45
  • Do we need to add any js or css files? – VIPIN A ROY Apr 5 '17 at 8:20
  • see this protected $_template = 'gallery/gallery.phtml'; you have to copy this gallery.phtml file from magento_catalog and place in you template directory accordingly. – Ashar Riaz Apr 5 '17 at 13:26
  • I already copied that .phtml file. The "Add Video" button is coming from that .phtml file itself. But the execution is stopping after that. – VIPIN A ROY Apr 7 '17 at 4:49
  • Hi @QaisarSatti Did you get the output properly? – VIPIN A ROY Apr 7 '17 at 5:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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