React-dnd: मैं कैनड्रॉप विधि में फ़ाइलों को खींचने के बारे में जानकारी कैसे प्राप्त कर सकता हूं?

क्या आप स्रोत पर ड्रैग की अनुमति नहीं देना चाहते हैं या किसी प्रकार के आधार पर लक्ष्य पर अनुमति नहीं दिखाना चाहते हैं?

1. ड्रैग की अनुमति नहीं देने के लिए, आपको स्रोत में canDrag false वापस करना चाहिए।
2. ड्रॉप की अनुमति न देने के लिए, आपको लक्ष्य पर types का उपयोग करके नियंत्रित करना चाहिए

@theTechie नहीं, मैं फ़ाइल एक्सटेंशन पढ़ने का एक तरीका ढूंढ रहा हूं जिसे मैं वर्तमान में खींच रहा हूं।

सभी स्रोत और लक्ष्य विधियों को दूसरे तर्क के रूप में monitor मिलता है। ( canDrop सहित)

आप वर्तमान में खींचे गए आइटम प्राप्त करने के लिए monitor.getItem() का उपयोग कर सकते हैं।

संदर्भ:

canDrop(props, monitor): Optional. Use it to specify whether the drop target is able to accept the item. If you want to always allow it, just omit this method. Specifying it is handy if you'd like to disable dropping based on some predicate over props or monitor.getItem(). Note: You may not call monitor.canDrop() inside this method.
आप monitor . का उपयोग कर सकते हैं

यह फाइलों के लिए काम नहीं करता है

वह अजीब है।
मेरा मानना ​​​​है कि आप फाइल सिस्टम से फाइल को लक्ष्य पर खींच और छोड़ रहे हैं?

मैंने ऐसा ही कुछ किया है और ऐसा लगता है कि यह मेरे लिए काम कर रहा है। यदि आप कुछ कोड साझा कर सकते हैं, तो हम शायद देख सकते हैं कि क्या गलत है।

क्या आप कृपया दिखा सकते हैं कि आप कैनड्रॉप विधि में फ़ाइल एक्सटेंशन को कैसे पढ़ते हैं?

जैसा कि मैंने पहले ही ऊपर उल्लेख किया है, monitor.getItem().files के अंदर canDrop आपको मूल File वस्तुओं की एक सरणी देनी चाहिए

मेरी मुट्ठी टिप्पणी पढ़ें, जब आप कैनड्रॉप में फाइलें पढ़ते हैं तो यह त्रुटि फेंकता है जैसा मैंने उल्लेख किया है। क्या आपके पास कैनड्रॉप में फ़ाइलों को पढ़ने का कार्यशील उदाहरण है या आप केवल दस्तावेज़ीकरण देखें? त्रुटि कहती है कि मैं ड्रॉप ईवेंट तक फ़ाइलें नहीं पढ़ सकता

यह संभव है कि हम दो अलग-अलग संस्करणों का उपयोग कर रहे हैं और यह प्रतिबंध बाद में जोड़ा गया है। मैं 2.1.4 का उपयोग कर रहा हूँ।

ठीक है, मैं नवीनतम संस्करण का परीक्षण करूंगा और आपको बताऊंगा कि क्या यह काम करता है

मुझे यह भी मिल रहा है, जब MIME प्रकार द्वारा canDrop में फ़ाइलों को फ़िल्टर करने का प्रयास किया जा रहा है। जैसे ही मैं monitor.getItem().files पर कॉल करता हूं, यह उपरोक्त चेतावनी फेंकता है (क्रोम 56.0.2924.87, प्रतिक्रिया-डीएनडी 2.2.4, प्रतिक्रिया-डीएनडी-एचटीएमएल 5-बैकएंड 2.2.4)।

एमडीएन के अनुसार मेरा मामला, कम से कम, event.dataTransfer पर एक संपत्ति का उपयोग करके पूरा किया जा सकता है, लेकिन जहां तक ​​​​मैं देख सकता हूं, प्रतिक्रिया-डीएनडी उस वस्तु या उसकी जानकारी को कहीं भी उजागर नहीं करता है।

@theTechie

यह संभव है कि हम दो अलग-अलग संस्करणों का उपयोग कर रहे हैं और यह प्रतिबंध बाद में जोड़ा गया है। मैं 2.1.4 का उपयोग कर रहा हूँ।

नहीं, मैं उसी संस्करण का उपयोग करता हूं। नवीनतम संभावित संस्करण (2.2.4) में भी अपडेट किया गया और वही त्रुटि हो रही है:

