React-dnd: Bagaimana saya bisa mendapatkan info tentang menyeret file dalam metode canDrop?

Apakah Anda mencari untuk tidak mengizinkan seret pada Sumber ATAU untuk menunjukkan tidak diizinkan pada Target berdasarkan jenis?

1. untuk tidak mengizinkan seret, Anda harus mengembalikan false dari canDrag di Sumber.
2. untuk tidak mengizinkan drop, Anda harus mengontrol menggunakan types pada Target

@theTechie Tidak, saya mencari cara membaca ekstensi file yang sedang saya seret.

Semua metode sumber dan target mendapatkan monitor sebagai argumen kedua. (termasuk canDrop )

Anda dapat menggunakan monitor.getItem() untuk mendapatkan item yang sedang diseret.

Referensi:

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.
anda dapat menggunakan monitor

Ini tidak berfungsi untuk file

Itu aneh.
Saya yakin Anda menyeret dan menjatuhkan file dari sistem file ke Target?

Saya telah melakukan hal serupa dan tampaknya berhasil untuk saya. Jika Anda dapat membagikan beberapa kode, kami mungkin dapat melihat apa yang salah.

Bisakah Anda menunjukkan bagaimana Anda membaca ekstensi file dalam metode canDrop?

seperti yang sudah saya sebutkan di atas, monitor.getItem().files di dalam canDrop akan memberi Anda array objek File asli

Baca komentar kepalan saya, ketika Anda membaca file di canDrop itu menimbulkan kesalahan seperti yang saya sebutkan. Apakah Anda memiliki contoh kerja membaca file di canDrop atau Anda hanya merujuk ke dokumentasi? Kesalahan mengatakan bahwa saya tidak dapat membaca file sampai acara drop NativeDragSources.js:61 Browser tidak mengizinkan membaca "file" sampai acara drop

Mungkin kami menggunakan dua versi yang berbeda dan batasan ini telah ditambahkan kemudian. Saya menggunakan 2.1.4.

Oke, saya akan menguji versi terbaru dan memberi tahu Anda jika berhasil

Saya juga mendapatkan ini, ketika mencoba memfilter file di canDrop menurut tipe MIME. Segera setelah saya memanggil monitor.getItem().files ia mengeluarkan peringatan di atas (Chrome 56.0.2924.87, react-dnd 2.2.4, react-dnd-html5-backend 2.2.4).

Menurut MDN kasus saya, setidaknya, dapat diselesaikan menggunakan properti di event.dataTransfer , tetapi sejauh yang saya bisa lihat, react-dnd tidak mengekspos objek itu atau informasinya di mana pun.

@theTechie

Mungkin kami menggunakan dua versi yang berbeda dan batasan ini telah ditambahkan kemudian. Saya menggunakan 2.1.4.

Tidak, saya menggunakan versi yang sama. Juga diperbarui ke versi terbaru yang memungkinkan (2.2.4) dan mendapatkan kesalahan yang sama:

metode canDrop terlihat seperti ini:

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

Bagaimana itu bisa bekerja di sisi Anda? Apakah Anda memiliki contoh kerja?

Saya akan membagikan contoh kerja segera.
Pada Senin, 6 Mar 2017 jam 16:12, Andrey [email protected]
menulis:

@theTechie https://github.com/theTechie

Mungkin kami menggunakan dua versi yang berbeda dan batasan ini telah
telah ditambahkan kemudian. Saya menggunakan 2.1.4.

Tidak, saya menggunakan versi yang sama. Juga diperbarui ke versi terbaru yang memungkinkan
(2.2.4) dan mendapatkan kesalahan yang sama:

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

metode canDrop terlihat seperti ini:

canDrop: fungsi (alat peraga, monitor) {
biarkan file = monitor.getItem().files;
console.log('File: ', file);
kembali benar;
}

Bagaimana itu bisa bekerja di sisi Anda? Apakah Anda memiliki contoh kerja?

