React-dnd: canDropメソッドでファイルをドラッグすることに関する情報を取得するにはどうすればよいですか？

ソースでのドラッグを許可しないこと、またはタイプに基づいてターゲットで許可されていないことを表示することをお探しですか？

1. ドラッグを許可しないようにするには、ソースのcanDrag falseを返す必要があります。
2. ドロップを許可しないようにするには、ターゲットでtypesを使用して制御する必要があります

@theTechieいいえ、現在ドラッグしているファイル拡張子を読み取る方法を探しています。

すべてのソースメソッドとターゲットメソッドは、2番目の引数として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メソッドでファイル拡張子をどのように読み取るかを教えてください。

すでに上で述べたように、$＃$ 1 $＃$内のcanDrop monitor.getItem().filesは、ネイティブFileオブジェクトの配列を提供するはずです。

私の最初のコメントを読んでください。canDropでファイルを読み取ると、前述のようにエラーがスローされます。 canDropでファイルを読み取る実例はありますか、それともドキュメントを参照するだけですか？ エラーは、ドロップイベントまでファイルを読み取ることができないことを示していますNativeDragSources.js：61ブラウザはドロップイベントまで「ファイル」の読み取りを許可しません

2つの異なるバージョンを使用している可能性があり、この制限は後で追加されました。 2.1.4を使用しています。

OK、最新バージョンをテストして、動作するかどうかをお知らせします

canDropのファイルをMIMEタイプでフィルタリングしようとすると、これも発生します。 monitor.getItem().filesを呼び出すとすぐに、上記の警告がスローされます（Chrome 56.0.2924.87、react-dnd 2.2.4、react-dnd-html5-backend 2.2.4）。

MDNによると、少なくとも私の場合はevent.dataTransferのプロパティを使用して実行できますが、私が見る限り、react-dndはそのオブジェクトやその情報をどこにも公開しません。

@theTechie

2つの異なるバージョンを使用している可能性があり、この制限は後で追加されました。 2.1.4を使用しています。

いいえ、同じバージョンを使用しています。 また、可能な限り最新のバージョン（2.2.4）に更新され、同じエラーが発生します。

canDropメソッドは次のようになります。

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

それはあなたの側でどのように機能しますか？ 実例はありますか？

すぐに実例を共有します。
2017年3月6日月曜日午後4時12分、Andrey [email protected]
書きました：

@theTechie https://github.com/theTechie

2つの異なるバージョンを使用している可能性があり、この制限には
後で追加されました。 2.1.4を使用しています。

いいえ、同じバージョンを使用しています。 また、可能な限り最新のバージョンに更新されました
（2.2.4）そして同じエラーが発生します：

【画像：画像】
https://cloud.githubusercontent.com/assets/710513/23606619/8acabe7a-0272-11e7-8db1-b1c88870cf92.png

canDropメソッドは次のようになります。

canDrop：関数（小道具、モニター）{
let files = monitor.getItem（）。files;
console.log（ 'ファイル：'、ファイル）;
trueを返します。
}

それはあなたの側でどのように機能しますか？ 実例はありますか？

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
。

>>

よろしく、
ガガン

@ andrewQwer-本当にごめんなさい！
実装したもののメモリが間違っていて、 canDropでmonitor.getItem().filesを使用していません。ファイル数を一度維持することで、ドロップできるファイルの数を制限しています。それは落とされました。

誤解を招くことをお詫びします！

PS：私はこれを達成する方法を検討しています。私ができるかどうかをお知らせします。

これが可能になるとは思いません。 ドラッグされたアイテムの情報の読み取りは、セキュリティ上の理由から意図的に制限されているようです。

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タイプのセットに適合するかどうかを判断することは可能のようです。 具体的には、この例に示すように、ドロップゾーンの上にアイテムを置くと、react-dropzoneがこれを行います。

この問題の解決策はまだありますか？

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

古くない

また、react-dropzoneなどの特定のファイル（画像、ビデオなど）をドロップできるようにする方法も探しています。 誰かが解決策を持っていますか？

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

私にも問題があります。 「NativeDragSource.ts」ではかなりハードコーディングされているようです。

DragSourceを作成しますが、値にアクセスするために、ブラウザがそれを許可しないことを示すコンソール警告を追加するだけです。

ただし、ブラウザはそれを許可します。プロテクトモードであり、変更したり、DATA（ファイルの）にアクセスしたりすることはできませんが、ファイルのプロパティを持つアイテムを列挙できる必要があります（DropZoneのように） 。

何かを試して、あなたに戻ってきます

@LeopoldLerch @darthtrevinoドロップする前に、まだfilesリストにアクセスできません。 ホバー時にファイルのmimeタイプを確認し、ファイルの有効な形式であるかどうかに応じて境界線の色を変更したいと思います。 useDropフックにcanDropメソッドを使用しています。 そして、ドロップするとすぐにファイルの配列が返されます。 ドロップゾーンにカーソルを合わせると、空の配列があります

つまり、ブラウザが配信するイベントはそのままで、変更することはできません。 ブラウザは、ドラッグスタートでのみデータへのアクセスを許可します。 その後、後続のすべてのイベントは保護モードになります。つまり、データにアクセスできなくなります。

useDropのonHoverメソッドを使用すると、ブラウザが「dragenter」でのアクセスを許可しないため、空のメタデータを取得します。 オブジェクトをdragstart（またはcollect-function）に保存した場合でも、オブジェクトのコピーではなくオブジェクトへの参照があるため、ブラウザーはバックグラウンドでプロパティをクリアします。

これを回避する唯一の方法は、「収集」機能を使用することです。 ここで、アイテムの「アイテム」または「ファイル」にアクセスできます（使用するブラウザーによっては、IE11ではドロップ前にそれらにアクセスすることはできません）。

ただし、すべて自分で行う必要があります。たとえば、検証して覚えておく必要があります。 useRef。 例えば

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
ご説明ありがとうございます！ この種の回避策を試してみます