কীভাবে পুনরুদ্ধার করবেন ম্যাজেন্টো 2 ব্যাকএন্ড চিত্র সম্মুখভাগে আপলোড করুন

Question

ম্যাজেন্টো 2-তে একটি একক চিত্র আপলোডার এর চেহারা দেখতে পাওয়া যায়:

এটি এজেএক্স ব্যবহার করে চিত্রটি আপলোড করে এবং আপলোড করা চিত্রের তথ্য সহ জেএসওএনকে সিরিয়ালযুক্ত করে দেবে। ফ্রন্টএন্ড পিএইচটিএমএল ফাইলটিতে এই কার্যকারিতাটি পুনরায় তৈরি করার কোনও উপায় আছে?

Comments

আমি এটি চেষ্টা করি নি তবে সামনের প্রান্তে বাস্তবায়নের ধারণা পেতে আপনি এডমিন মডিউলটি পরীক্ষা করতে পারেন।

— জয়

Answer 1

ফ্রন্ট-এন্ড চিত্র আপলোডের জন্য আপনি একটি কাস্টম এক্সটেনশন তৈরি করতে পারেন (কাস্টম এক্সটেনশনের নাম "ভেন্ডার_মাইমডুল" হয়)।

আমি ধরে নিলাম আপনি ইতিমধ্যে কাস্টম এক্সটেনশান "ভেন্ডর_মাইমডিউল" তৈরি করেছেন। সুতরাং আমি এখানে চিত্র আপলোড অপারেশন সম্পর্কিত শুধুমাত্র প্রয়োজনীয় ফাইলগুলি বর্ণনা করছি।

নীচের পদক্ষেপ অনুসরণ করুন।

পদক্ষেপ 1: আপলোডার মডেল ফাইল তৈরি করুন। অ্যাপ্লিকেশন / কোড / বিক্রেতা / MyMocule / মডেল / আপলোড / ImageFileUploader.php

ফাইল: ImageFileUploader.php

<?php
namespace  Vendor\MyModule\Model\Upload;

use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\Filesystem;
use Magento\MediaStorage\Model\File\UploaderFactory;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\UrlInterface;
use Magento\Store\Model\StoreManagerInterface;

/**
 * Class ImageFileUploader
 * @package Aheadworks\Rbslider\Model\Slide
 */
class ImageFileUploader
{
    /**
     * @var UploaderFactory
     */
    private $uploaderFactory;

    /**
     * @var Filesystem
     */
    private $filesystem;

    /**
     * @var StoreManagerInterface
     */
    private $storeManager;

    /**
     * @var string
     */
    const FILE_DIR = 'vendor_mymodule/uplaods';

    /**
     * @param UploaderFactory $uploaderFactory
     * @param Filesystem $filesystem
     * @param StoreManagerInterface $storeManager
     */
    public function __construct(
        UploaderFactory $uploaderFactory,
        Filesystem $filesystem,
        StoreManagerInterface $storeManager
    ) {
        $this->uploaderFactory = $uploaderFactory;
        $this->storeManager = $storeManager;
        $this->filesystem = $filesystem;
    }

    /**
     * Save file to temp media directory
     *
     * @param string $fileId
     * @return array
     * @throws LocalizedException
     */
    public function saveImageToMediaFolder($fileId)
    {
        try {
            $result = ['file' => '', 'size' => ''];
            /** @var \Magento\Framework\Filesystem\Directory\Read $mediaDirectory */
            $mediaDirectory = $this->filesystem
                ->getDirectoryRead(DirectoryList::MEDIA)
                ->getAbsolutePath(self::FILE_DIR);
            /** @var \Magento\MediaStorage\Model\File\Uploader $uploader */
            $uploader = $this->uploaderFactory->create(['fileId' => $fileId]);
            $uploader->setAllowRenameFiles(true);
            $uploader->setFilesDispersion(false);
            $uploader->setAllowedExtensions($this->getAllowedExtensions());
            $result = array_intersect_key($uploader->save($mediaDirectory), $result);

            $result['url'] = $this->getMediaUrl($result['file']);
        } catch (\Exception $e) {
            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
        }
        return $result;
    }

    /**
     * Get file url
     *
     * @param string $file
     * @return string
     */
    public function getMediaUrl($file)
    {
        $file = ltrim(str_replace('\\', '/', $file), '/');
        return $this->storeManager
            ->getStore()
            ->getBaseUrl(UrlInterface::URL_TYPE_MEDIA) . self::FILE_DIR . '/' . $file;
    }

    /**
     * Get allowed file extensions
     *
     * @return string[]
     */
    public function getAllowedExtensions()
    {
        return ['jpg', 'jpeg', 'gif', 'png'];
    }
}

পদক্ষেপ 2: সেটপ 1 এ নির্মিত মডেলটি ব্যবহার করে চিত্র আপলোড করতে নিয়ামক তৈরি করুন

