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.
