React-dnd: كيف يمكنني الحصول على معلومات حول سحب الملفات بطريقة canDrop؟

هل تبحث عن عدم السماح بالسحب على المصدر أو الظهور غير مسموح به على الهدف بناءً على النوع؟

1. لعدم السماح بالسحب ، يجب عليك إرجاع false من canDrag في المصدر.
2. لعدم السماح بالإسقاط ، يجب عليك التحكم باستخدام types على الهدف

techie لا ، أنا أبحث عن طريقة لقراءة امتداد الملف الذي أقوم بسحبه حاليًا.

تحصل جميع أساليب المصدر والهدف على 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

لا يعمل مع الملفات

هذا غريب.
أعتقد أنك تقوم بسحب وإفلات الملفات من نظام الملفات إلى الهدف؟

لقد فعلت شيئًا مشابهًا ويبدو أنه يعمل معي. إذا كان بإمكانك مشاركة بعض التعليمات البرمجية ، فمن المحتمل أن نرى ما هو الخطأ.

هل يمكنك أن توضح كيف تقرأ امتداد الملف في طريقة canDrop؟

كما ذكرت أعلاه ، يجب أن يمنحك monitor.getItem().files داخل canDrop مجموعة من العناصر الأصلية File

اقرأ تعليقي الأول ، عندما تقرأ الملفات في canDrop ، فإن ذلك يلقي بخطأ كما ذكرت. هل لديك مثال عملي لقراءة الملفات في canDrop أو يمكنك الرجوع إلى الوثائق فقط؟ يشير الخطأ إلى أنه لا يمكنني قراءة الملفات حتى حدث الإفلات NativeDragSources.js: 61 لا يسمح المستعرض بقراءة "الملفات" حتى حدث الإفلات

من المحتمل أننا نستخدم نسختين مختلفتين وقد تمت إضافة هذا القيد لاحقًا. أنا أستخدم 2.1.4.

حسنًا ، سأختبر أحدث إصدار وأعلمك إذا كان يعمل

أحصل على هذا أيضًا عند محاولة تصفية الملفات في canDrop حسب نوع MIME. بمجرد أن أتصل monitor.getItem().files ، فإنه يطرح التحذير أعلاه (Chrome 56.0.2924.87 ، رد فعل-dnd 2.2.4 ، رد فعل-dnd-html5-backend 2.2.4).

وفقًا لـ MDN حالتي ، على الأقل ، يمكن إنجازها باستخدام خاصية على event.dataTransfer ، ولكن بقدر ما أستطيع أن أرى ، لا يكشف رد فعل dnd هذا الكائن أو معلوماته في أي مكان.

تضمين التغريدة

من المحتمل أننا نستخدم نسختين مختلفتين وقد تمت إضافة هذا القيد لاحقًا. أنا أستخدم 2.1.4.

لا ، أنا أستخدم نفس الإصدار. تم التحديث أيضًا إلى أحدث إصدار ممكن (2.2.4) والحصول على نفس الخطأ:

تبدو طريقة canDrop كما يلي:

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

كيف يمكن أن تعمل بجانبك؟ هل لديك مثال عملي؟

سوف أشارك مثال عملي قريبا.
يوم الإثنين ، 6 مارس 2017 الساعة 4:12 مساءً ، أندريه كارافايشيكإخطارات@ github.com
كتب:

تضمين التغريدة

من الممكن أننا نستخدم نسختين مختلفتين وهذا القيد له
أضيفت لاحقا. أنا أستخدم 2.1.4.

لا ، أنا أستخدم نفس الإصدار. تم التحديث أيضًا إلى أحدث إصدار ممكن
(2.2.4) والحصول على نفس الخطأ:

[صورة: صورة]
https://cloud.githubusercontent.com/assets/710513/23606619/8acabe7a-0272-11e7-8db1-b1c88870cf92.png

تبدو طريقة canDrop كما يلي:

canDrop: function (props، monitor) {
السماح للملفات = monitor.getItem (). files ؛
console.log ('الملفات:' ، الملفات) ؛
العودة صحيح
}

كيف يمكن أن تعمل بجانبك؟ هل لديك مثال عملي؟

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على 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 ، ولكن يبدو أنه من الممكن تحديد ما إذا كان الملف يناسب مجموعة مقبولة من أنواع mime قبل إسقاط الملف / المجلد. على وجه التحديد ، تقوم منطقة الإسقاط المتفاعلة بهذا عند تحريك العنصر فوق منطقة الإسقاط ، كما يتضح في هذا المثال .

أي حل لهذه المشكلة حتى الآن؟

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

ليست قديمة

أنا أبحث أيضًا عن طريقة للسماح بإسقاط ملفات معينة ، على سبيل المثال: الصور والفيديو ، مثل منطقة رد الفعل. هل لدى اي منكم حل؟

تم وضع علامة على هذه المشكلة تلقائيًا على أنها قديمة نظرًا لعدم وجود نشاط حديث لها. سيتم إغلاقه إذا لم يحدث أي نشاط آخر. شكرا لمساهماتكم.

لدي مشكلة أيضا. يبدو أنه مضمّن تمامًا في "NativeDragSource.ts".

ومع ذلك ، فإنه ينشئ DragSource للوصول إلى القيم ، فإنه يضيف فقط تحذير وحدة التحكم يشير إلى أن المتصفح لن يسمح بذلك.

ومع ذلك ، يسمح المستعرض بذلك ، فهو في الوضع المحمي فقط ولا يسمح بتغييره أو الوصول إلى البيانات (للملفات ، ولكن يمكن تعداد العناصر بخصائص الملفات. (مثل DropZone) .

سأحاول شيئًا وأعود إليك

LeopoldLerchdarthtrevino ما زلت لا أستطيع الوصول إلى قائمة files قبل أن أسقط. أريد التحقق من نوع mime للملف عند التمرير وتغيير لون الحد اعتمادًا على ما إذا كان تنسيقًا صالحًا للملف. أنا أستخدم طريقة canDrop useDrop لخطاف $ # $ 2 $ # $. وتقوم بإرجاع مجموعة من الملفات فقط عندما أسقط. عندما أحوم فوق منطقة الإسقاط لدي مصفوفة فارغة

الشيء ، الأحداث ، التي يقدمها المتصفح ، كما هي ، لا يمكننا تغييرها. يتيح المتصفح الوصول إلى البيانات فقط عند السحب. بعد ذلك ، تكون جميع الأحداث اللاحقة في الوضع المحمي ، مما يعني أنه لا يمكنك الوصول إلى البيانات.

إذا كنت تستخدم طريقة onHover الخاصة بـ useDrop ، فستحصل على بيانات وصفية فارغة ، لأن المتصفح لا يسمح لك بالوصول إليها على "Dragenter". حتى إذا قمت بتخزين الكائن في dragstart (أو وظيفة التجميع) ، فسيقوم المتصفح في الخلفية بمسح الخصائص ، لأن لديك مرجعًا للكائن ، وليس نسخة منه.

الطريقة الوحيدة للتغلب على ذلك هي استخدام وظيفة "التجميع". هنا يمكنك الوصول إلى "العناصر" أو "الملفات" الخاصة بالعنصر (اعتمادًا على المتصفح الذي تستخدمه ، لن يسمح لك IE11 أبدًا بالوصول إليها من قبل ondrop).

ومع ذلك ، عليك أن تفعل كل شيء بنفسك: التحقق من صحتها وتذكرها على سبيل المثال. استخدامالمرجع. فمثلا

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

تضمين التغريدة
شكرا لك على التفسير! سأحاول هذا النوع من الحل