একটি অ্যাড / সম্পাদনা ফর্মটিতে একটি চিত্র ফর্ম উপাদান যুক্ত করা

Question

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

কোনও ফাইল আপলোড করা হলে এটি চিত্রের পূর্বরূপ এবং এর নীচে একটি মোছা বাক্সটি দেখানো উচিত।

আমি ঠিক এই নকশা খুঁজছি না। এটি অন্যরকম দেখায় তবে একই কার্যকারিতা থাকতে পারে।

ম্যাজেন্টো 1-এ আমি এটি করতে সক্ষম হয়েছি, কেবল নিজের ব্লক রেন্ডারার তৈরি করে

class {{Namespace}}_{{Module}}_Block_Adminhtml_{{Entity}}_Helper_Image extends Varien_Data_Form_Element_Image
{
    protected function _getUrl()
    {
        $url = false;
        if ($this->getValue()) {
            $url = Mage::helper('{{namespace}}_{{module}}/{{entity}}_image')->getImageBaseUrl().$this->getValue();
        }
        return $url;
    }
}

এবং এটি আমার ফর্ম ব্লকে যুক্ত করুন

    $fieldset->addType(
        'image',
        Mage::getConfig()->getBlockClassName('{{namespace}}_{{module}}/adminhtml_{{entity}}_helper_image')
    );

তবে ম্যাজেন্টো ২ তে
আমার কোনও ফর্ম ব্লক নেই I আমি জানি আমি ইউআই উপাদানগুলির ফাইলে একটি ফর্ম ক্ষেত্রের জন্য কোনও শ্রেণীর নাম ব্যবহার করতে পারি

    <field name="image" class="Class\Name\Here">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="dataType" xsi:type="string">text</item>
                <item name="label" xsi:type="string" translate="true">Resume</item>
                <item name="formElement" xsi:type="string">image</item>
                <item name="source" xsi:type="string">[entity]</item>
                <item name="dataScope" xsi:type="string">image</item>
            </item>
        </argument>
    </field>

স্পষ্টতই আমাকে এই ক্লাসটি তৈরি করতে হবে, তবে আমার কী বাড়ানো উচিত?
আমি শুধু জানি যে আমার ইন্টারফেসটি বাস্তবায়ন করা দরকার Magento\Framework\View\Element\UiComponentInterfaceতবে আমি প্রসারিত করতে পারি এমন কিছুই পাই নি।
সুতরাং আমার আসল প্রশ্নটি: আমি পছন্দসই আচরণটি অর্জন করতে কিছু শ্রেণি বাড়িয়ে দিতে পারি? যদি তা না হয় তবে আমি কীভাবে এই উপাদানটি রেন্ডারার তৈরি করা শুরু করব?

Comments

হাই @ মারিয়াস, আমি আমার কাস্টম গ্রিড সম্পাদনা পৃষ্ঠায় পণ্য চিত্র যুক্ত করতে সক্ষম হতে আপনার উদাহরণটি ব্যবহার করার চেষ্টা করেছি, তবে এই ত্রুটিটি পেয়েছে: মারাত্মক ত্রুটি: শ্রেণি 'ওয়ারিয়েন_ডাটা_ফর্ম_এলমেন্ট_' পাওয়া যায় নি ... \ lib \ Varien \ Data \ form Line 146 লাইনে অ্যাবস্ট্রাক্ট.এইচপিপি

— বেস্টওয়েবদেবরা

Answer 1

আমি ক্ষেত্রের সাথে সংযুক্ত কোনও ক্লাসের প্রয়োজন ছাড়াই এটি করার একটি উপায় পেয়েছি। আমি বোঝাতে চাইছি এখানে একটি শ্রেণি রয়েছে যা ফর্ম উপাদানটির সাথে সংযুক্ত তবে রেন্ডারার হিসাবে নয়।
কলামটি এটি হিসাবে সংজ্ঞায়িত করা উচিত:

<field name="image">
    <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">[entity]</item>
            <item name="label" xsi:type="string" translate="true">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">[Namespace]_[Module]/image-preview</item>
            <item name="required" xsi:type="boolean">false</item>
            <item name="uploaderConfig" xsi:type="array">
                <item name="url" xsi:type="url" path="[namespace_module]/[entity]_image/upload"/>
            </item>
        </item>
    </argument>
</field>

আমার দ্বারা রেফারেন্সযুক্ত পূর্বরূপ টেমপ্লেট ফাইল তৈরি করা দরকার [Namespace]_[Module]/image-preview। এটি দেখতে
এটির app/code/[Namespace]/[Module]/view/adminhtml/web/template/image-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>

এই কোডটি এর মতো একটি ক্ষেত্র তৈরি করবে:

কোনও চিত্র আপলোড করার পরে (বাস্তব সময়) এটি দেখতে এরকম দেখাচ্ছে:

এর url ভিতরে থাকা আইটেমটি uploaderConfigurl যেখানে চিত্র আপলোড করার সময় পোস্ট করা হয়। সুতরাং আমি এটি তৈরি করা প্রয়োজন:

namespace [Namespace]\[Module]\Controller\Adminhtml\[Entity]\Image;

