React-dnd: Comment puis-je obtenir des informations sur le déplacement de fichiers dans la méthode canDrop ?

Cherchez-vous à ne pas autoriser le glissement sur la source OU à afficher non autorisé sur la cible en fonction d'un type ?

1. pour ne pas autoriser le glissement, vous devez renvoyer false partir de canDrag dans Source.
2. pour ne pas autoriser la chute, vous devez contrôler l'utilisation types sur la cible

@theTechie Non, je cherche un moyen de lire l'extension de fichier que je traîne actuellement.

Toutes les méthodes source et cible obtiennent monitor comme deuxième argument. (y compris canDrop )

Vous pouvez utiliser monitor.getItem() pour obtenir les éléments actuellement déplacés.

Référence:

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.
vous pouvez utiliser le monitor

Cela ne fonctionne pas pour les fichiers

C'est étrange.
Je crois que vous faites glisser et déposez des fichiers du système de fichiers sur une cible ?

J'ai fait une chose similaire et cela semble fonctionner pour moi. Si vous pouvez partager du code, nous pouvons probablement voir ce qui ne va pas.

Pourriez-vous s'il vous plaît montrer comment vous lisez l'extension de fichier dans la méthode canDrop?

comme je l'ai déjà mentionné ci-dessus, monitor.getItem().files à l'intérieur canDrop devrait vous donner un tableau d'objets natifs File

Lisez mon premier commentaire, lorsque vous lisez des fichiers dans canDrop, cela génère une erreur comme je l'ai mentionné. Avez-vous un exemple de travail de lecture de fichiers dans canDrop ou vous référez-vous simplement à la documentation ? L'erreur indique que je ne peux pas lire les fichiers jusqu'à l'événement de dépôt NativeDragSources.js:61 Le navigateur n'autorise pas la lecture de "fichiers" jusqu'à l'événement de dépôt

Il est possible que nous utilisions deux versions différentes et cette restriction a été ajoutée ultérieurement. J'utilise 2.1.4.

Ok, je vais tester la dernière version et je vous dirai si cela fonctionne

J'obtiens également cela lorsque j'essaie de filtrer des fichiers dans canDrop par type MIME. Dès que j'appelle monitor.getItem().files , il lance l'avertissement ci-dessus (Chrome 56.0.2924.87, react-dnd 2.2.4, react-dnd-html5-backend 2.2.4).

Selon MDN , mon cas, au moins, pourrait être accompli en utilisant une propriété sur event.dataTransfer , mais pour autant que je sache, react-dnd n'expose cet objet ou ses informations nulle part.

@theTechie

Il est possible que nous utilisions deux versions différentes et cette restriction a été ajoutée ultérieurement. J'utilise 2.1.4.

Non, j'utilise la même version. Également mis à jour vers la dernière version possible (2.2.4) et obtenant la même erreur :

La méthode canDrop ressemble à ceci :

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

Comment cela peut-il fonctionner de votre côté ? Avez-vous un exemple de travail?

Je vais partager un exemple de travail sous peu.
Le lundi 6 mars 2017 à 16h12, Andrey Karavaychik [email protected]
a écrit:

@theTechie https://github.com/theTechie

Il est possible que nous utilisions deux versions différentes et cette restriction a
été ajouté plus tard. J'utilise 2.1.4.

Non, j'utilise la même version. Également mis à jour vers la dernière version possible
(2.2.4) et obtenant la même erreur :

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

La méthode canDrop ressemble à ceci :

canDrop : fonction (accessoires, moniteur) {
let files = monitor.getItem().files;
console.log('Fichiers : ', fichiers);
retourner vrai ;
}

Comment cela peut-il fonctionner de votre côté ? Avez-vous un exemple de travail?

—
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
.

>

Salutations,
gagan

@andrewQwer - vraiment désolé !
j'avais une mauvaise mémoire de ce que j'avais implémenté et il n'utilise pas monitor.getItem().files dans canDrop , tout ce que je fais est de restreindre le nombre de fichiers qui peuvent être supprimés en maintenant le nombre de fichiers une fois c'est tombé.

désolé d'avoir induit en erreur !

PS: je cherche des moyens d'y parvenir, je vous ferai savoir si j'en suis capable.

Je ne pense pas que cela sera jamais possible. Il semble que la lecture des informations sur les éléments déplacés soit intentionnellement restreinte pour des raisons de sécurité.

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

Serait-il possible d'exposer des informations sur les fichiers via l'objet event.dataTransfer (par exemple types ) ? Je me rends compte que cela ne satisfera peut-être pas tous les cas d'utilisation, mais cela aiderait au moins certains.

Cela peut être quelque chose à ajouter au backend HTML5, mais il semble possible de déterminer si un fichier correspond à un ensemble accepté de types mime avant que le fichier/dossier ne soit supprimé. Plus précisément, react-dropzone le fait lorsque vous survolez l'élément au-dessus de la zone de dépôt, comme on peut le voir dans cet exemple .

Une solution pour ce problème encore?

Ce problème a été automatiquement marqué comme obsolète, car il n'a pas eu d'activité récente. Il sera fermé s'il n'y a plus d'activité. Merci pour vos contributions.

Pas périmé

Je cherche également un moyen d'autoriser le dépôt de fichiers spécifiques, par exemple: images, vidéo, comme react-dropzone. Quelqu'un a-t-il une solution?

Ce problème a été automatiquement marqué comme obsolète, car il n'a pas eu d'activité récente. Il sera fermé s'il n'y a plus d'activité. Merci pour vos contributions.

J'ai le problème aussi. Il semble être assez codé en dur dans le "NativeDragSource.ts".

Il crée un DragSource, cependant, pour accéder aux valeurs, il ajoute simplement un avertissement de console mentionnant que le navigateur ne le permettrait pas.

Cependant, le navigateur le permet, il est juste en mode protégé et ne permet pas de le modifier ou d'accéder aux DONNÉES (des fichiers, mais les éléments peuvent avec les propriétés des fichiers devraient pouvoir être énumérés. (comme le fait DropZone) .

Je vais essayer quelque chose et je reviens vers vous

@LeopoldLerch @darthtrevino Je ne peux toujours pas accéder à la liste files avant de laisser tomber. Je veux vérifier le type mime du fichier en survol et changer la couleur de la bordure selon qu'il s'agit d'un format valide du fichier. J'utilise la méthode canDrop pour le crochet useDrop . Et il renvoie un tableau de fichiers juste au moment où je dépose. Lorsque je survole la zone de dépôt, j'ai un tableau vide

Le fait est que les événements fournis par le navigateur sont tels qu'ils sont, nous ne pouvons pas les modifier. Le navigateur donne accès aux données uniquement sur dragstart. Après cela, tous les événements suivants sont en mode protégé, ce qui signifie que vous ne pouvez pas accéder aux données.

si vous utilisez la méthode onHover de useDrop, vous obtiendrez des métadonnées vides, car le navigateur ne vous permet pas d'y accéder sur "dragenter". Même si vous stockez l'objet dans dragstart (ou la fonction de collecte), le navigateur effacera les propriétés en arrière-plan, car vous avez une référence à l'objet, pas une copie de celui-ci.

La seule façon de contourner cela est d'utiliser la fonction "collecter". Ici, vous pouvez accéder aux "éléments" ou "fichiers" de l'élément (selon le navigateur que vous utilisez, IE11 ne vous permettra jamais d'y accéder avant le dépôt).

cependant, vous devez tout faire par vous-même : le valider et le mémoriser, par exemple. une utilisationRéf. Par example

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
Merci pour l'explication! je vais essayer ce genre de solution