कैनड्रॉप विधि इस तरह दिखती है:

canDrop: function (props, monitor) {      
        let files = monitor.getItem().files;
        console.log('Files: ', files);
        return true;
    }

यह आपके पक्ष में कैसे काम कर सकता है? क्या आपके पास कामकाजी उदाहरण है?

मैं जल्द ही एक कामकाजी उदाहरण साझा करूंगा।
सोम, 6 मार्च 2017 को शाम 4:12 बजे, एंड्री करावायचिक नोटिफिकेशन @github.com
लिखा था:

@theTechie https://github.com/theTechie

यह संभव है कि हम दो अलग-अलग संस्करणों का उपयोग कर रहे हैं और यह प्रतिबंध है
बाद में जोड़ा गया। मैं 2.1.4 का उपयोग कर रहा हूँ।

नहीं, मैं उसी संस्करण का उपयोग करता हूं। नवीनतम संभावित संस्करण में भी अपडेट किया गया
(2.2.4) और वही त्रुटि प्राप्त करना:

[छवि: छवि]
https://cloud.githubusercontent.com/assets/710513/23606619/8acabe7a-0272-11e7-8db1-b1c88870cf92.png

कैनड्रॉप विधि इस तरह दिखती है:

कैनड्रॉप: फ़ंक्शन (प्रॉप्स, मॉनिटर) {
फ़ाइलें दें = Monitor.getItem ()। फ़ाइलें;
कंसोल.लॉग ('फ़ाइलें:', फ़ाइलें);
सच लौटना;
}

यह आपके पक्ष में कैसे काम कर सकता है? क्या आपके पास कामकाजी उदाहरण है?

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
.

>

सादर,
गगन

@andrewQwer - वास्तव में क्षमा करें!
मेरे पास जो लागू किया गया था उसकी गलत स्मृति थी और यह monitor.getItem().files में canDrop का उपयोग नहीं करता है, मैं केवल उन फाइलों की संख्या को सीमित कर रहा हूं जिन्हें एक बार फ़ाइल गिनती को बनाए रखने से छोड़ा जा सकता है इसे गिरा दिया गया है।

गुमराह करने के लिए खेद है!

पुनश्च: मैं इसे हासिल करने के तरीकों की तलाश कर रहा हूं, अगर मैं सक्षम हूं तो आपको बता दूंगा।

मुझे नहीं लगता कि यह कभी संभव होगा। ऐसा लगता है कि खींचे गए आइटम पर जानकारी पढ़ना सुरक्षा उद्देश्य के लिए जानबूझकर प्रतिबंधित है।

http://stackoverflow.com/questions/25016442/how-to-distinguish-if-a-file-or-folder-is-being-dragged-prior-to-it-being-droppe

क्या event.dataTransfer ऑब्जेक्ट (जैसे types ) के माध्यम से फाइलों के बारे में कुछ जानकारी को उजागर करना संभव होगा? मुझे एहसास है कि सभी उपयोग के मामलों को संतुष्ट नहीं कर सकता है, लेकिन इससे कम से कम कुछ मदद मिलेगी।

यह HTML5 बैकएंड में जोड़ा जाने वाला कुछ हो सकता है, लेकिन यह निर्धारित करना संभव लगता है कि फ़ाइल/फ़ोल्डर को छोड़ने से पहले फ़ाइल माइम प्रकारों के स्वीकृत सेट में फिट बैठती है या नहीं। विशेष रूप से, प्रतिक्रिया-ड्रॉपज़ोन ऐसा तब करता है जब आप आइटम को ड्रॉपज़ोन पर घुमाते हैं, जैसा कि इस उदाहरण में देखा जा सकता है।

इस मुद्दे के लिए अभी तक कोई समाधान?

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

बासी नहीं

मैं विशिष्ट फ़ाइलों को छोड़ने की अनुमति देने का एक तरीका भी ढूंढ रहा हूं, उदाहरण के लिए: छवियां, वीडियो, जैसे प्रतिक्रिया-ड्रॉपज़ोन। क्या किसी के पास एक समाधान है?

इस समस्या को स्वचालित रूप से पुराने के रूप में चिह्नित कर दिया गया है क्योंकि इसमें हाल की गतिविधि नहीं है। आगे कोई गतिविधि नहीं होने पर इसे बंद कर दिया जाएगा। आपके योगदानों के लिए धन्यवाद।

