আমি প্রশাসনিক আকারে ইউআই ফাইলআপলোডার উপাদান যুক্ত করতে এই পদক্ষেপগুলি অনুসরণ করি follow
আমি আমার FAQ এক্সটেনশনের জন্য আইকন আপলোড করতে UI ফাইলআপলোডার উপাদানটি ব্যবহার করি। আপনি এখান থেকে রেফারেন্স নিতে পারেন: https://github.com/mageprince/magento2- FAQ
1) admin_form.xml(প্রশাসন ফর্ম) এ ফিল্ড যুক্ত করুন
<field name="icon">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">FaqGroup</item>
<item name="label" xsi:type="string" translate="true">Group Image</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="previewTmpl" xsi:type="string">Vendor_Module/image-preview</item>
<item name="required" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">40</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="your_router/faqgroup/upload"/>
</item>
</item>
</argument>
</field>
2) এখন আমাদের নিয়ামক তৈরি করতে হবে যা আমরা uploaderConfigঅ্যাডমিন আকারে সংজ্ঞায়িত করেছি :<item name="url" xsi:type="url" path="vendor_module/faqgroup/upload"/>
অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / কন্ট্রোলার / Adminhtml / FaqGroup / Upload.php
<?php
namespace Vendor\Module\Controller\Adminhtml\FaqGroup;
use Magento\Framework\Controller\ResultFactory;
class Upload extends \Magento\Backend\App\Action
{
public $imageUploader;
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Vendor\Module\Model\ImageUploader $imageUploader
) {
parent::__construct($context);
$this->imageUploader = $imageUploader;
}
public function _isAllowed()
{
return $this->_authorization->isAllowed('Vendor_Module::Faq');
}
public function execute()
{
try {
$result = $this->imageUploader->saveFileToTmpDir('icon');
$result['cookie'] = [
'name' => $this->_getSession()->getName(),
'value' => $this->_getSession()->getSessionId(),
'lifetime' => $this->_getSession()->getCookieLifetime(),
'path' => $this->_getSession()->getCookiePath(),
'domain' => $this->_getSession()->getCookieDomain(),
];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
}
}
3) তৈরি করুন ImageUploader.php
অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / মডেল / ImageUploader.php
<?php
namespace Prince\Faq\Model;
class ImageUploader
{
private $coreFileStorageDatabase;
private $mediaDirectory;
private $uploaderFactory;
private $storeManager;
private $logger;
public $baseTmpPath;
public $basePath;
public $allowedExtensions;
public function __construct(
\Magento\MediaStorage\Helper\File\Storage\Database $coreFileStorageDatabase,
\Magento\Framework\Filesystem $filesystem,
\Magento\MediaStorage\Model\File\UploaderFactory $uploaderFactory,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Psr\Log\LoggerInterface $logger
) {
$this->coreFileStorageDatabase = $coreFileStorageDatabase;
$this->mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
$this->uploaderFactory = $uploaderFactory;
$this->storeManager = $storeManager;
$this->logger = $logger;
$this->baseTmpPath = "faq/tmp/icon";
$this->basePath = "faq/icon";
$this->allowedExtensions= ['jpg', 'jpeg', 'gif', 'png'];
}
public function setBaseTmpPath($baseTmpPath)
{
$this->baseTmpPath = $baseTmpPath;
}
public function setBasePath($basePath)
{
$this->basePath = $basePath;
}
public function setAllowedExtensions($allowedExtensions)
{
$this->allowedExtensions = $allowedExtensions;
}
public function getBaseTmpPath()
{
return $this->baseTmpPath;
}
public function getBasePath()
{
return $this->basePath;
}
public function getAllowedExtensions()
{
return $this->allowedExtensions;
}
public function getFilePath($path, $imageName)
{
return rtrim($path, '/') . '/' . ltrim($imageName, '/');
}
public function moveFileFromTmp($imageName)
{
$baseTmpPath = $this->getBaseTmpPath();
$basePath = $this->getBasePath();
$baseImagePath = $this->getFilePath($basePath, $imageName);
$baseTmpImagePath = $this->getFilePath($baseTmpPath, $imageName);
try {
$this->coreFileStorageDatabase->copyFile(
$baseTmpImagePath,
$baseImagePath
);
$this->mediaDirectory->renameFile(
$baseTmpImagePath,
$baseImagePath
);
} catch (\Exception $e) {
throw new \Magento\Framework\Exception\LocalizedException(
__('Something went wrong while saving the file(s).')
);
}
return $imageName;
}
public function saveFileToTmpDir($fileId)
{
$baseTmpPath = $this->getBaseTmpPath();
$uploader = $this->uploaderFactory->create(['fileId' => $fileId]);
$uploader->setAllowedExtensions($this->getAllowedExtensions());
$uploader->setAllowRenameFiles(true);
$result = $uploader->save($this->mediaDirectory->getAbsolutePath($baseTmpPath));
if (!$result) {
throw new \Magento\Framework\Exception\LocalizedException(
__('File can not be saved to the destination folder.')
);
}
$result['tmp_name'] = str_replace('\\', '/', $result['tmp_name']);
$result['path'] = str_replace('\\', '/', $result['path']);
$result['url'] = $this->storeManager
->getStore()
->getBaseUrl(
\Magento\Framework\UrlInterface::URL_TYPE_MEDIA
) . $this->getFilePath($baseTmpPath, $result['file']);
$result['name'] = $result['file'];
if (isset($result['file'])) {
try {
$relativePath = rtrim($baseTmpPath, '/') . '/' . ltrim($result['file'], '/');
$this->coreFileStorageDatabase->saveFile($relativePath);
} catch (\Exception $e) {
$this->logger->critical($e);
throw new \Magento\Framework\Exception\LocalizedException(
__('Something went wrong while saving the file(s).')
);
}
}
return $result;
}
}
4) তৈরি করুন image-preview.html
অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / দৃশ্য / adminhtml / ওয়েব / টেমপ্লেট / চিত্র-preview.html
<div class="file-uploader-summary">
<div class="file-uploader-preview">
<a attr="href: $parent.getFilePreview($file)" target="_blank">
<img
class="preview-image"
tabindex="0"
event="load: $parent.onPreviewLoad.bind($parent)"
attr="
src: $parent.getFilePreview($file),
alt: $file.name">
</a>
<div class="actions">
<button
type="button"
class="action-remove"
data-role="delete-button"
attr="title: $t('Delete image')"
click="$parent.removeFile.bind($parent, $file)">
<span translate="'Delete image'"/>
</button>
</div>
</div>
<div class="file-uploader-filename" text="$file.name"/>
<div class="file-uploader-meta">
<text args="$file.previewWidth"/>x<text args="$file.previewHeight"/>
</div>
</div>
5) এখন ImageUploader.phpdi.xML এর জন্য যুক্তি যুক্ত করুন
অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল, / etc / di.xml
<type name="Vendor\Module\Model\ImageUploader">
<arguments>
<!-- Temporary file stored in pub/media/faq/tmp/icon -->
<argument name="baseTmpPath" xsi:type="string">faq/tmp/icon</argument>
<argument name="basePath" xsi:type="string">faq/icon</argument>
<argument name="allowedExtensions" xsi:type="array">
<item name="jpg" xsi:type="string">jpg</item>
<item name="jpeg" xsi:type="string">jpeg</item>
<item name="gif" xsi:type="string">gif</item>
<item name="png" xsi:type="string">png</item>
</argument>
</arguments>
</type>
সম্পাদনা ফর্মটিতে লোড আপলোড করা চিত্রের জন্য এই ফাইলটি পরীক্ষা করুন: ডেটাপ্রোভাইডার.পিপি
আউটপুট:
ডাটাবেসে চিত্র সংরক্ষণ করতে
অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / কন্ট্রোলার / Adminhtml / Save.php
<?php
namespace Vendor\Module\Controller\Adminhtml;
use Magento\Framework\Exception\LocalizedException;
class Save extends \Magento\Backend\App\Action
{
protected $dataPersistor;
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Framework\App\Request\DataPersistorInterface $dataPersistor
) {
$this->dataPersistor = $dataPersistor;
parent::__construct($context);
}
public function execute()
{
...
...
$data = $this->_filterFoodData($data);
$model->setData($data);
$model->save();
...
...
}
public function _filterFoodData(array $rawData)
{
//Replace icon with fileuploader field name
$data = $rawData;
if (isset($data['icon'][0]['name'])) {
$data['icon'] = $data['icon'][0]['name'];
} else {
$data['icon'] = null;
}
return $data;
}
}
ফর্ম সম্পাদনা পৃষ্ঠায় আপলোড করা চিত্রটি দেখানোর জন্য:
অ্যাপ্লিকেশন / কোড / বিক্রেতা / মডিউল / মডেল / DataProvider.php
<?php
namespace Vendor\Module\Model;
use Magento\Store\Model\StoreManagerInterface;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
...
...
public function getData()
{
...
...
$items = $this->collection->getItems();
//Replace icon with fileuploader field name
foreach ($items as $model) {
$this->loadedData[$model->getId()] = $model->getData();
if ($model->getIcon()) {
$m['icon'][0]['name'] = $model->getIcon();
$m['icon'][0]['url'] = $this->getMediaUrl().$model->getIcon();
$fullData = $this->loadedData;
$this->loadedData[$model->getId()] = array_merge($fullData[$model->getId()], $m);
}
}
...
...
return $this->loadedData;
}
public function getMediaUrl()
{
$mediaUrl = $this->storeManager->getStore()
->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA).'faq/tmp/icon/';
return $mediaUrl;
}
}