—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
.

>

Salam,
gagan

@andrewQwer - sangat menyesal!
saya memiliki memori yang salah tentang apa yang telah saya terapkan dan itu tidak menggunakan monitor.getItem().files dalam canDrop , yang saya lakukan hanyalah membatasi jumlah file yang dapat dihapus dengan mempertahankan jumlah file sekali itu dijatuhkan.

maaf karena menyesatkan!

PS: Saya sedang mencari cara untuk mencapai ini, akan memberi tahu Anda jika saya bisa.

Saya tidak berpikir ini akan pernah mungkin. Sepertinya membaca info tentang item yang diseret dibatasi dengan sengaja untuk tujuan keamanan.

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

Apakah mungkin untuk mengekspos beberapa informasi tentang file melalui objek event.dataTransfer (misalnya types )? Saya menyadari bahwa mungkin tidak memenuhi semua kasus penggunaan, tetapi setidaknya akan membantu beberapa.

Ini mungkin sesuatu yang harus ditambahkan ke backend HTML5, tetapi tampaknya mungkin untuk menentukan apakah file cocok dengan kumpulan tipe mime yang diterima sebelum file/folder dijatuhkan. Secara khusus, react-dropzone melakukan ini ketika Anda mengarahkan item ke dropzone, seperti yang dapat dilihat dalam contoh ini .

Adakah solusi untuk masalah ini?

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

Tidak basi

Saya juga mencari cara untuk mengizinkan menjatuhkan file tertentu, misalnya: gambar, video, seperti react-dropzone. Apakah ada yang punya solusi?

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.

Saya juga punya masalah. Tampaknya cukup hardcoded di "NativeDragSource.ts".

Itu menciptakan DragSource, namun, untuk mengakses nilai-nilai itu hanya menambahkan peringatan konsol yang menyebutkan bahwa browser tidak akan mengizinkannya.

Namun, browser TIDAK mengizinkannya, itu hanya dalam mode terproteksi dan tidak mengizinkan mengubahnya atau mengakses DATA (dari file, tetapi item dapat dengan properti file´ harus dapat disebutkan. (seperti yang dilakukan DropZone) .

Akan mencoba sesuatu dan kembali kepada Anda

@LeopoldLerch @darthtrevino Saya masih tidak dapat mengakses files sebelum saya berhenti. Saya ingin memeriksa jenis pantomim file saat mengarahkan kursor dan mengubah warna batas tergantung pada apakah itu format file yang valid. Saya menggunakan metode canDrop untuk useDrop hook. Dan itu mengembalikan array file tepat ketika saya drop. Ketika saya mengarahkan kursor ke zona drop saya memiliki array kosong

Masalahnya, peristiwa, yang diberikan browser, adalah sebagaimana adanya, kami tidak dapat mengubahnya. Browser memberikan akses ke data hanya pada dragstart. Setelah itu, semua acara berikutnya berada dalam mode terproteksi, yang berarti Anda tidak dapat mengakses data.

jika Anda menggunakan metode onHover dari useDrop, Anda akan mendapatkan metadata kosong, karena browser tidak mengizinkan Anda mengaksesnya di "dragenter". Bahkan jika Anda menyimpan objek di dragstart (atau fungsi kumpulkan), browser di latar belakang akan menghapus properti, karena Anda memiliki referensi ke objek, bukan salinannya.

Satu-satunya cara untuk mengatasinya, adalah dengan menggunakan fungsi "kumpulkan". Di sini Anda dapat mengakses "item" atau "file" dari item tersebut (tergantung pada browser yang Anda gunakan, IE11 tidak akan pernah mengizinkan Anda untuk mengaksesnya sebelum ondrop).

namun, Anda harus melakukan semuanya sendiri: memvalidasi dan mengingatnya di mis. penggunaanRef. Sebagai contoh

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

@LeopoldLerch
Terima kasih atas penjelasannya! Saya akan mencoba solusi semacam ini