मेरे पास भी मुद्दा है। ऐसा लगता है कि "NativeDragSource.ts" में काफी हार्डकोड किया गया है।

यह एक ड्रैगसोर्स बनाता है, हालांकि, मूल्यों तक पहुंचने के लिए यह सिर्फ एक कंसोल-चेतावनी जोड़ता है जिसमें उल्लेख किया गया है कि ब्राउज़र इसकी अनुमति नहीं देगा।

हालांकि, ब्राउज़र इसे अनुमति देता है, यह केवल संरक्षित मोड में है और इसे बदलने या डेटा तक पहुंचने की अनुमति नहीं देता है (फाइलों की, लेकिन फाइलों के गुणों के साथ आइटमों की गणना की जा सकती है। (जैसे ड्रॉपज़ोन करता है) .

कुछ कोशिश करेंगे और आपके पास वापस आएंगे

@LeopoldLerch @darthtrevino मैं ड्रॉप करने से पहले अभी भी files सूची तक नहीं पहुंच सकता। मैं होवर पर फ़ाइल के माइम प्रकार की जांच करना चाहता हूं और सीमा के रंग को बदलना चाहता हूं, इस पर निर्भर करता है कि यह फ़ाइल का वैध प्रारूप है या नहीं। मैं canDrop विधि का उपयोग useDrop हुक के लिए कर रहा हूं। और जब मैं ड्रॉप करता हूं तो यह फाइलों की एक सरणी देता है। जब मैं ड्रॉप ज़ोन पर होवर करता हूं तो मेरे पास एक खाली सरणी होती है

बात यह है कि ब्राउज़र द्वारा प्रदान की जाने वाली घटनाएँ वैसी ही हैं जैसी वे हैं, हम उन्हें बदल नहीं सकते। ब्राउज़र केवल ड्रैगस्टार्ट पर डेटा तक पहुंच प्रदान करता है। उसके बाद, बाद की सभी घटनाएं संरक्षित मोड में हैं, जिसका अर्थ है कि आप डेटा तक नहीं पहुंच सकते हैं।

यदि आप यूज़ड्रॉप की ऑनहोवर विधि का उपयोग करते हैं, तो आपको खाली मेटाडेटा मिलेगा, क्योंकि ब्राउज़र आपको इसे "ड्रैजेंटर" पर एक्सेस करने की अनुमति नहीं देता है। यहां तक ​​​​कि अगर आप ऑब्जेक्ट को ड्रैगस्टार्ट (या कलेक्ट-फ़ंक्शन) में संग्रहीत करते हैं, तो ब्राउज़र पृष्ठभूमि में गुणों को साफ़ कर देगा, क्योंकि आपके पास ऑब्जेक्ट का संदर्भ है, इसकी एक प्रति नहीं।

इसके आसपास काम करने का एकमात्र तरीका "कलेक्ट" फ़ंक्शन का उपयोग करना है। यहां आप आइटम के "आइटम" या "फाइलों" तक पहुंच सकते हैं (आपके द्वारा उपयोग किए जाने वाले ब्राउज़र के आधार पर, IE11 आपको ऑनड्रॉप से ​​पहले कभी भी उन तक पहुंचने की अनुमति नहीं देगा)।

हालाँकि, आपको सब कुछ स्वयं करना होगा: इसे मान्य करना और याद रखना उदा। एक प्रयोग रेफरी। उदाहरण के लिए

collect: monitor => {
            const item: DataTransfer = monitor.getItem();
            const isOver = monitor.isOver();
            let _canDrop: VerificationResult = null;
            if (item) {
                if (item.items) {
                    if (item.items.length > 0) {
                        draggedFilesValid.current = allFilesAccepted(
                            fromList<DataTransferItem>(item.items),
                            accept,
                            multiple,
                            maxSize,
                            minSize
                        )
                            ? VerificationResult.Valid
                            : VerificationResult.Invalid;
                    }
                }
            } else {
                draggedFilesValid.current = null;
            }

            if (isOver && item && item.files) {
                _canDrop = VerificationResult.Unknown;
                if (draggedFilesValid.current != null) {
                    _canDrop = disabled
                        ? VerificationResult.Invalid
                        : draggedFilesValid.current;
                }
            }

            return {
                isDragActive: item != null,
                canDrop: _canDrop
            };
        }

@लियोपोल्डलेर्च
विस्तार से बताने के लिए धन्यवाद! मैं इस तरह के वर्कअराउंड की कोशिश करूंगा