/app/code/Vendor/MyModule/Controller/Index/UploadImage.php

ফাইল: আপলোড আইজএইচপিপি

namespace  Vendor\MyModule\Controller\Index;


use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\Controller\ResultFactory;
use Vendor\MyModule\Model\Upload\ImageFileUploader;

class UploadImage extends \Magento\Framework\App\Action\Action
{


    /**
     * @var ImageFileUploader
     */
    private $imageFileUploader;

    /**
    * @var \Magento\Store\Model\StoreManagerInterface
    */
    protected $storeManager;


    /**
     * @param Context $context
     * @param ImageFileUploader $imageFileUploader
     */
    public function __construct(
        Context $context,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        ImageFileUploader $imageFileUploader

    ) {
        $this->storeManager        = $storeManager;       
        $this->imageFileUploader = $imageFileUploader;
        parent::__construct($context);

    }

    /**
     * Image upload action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {        
        $result = $this->imageFileUploader->saveImageToMediaFolder('myimgaeupload');
        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
    }
}

পদক্ষেপ 3: লেআউট অ্যাপ / কোড / বিক্রেতা / MuModule / নিয়ামক / সূচক / সূচক.এফপি লোড করতে অন্য একটি নিয়ামক তৈরি করুন

ফাইল: সূচি.পি.পি.

namespace Vendor\MyModule\Controller\Index;


class Index extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
    \Magento\Framework\View\Result\PageFactory $pageFactory)
        {
        $this->_pageFactory = $pageFactory;
         return parent::__construct($context);
    }

    public function execute()
    {




    $resultPage = $this->_pageFactory->create(); 
   return $resultPage; 
}

}

পদক্ষেপ 4: আপনার ফন্ট-এন্ড কন্ট্রোলারের জন্য রাউটারগুলি ঘোষণা করুন। অ্যাপ্লিকেশন / কোড / বিক্রেতা / MyModule জন্য / etc / ফ্রন্টএন্ড / routes.xml

ফাইল: রুট.এক্সএমএল

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="*myupload*" frontName="*myupload*">
            <module name="Vendor_MyModule" />
        </route>
    </router>
</config>

পদক্ষেপ 5: লেআউট.এক্সএমএল / অ্যাপ্লিকেশন / কোড / ভেন্ডার / মাইমডুল্যঅ্যাপিউভিউ / ফ্রন্টএন্ড / স্ক্রিনআউট / মাইপলোড_ইন্ডেক্স_ইন্ডেক্স.এক্সএমএল ঘোষণা করুন

ফাইল: myupload_index_index.xML

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">             
             <block class="Vendor\MyModule\Block\Myblock" name="myupload_index_index" template="Vendor_MyModule::form.phtml" />
        </referenceContainer>       
    </body>
</page>

পদক্ষেপ:: ব্লক ক্লাসের ফাইল তৈরি করুন / অ্যাপ্লিকেশন / কোড / ভেন্ডার / মাইমডিউল / ব্লক / মাইব্লক.এফপি

ফাইল: মাইব্লক.এফপি

<?php

namespace Vendor\MyModule\Block;


class Myblock  extends \Magento\Framework\View\Element\Template
{


}

পদক্ষেপ 7: পিএইচটিএমএল ফাইল তৈরি করুন

/app/code/Vendor/MyModule/view/frontend/templates/form.phtml

ফাইল: form.phtml

<h2>Welcome to Ny Image Uploader</h2>
<div class="upload-wrapper" data-bind="scope: 'uploader'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>


<script type="text/x-magento-init">
{
   ".upload-wrapper": {
       "Magento_Ui/js/core/app": {
           "components": {
               "uploader": {                   
                   "component":"Magento_Ui/js/form/element/file-uploader",                   
                   "template": "ui/form/element/uploader/uploader",                   
                   "previewTmpl":"Vendor_MyModule/checkout-image-preview",
                   "dataScope" : "myimgaeupload",
                   "uploaderConfig": {
                        "url": "<?php echo $block->getUrl('myupload/index/uploadimage'); ?>"
                   }
               }
           }
       }
   }
}

</script> 

পদক্ষেপ 8: চিত্রের পূর্বরূপ অ্যাপ্লিকেশন / কোড / বিক্রেতার / মাইমডুল / ভিউ / ফ্রন্টএন্ড / ওয়েব / টেমপ্লেট / চিত্র-প্রাকদর্শন html জন্য কে টেম্পলেট ফাইল তৈরি করুন

ফাইল: পূর্বরূপ 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>

পদক্ষেপ 9) সিএলআই কমান্ড অনুসরণ করে চালান

sudo php bin/magento setup:di:compile
sudo rm -rf pub/static/frontend/*
sydo php bin/magento cache:flush