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>

1 Answer 1

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.

8
  • I integrated this solution, but getting only a blank page with an "Add Video" button. When I click on that button, nothing will happen. Apr 5, 2017 at 6:45
  • Do we need to add any js or css files? Apr 5, 2017 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, 2017 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. Apr 7, 2017 at 4:49
  • Hi @QaisarSatti Did you get the output properly? Apr 7, 2017 at 5:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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