जोड़ने / संपादित करने के लिए एक छवि प्रपत्र तत्व जोड़ना

Question

मैं व्यवस्थापक सूची और फ़ॉर्म के लिए ui घटकों का उपयोग करके Magento 2 के लिए एक CRUD मॉड्यूल का निर्माण कर रहा हूं और मेरी एक इकाई में एक छवि फ़ील्ड है।
लेकिन मैं इसे काम नहीं कर सकता जैसा कि इसे करना चाहिए।
यहाँ है कि यह कैसे काम करना चाहिए।
जब ऐड मोड में या बिना अपलोड की गई इमेज के साथ एडिट मोड में यह एक साधारण फाइल इनपुट की तरह दिखना चाहिए।

जब कोई फ़ाइल अपलोड की जाती है तो उसे छवि पूर्वावलोकन और उसके नीचे एक डिलीट बॉक्स दिखाना चाहिए।

मैं बिल्कुल इस डिज़ाइन की तलाश नहीं कर रहा हूँ। यह अलग तरह से दिख सकता है लेकिन समान कार्यक्षमता है।

मैगेंटो 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')
    );

लेकिन मेरे पास Magento 2 में कोई फॉर्म ब्लॉक नहीं है।
मुझे पता है कि मैं ui घटकों की फ़ाइल में प्रपत्र फ़ील्ड के लिए एक क्लास नाम का उपयोग कर सकता हूं

    <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

हाय @ मार्सरी, मैंने आपके कस्टम ग्रिड एडिट पेज में उत्पाद छवियों को जोड़ने में सक्षम होने के लिए आपके उदाहरण का उपयोग करने की कोशिश की, लेकिन यह त्रुटि मिली: घातक त्रुटि: क्लास 'Varien_Data_Form_Element_' में नहीं मिला ... \ lib '' वेरिएन \ Data \ Form रेखा पर \ Abstract.php 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 आइटम के अंदर uploaderConfigयूआरएल जहां छवि जब अपलोड पोस्ट किया जाता है है। इसलिए मुझे यह भी बनाने की आवश्यकता थी:

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।

यह काम करने के लिए। मुझे अभी भी छवि को db में सहेजने में परेशानी हो रही है लेकिन यह बिल्कुल अलग मुद्दा है।
मैं imageश्रेणी इकाई के लिए प्रेरणा क्षेत्र के रूप में इस्तेमाल किया

Comments

मैं सफलतापूर्वक छवि अपलोड कर सकता हूं और छवि नाम को डेटाबेस में सहेज सकता हूं, फिर जब मैं रिकॉर्ड बनाता हूं तो मैंने अभी बनाया है, छवि क्षेत्र के अलावा अन्य सभी फ़ील्ड अपेक्षा के अनुरूप दिखाई दे रही हैं। जब मैं छवि फ़ील्ड को केवल एक सामान्य "टेक्स्ट" फ़ील्ड में बदलता हूं, तो यह दिखाई देगा। क्या आपको इस बारे में कोई आइडिया है?

— नीरो

@Nero। आपको एक निश्चित json प्रारूप में छवि मान की आवश्यकता है। यहाँ एक उदाहरण दिया गया है कि आप इसे कैसे उचित जोंस में बदल सकते हैं

— मारियस

मैं छवि अपलोड नहीं करना चाहता, लेकिन मैं व्यवस्थापक Ui फ़ॉर्म में छवि प्रदर्शित करना चाहता हूं। आमतौर पर मैं फ्रंटएंड फ़ॉर्म से छवि अपलोड करता हूं और इसे व्यवस्थापक ui फॉर्म में प्रदर्शित करना चाहता हूं। कृपया मेरी मदद कैसे करें

— स्नेहा पांचाल

[Namespace] में त्रुटि है [मॉड्यूल] \ Controller \ Adminhtml [Entity] \ Image \ upload.php पर लाइन नंबर ६१ कृपया जाँच करें और उत्तर अपडेट करें।

— प्रिंस पटेल

@PrincePatel त्रुटि संदेश क्या है?

— मेरियस

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

किसी भी संकेत पर कि मेरी कक्षा कैसी दिखनी चाहिए?

— मेरियस

@ मार्मिक हम्म मुझे यकीन नहीं है, मैं यह पता लगाने की कोशिश करूंगा

— राफेल डिजिटल पियानोवाद

मुझे नहीं लगता कि आपको अभी तक ऐसा करने की आवश्यकता है। मुझे लगता है कि मुझे ui घटक में एक वर्ग का उपयोग किए बिना एक समाधान मिला, लेकिन मुझे पहले परीक्षण करने की आवश्यकता है।

— मेरियस

@ मार्मिक हम्म मुझे लगता है कि मैं गलत था, मुझे लगता है कि आपको इसकी जाँच करनी चाहिए: github.com/magento/magento2-samples/tree/master/…

— डिजिटल पियानोवाद पर राफेल