use Magento\Framework\Controller\ResultFactory;

/**
 * Class Upload
 */
class Upload extends \Magento\Backend\App\Action
{
    /**
     * Image uploader
     *
     * @var \[Namespace]\[Module]\Model\ImageUploader
     */
    protected $imageUploader;

    /**
     * @param \Magento\Backend\App\Action\Context $context
     * @param \[Namespace]\[Module]\Model\ImageUploader $imageUploader
     */
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \[Namespace]\[Module]\Model\ImageUploader $imageUploader
    ) {
        parent::__construct($context);
        $this->imageUploader = $imageUploader;
    }

    /**
     * Check admin permissions for this controller
     *
     * @return boolean
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('[Namespace]_[Module]::[entity]');
    }

    /**
     * Upload file controller action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        try {
            $result = $this->imageUploader->saveFileToTmpDir('image');

            $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);
    }
}

এই শ্রেণীর [Namespace]\[Module]\Model\ImageUploaderঅনুরূপ একটি উদাহরণ ব্যবহার করে \Magento\Catalog\Model\ImageUploader।

এই seams কাজ। আমার তখনও ডিবিতে ছবিটি সংরক্ষণ করতে সমস্যা হচ্ছে তবে এটি সম্পূর্ণ ভিন্ন বিষয়।
আমি imageবিভাগ সত্তার জন্য অনুপ্রেরণা হিসাবে ক্ষেত্র হিসাবে ব্যবহৃত

Comments

আমি সাফল্যের সাথে চিত্র আপলোড করতে পারি এবং চিত্রের নামটি ডাটাবেসে সংরক্ষণ করতে পারি, তারপরে যখন আমি সবেমাত্র তৈরি করা রেকর্ড খুলি, তখন চিত্রের ক্ষেত্র ব্যতীত অন্য সমস্ত ক্ষেত্র প্রত্যাশার মতো প্রদর্শিত হচ্ছে। আমি যখন চিত্রের ক্ষেত্রটি কেবলমাত্র একটি সাধারণ "পাঠ্য" ক্ষেত্রে পরিবর্তন করব, তখন এটি প্রদর্শিত হবে। এই সম্পর্কে আপনার কোন ধারণা আছে?

— নিরো

@Nero। আপনার একটি নির্দিষ্ট জসন ফর্ম্যাটে চিত্রের মান প্রয়োজন। আপনি কীভাবে এটি যথাযথ জসন

— মারিয়াস

আমি ছবিটি আপলোড করতে চাই না তবে আমি অ্যাডমিন ইউআই ফর্মটিতে চিত্রটি প্রদর্শন করতে চাই uallyআমি হ'ল সামনের ফর্ম থেকে চিত্রটি আপলোড করি এবং এটি অ্যাডমিন ইউআই আকারে প্রদর্শন করতে চাই o তাই দয়া করে আমাকে কীভাবে সাহায্য করুন

— স্নেহা পঞ্চাল

[নেমস্পেস] [মডিউল] -এ ত্রুটি রয়েছে \১ নম্বর লাইনে \ চিত্র \ আপলোড.এফপি দয়া করে উত্তরটি পরীক্ষা করে আপডেট করুন।

— যুবরাজ প্যাটেল

@ প্রিন্সপ্যাটেল ত্রুটি বার্তাটি কী?

— Marius

Answer 2

হ্যাঁ, আপনার যে ক্লাসটি বাড়ানো উচিত তা হ'ল \Magento\Ui\Component\Form\Element\AbstractElement।

এই শ্রেণিটি প্রয়োগ করে ElementInterfaceযা আপনার নিজের দ্বারা প্রসারিত UiComponentInterfaceহচ্ছে।

তার উপরে, আপনি যদি ঘোষিত উপাদানগুলি পরীক্ষা করে Magento\Ui\Component\Form\Elementদেখেন যে আপনি সেগুলি সমস্ত শ্রেণীর প্রসারিত করতে পারেন।

আমি এই ক্লাসটি বেছে নেওয়ার কারণ হ'ল কারণ কেবল এই ধরণের শ্রেণির renderপদ্ধতি \Magento\Backend\Block\Widget\Form\Renderer\Elementগ্রহণ করে:(এটি আসলে এটির উদাহরণ Magento\Framework\Data\Form\Element\AbstractElementস্বীকৃত, নয় \Magento\Ui\Component\Form\Element\AbstractElement)

Comments

আমার ক্লাসটি কেমন হওয়া উচিত সে সম্পর্কে কোনও পয়েন্টার?

— মারিয়াস

@ মারিয়াস হুমম আমি খুব নিশ্চিত নই, আমি এটি

— জানার

আমি এখনও মনে করি না যে আপনার এটি করা দরকার। আমি মনে করি আমি ইউআই উপাদানটিতে কোনও ক্লাস ব্যবহার না করেই একটি সমাধান পেয়েছি তবে প্রথমে আমার পরীক্ষা করা দরকার।

— Marius

@ মারিয়াস হুমম্মম আমার মনে হয় আমি ভুল ছিলাম, আমি মনে করি আপনার এটি পরীক্ষা করা উচিত: github.com/magento/magento2-sams/tree/master/…

— ই