SoftProdigy Online Store
How to Upload Multiple Image in Admin Backend in Magento2?
Are you tired of uploading images and get confused while doing so? Sound like it might take ages to upload a full category, right? Don’t fret! Hundreds of pictures will appear on your website with the help of the appropriate code. The code will allow uploading multiple images in a very short span of time. Here is goes!
Step 1. Create a template file in admin section where you want to add the image upload feature.
Step2. After creating the template file incorporate the following code in the template file.
<?php
$htmlId = 'test'; // Pass any unique Html Id
$fileMaxSize = '1024'; // Pass Max upload image file
$imagePlaceholderText = __('Click here or drag and drop to add images.');
$deleteImageText = __('Delete image');
$makeBaseText = __('Make Base');
$hiddenText = __('Hidden');
$imageManagementText = __('');
$urlInterface = \Magento\Framework\App\ObjectManager::getInstance()->get('Magento\Framework\UrlInterface');
$path = ''; //Pass path of your controller for saving the image after upload.
$uploadUrl = $urlInterface->getUrl($path);
$spacerImage = $urlInterface->getBaseUrl().'pub/static/adminhtml/Magento/backend/en_US/images/spacer.gif';
?>
<div id="media_gallery_content1" class="gallery ui-sortable"
data-mage-init='{"custombaseImage":{}}'
data-max-file-size="<?php /* @escapeNotVerified */ echo $fileMaxSize;?>"
>
<div class="image image-placeholder">
<input type="file"
name="image"
data-url="<?php /* @escapeNotVerified */ echo $uploadUrl;?>"
multiple="multiple" />
<!--img class="spacer" src="<?php echo $spacerImage;?>"/-->
<p class="image-placeholder-text"><?php /* @escapeNotVerified */ echo $imagePlaceholderText;?></p>
</div>
<script
id="media_gallery_content1-template"
data-template="image"
type="text/x-magento-template">
<div class="image item" data-role="image">
<img class="spacer" src="<?php /* @escapeNotVerified */ echo $spacerImage;?>"/>
<img
class="product-image"
src="<%- data.url %>"
data-position="<%- data.position %>"
alt="<%- data.label %>" />
<div class="actions">
<button
type="button"
class="action-delete"
data-role="delete-button"
onclick ="removeImage(this);"
title="<?php echo $deleteImageText;?>">
<span><?php echo $deleteImageText;?></span>
</button>
<input type = 'hidden' value="<%- data.file %>" name="comingsoon[image_name][]" class="remove-img"/>
<button
type="button"
class="action-make-base"
data-role="make-base-button"
title="<?php echo $makeBaseText;?>">
<span><?php echo $makeBaseText;?></span>
</button>
<div class="draggable-handle"></div>
</div>
<div class="image-label"></div>
<div class="image-fade"><span><?php echo $hiddenText;?></span></div>
</div>
</script>
</div>
<span class="action-manage-images" data-activate-tab="image-management">
<span><?php echo $imageManagementText;?></span>
</span>
<script>
function removeImage(eve){
var check = jQuery('.remove-img').val();
var isclass = jQuery(eve).next().hasClass('remove-img');
if(isclass){
jQuery(eve).next().val(" ");
}
}
require([
'jquery'
],function($){
'use strict';
$('[data-activate-tab=image-management]')
.on('click.toggleImageManagementTab', function() {
$('#product_info_tabs_image-management').trigger('click');
});
});
</script>
Step 3: You can add CSS to adjust the uploaded image button and display images instantly in template file.
<style>
.action-make-base{
display:none !important;
}
.admin__scope-old .product-actions {
padding: 5px 18px;
}
.admin__scope-old .product-actions .switcher {
display: inline-block;
vertical-align: top;
margin: 3px 0 6px 6px;
}
/* Image Management */
.admin__scope-old .images {
position: relative;
border: 2px dotted #ccc;
margin-bottom: 2px;
padding: 5px 0 0;
}
.admin__scope-old .images .image {
margin-bottom: 5px;
}
.admin__scope-old .image .spacer {
width: 100%;
}
.admin__scope-old .image.base-image:hover .image-label:before {
display: block;
}
.admin__scope-old .image.active {
box-shadow: 0 0 10px #2ea9ec;
}
.admin__scope-old .image .actions {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.admin__scope-old .image .actions [class^="action-"] {
z-index: 10;
}
.admin__scope-old .image .actions [class^="action-"],
.admin__scope-old .image .image-label,
.admin__scope-old .image[data-image-hidden] .actions [class^="action-"],
.admin__scope-old .image.hidden-for-front .actions [class^="action-"] {
visibility: hidden;
}
.admin__scope-old .image:hover .actions [class^="action-"],
.admin__scope-old .image:hover .image-label,
.admin__scope-old .image.base-image .image-label,
.admin__scope-old .image[data-image-hidden]:hover .actions .action-delete,
.admin__scope-old .hidden-for-front:hover .actions [class^="action-"] {
visibility: visible;
}
.admin__scope-old .image .action-delete {
position: absolute;
left: 6px;
bottom: 6px;
z-index: 10;
}
.admin__scope-old .image .action-delete:before {
font-family: "Admin Icons";
content: "\e630";
font-size: 1.8rem;
line-height: inherit;
color: #9e9e9e;
overflow: hidden;
font-weight: normal;
display: inline-block;
vertical-align: middle;
text-align: center;
}
.admin__scope-old .image .action-make-base {
position: absolute;
bottom: 40px;
left: 10%;
right: 10%;
padding: 5px;
margin: auto;
}
.admin__scope-old .image.base-image .action-make-base {
display: none;
}
.admin__scope-old .image .file-row {
background: #fff url(/pub/static/adminhtml/Magento/backend/en_US/images/ajax-loader-big.gif) no-repeat 50% 50%;
bottom: 0;
height: auto;
left: 0;
margin: auto;
overflow: hidden;
position: absolute;
right: 0;
text-indent: -999em;
top: 0;
width: auto;
z-index: 5;
}
</style>
Step 4: Now create a separate controller class to save the uploaded images. Uploaded images will show instantly at same place.
You can pass the uploaded images in the hidden fields for saving purpose.
After creating the controller class, implement the below mentioned code in your execute function that will save uploaded image files.
Like here we are creating the controller class for saving the image
<?php
namespace -------Use Your module namespace------;
use Magento\Framework\App\Filesystem\DirectoryList;
class Upload extends \Magento\Backend\App\Action
{
protected $resultRawFactory;
public function __construct(
\Magento\Backend\App\Action\Context $context
) {
parent::__construct($context);
}
public function execute()
{
try{
$uploader = $this->_objectManager- >create('Magento\MediaStorage\Model\File\Uploader',['fileId' => 'image']);
$uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
$imageAdapter = $this->_objectManager->get('Magento\Framework\Image\AdapterFactory')->create();
$uploader->addValidateCallback('image', $imageAdapter, 'validateUploadFile');
$uploader->setAllowRenameFiles(true);
$uploader->setFilesDispersion(true);
$mediaDirectory = $this->_objectManager->get('Magento\Framework\Filesystem')- >getDirectoryRead(DirectoryList::MEDIA);
$config = $this->_objectManager->get('Magento\Catalog\Model\Product\Media\Config');
$pth = $mediaDirectory->getAbsolutePath('tmp/comingsoon/maintenance/images');
$result = $uploader->save($mediaDirectory->getAbsolutePath('tmp/comingsoon/maintenance/images'));
$imgpath = $this->_prepareFile($result['file']);
$imgpathArray = explode("/", $imgpath);
unset($imgpathArray[count($imgpathArray)-1]);
$imgpath = implode("/", $imgpathArray);
$this->chmod_r($result['path'].'/' . $imgpath);
chmod($result['path'].'/' .$this->_prepareFile($result['file']), 0777);
unset($result['tmp_name']);
unset($result['path']);
$url = $this->_objectManager->get('Magento\Framework\UrlInterface')->getBaseUrl().$this->getBaseMediaUrlAddition();
$result['url'] = $url . '/' . $this->_prepareFile($result['file']);
$result['file'] = $result['file'];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
$response = $this->_objectManager->get('Magento\Framework\Controller\Result\RawFactory')->create();
$response->setHeader('Content-type', 'text/plain');
$response->setContents(json_encode($result));
return $response;
}
private function chmod_r($path) {
$dir = new \DirectoryIterator($path);
foreach ($dir as $item) {
chmod($item->getPathname(), 0777);
if ($item->isDir() && !$item->isDot()) {
chmod_r($item->getPathname());
}
}
}
private function getBaseMediaUrlAddition()
{
return 'pub/media/tmp/comingsoon/maintenance/images';
}
private function _prepareFile($file)
{
return ltrim(str_replace('\\', '/', $file), '/');
}
}
