magento2: how to use product uploader in custom module

Question

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

Answer 1

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.