React-dnd: Wie kann ich Informationen zum Ziehen von Dateien in Candrop-Methode erhalten?

Suchen Sie, dass Sie nicht zulassen, dass der Ziehen auf der Quelle nicht auf dem Ziel zulässig ist, das auf dem Target basierend auf einem Typ nicht zulässig ist?

1. Um den Zug nicht zuzulassen, sollten Sie false ab canDrag in Quelle zurücksenden.
2. Um den Drop nicht zuzulassen, sollten Sie mit types auf dem Ziel steuern

@ThetaTechie Nein, ich lasse eine Möglichkeit, die Dateierweiterung zu lesen, die ich gerade ziehe.

Alle Quell- und Zielmethoden erhalten monitor als zweites Argument. (einschließlich canDrop )

Sie können monitor.getItem() verwenden, um die aktuell gezogenen Artikel zu erhalten.

Bezug:

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.
Sie können die monitor verwenden

Für Dateien funktioniert es nicht

Das ist seltsam.
Ich glaube, Sie ziehen Dateien vom Dateisystem auf ein Ziel und legen sie dort ab?

Ich habe ähnliches gemacht und es scheint bei mir zu funktionieren. Wenn Sie etwas Code teilen können, können wir wahrscheinlich sehen, was falsch ist.

Könnten Sie bitte zeigen, wie Sie die Dateierweiterung in der canDrop-Methode lesen?

Wie ich bereits oben erwähnt habe, sollte monitor.getItem().files innerhalb canDrop Ihnen ein Array von nativen File Objekten geben

Lesen Sie meinen ersten Kommentar, wenn Sie Dateien in canDrop lesen, wird ein Fehler ausgegeben, wie ich erwähnt habe. Haben Sie ein funktionierendes Beispiel zum Lesen von Dateien in canDrop oder verweisen Sie nur auf die Dokumentation? Der Fehler besagt, dass ich Dateien bis zum Drop-Ereignis nicht lesen kann. NativeDragSources.js:61 Der Browser erlaubt das Lesen von "Dateien" bis zum Drop-Ereignis nicht

Es ist möglich, dass wir zwei verschiedene Versionen verwenden und diese Einschränkung später hinzugefügt wurde. Ich verwende 2.1.4.

Ok, ich werde die neueste Version testen und euch wissen lassen, ob sie funktioniert

Ich bekomme das auch, wenn ich versuche, Dateien in canDrop nach MIME-Typ zu filtern. Sobald ich monitor.getItem().files anrufe, wirft es die obige Warnung (Chrome 56.0.2924.87, respond-dnd 2.2.4, respond-dnd-html5-backend 2.2.4).

Laut MDN könnte zumindest mein Fall mit einer Eigenschaft auf event.dataTransfer erreicht werden, aber soweit ich sehen kann, stellt respond-dnd dieses Objekt oder seine Informationen nirgendwo zur Verfügung.

@theTechie

Es ist möglich, dass wir zwei verschiedene Versionen verwenden und diese Einschränkung später hinzugefügt wurde. Ich verwende 2.1.4.

Nein, ich benutze die gleiche Version. Auch auf die neueste mögliche Version (2.2.4) aktualisiert und den gleichen Fehler erhalten:

canDrop-Methode sieht so aus:

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

Wie kann es auf Ihrer Seite funktionieren? Haben Sie ein funktionierendes Beispiel?

Ich werde in Kürze ein Arbeitsbeispiel teilen.
Am Montag, 6. März 2017 um 16:12 Uhr, Andrey Karavaychik [email protected]
schrieb:

@theTechie https://github.com/theTechie

Es ist möglich, dass wir zwei verschiedene Versionen verwenden und diese Einschränkung gilt
nachträglich hinzugefügt worden. Ich verwende 2.1.4.

Nein, ich benutze die gleiche Version. Auch auf die neuste mögliche Version aktualisiert
(2.2.4) und den gleichen Fehler erhalten:

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

canDrop-Methode sieht so aus:

canDrop: Funktion (Requisiten, Monitor) {
let files = monitor.getItem().files;
console.log('Dateien: ', Dateien);
gib true zurück;
}

Wie kann es auf Ihrer Seite funktionieren? Haben Sie ein funktionierendes Beispiel?

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
.

>

Grüße,
Gagan

@andrewQwer - wirklich leid!
Ich hatte eine falsche Erinnerung an das, was ich implementiert hatte, und es verwendet nicht monitor.getItem().files in canDrop . Alles, was ich tue, ist, die Anzahl der Dateien zu beschränken, die gelöscht werden können, indem die Dateianzahl einmal beibehalten wird es ist gefallen.

Entschuldigung für die Irreführung!

PS: Ich suche nach Möglichkeiten, wie wir dies erreichen können, werde Sie wissen lassen, ob ich dazu in der Lage bin.

Ich glaube nicht, dass das jemals möglich sein wird. Sieht so aus, als ob das Lesen von Informationen zu gezogenen Elementen aus Sicherheitsgründen absichtlich eingeschränkt wurde.

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

Wäre es möglich, einige Informationen über die Dateien über das Objekt event.dataTransfer (z. B. types ) bereitzustellen? Mir ist klar, dass dies möglicherweise nicht alle Anwendungsfälle erfüllt, aber es würde zumindest einigen helfen.

Dies könnte dem HTML5-Backend hinzugefügt werden, aber es scheint möglich zu sein, festzustellen, ob eine Datei zu einem akzeptierten Satz von MIME-Typen passt, bevor die Datei/der Ordner gelöscht wird. React-Dropzone tut dies insbesondere, wenn Sie das Element über die Dropzone bewegen, wie in diesem Beispiel zu sehen ist.

Gibt es schon eine Lösung für dieses Problem?

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität gab. Es wird geschlossen, wenn keine weiteren Aktivitäten stattfinden. Vielen Dank für Ihre Beiträge.

Nicht altbacken

Ich suche auch nach einer Möglichkeit, bestimmte Dateien fallen zu lassen, zB: Bilder, Videos, wie React-Dropzone. Hat jemand eine Lösung?

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität gab. Es wird geschlossen, wenn keine weiteren Aktivitäten stattfinden. Vielen Dank für Ihre Beiträge.

Ich habe das Problem auch. Es scheint in der "NativeDragSource.ts" ziemlich fest codiert zu sein.

Es erstellt eine DragSource, aber für den Zugriff auf die Werte fügt es nur eine Konsolenwarnung hinzu, die erwähnt, dass der Browser dies nicht zulässt.

Der Browser lässt es jedoch zu, er befindet sich nur im geschützten Modus und erlaubt keine Änderung oder den Zugriff auf die DATEN ( der Dateien, aber die Elemente können mit den Eigenschaften der Dateien aufgelistet werden. (wie DropZone) .

Werde mal was ausprobieren und auf dich zurückkommen

@LeopoldLerch @darthtrevino Ich kann immer noch nicht auf die files -Liste zugreifen, bevor ich ablege. Ich möchte den MIME-Typ der Datei beim Hover überprüfen und die Farbe des Rahmens ändern, je nachdem, ob es sich um ein gültiges Format der Datei handelt. Ich verwende die Methode $ canDrop für den Hook useDrop . Und es gibt eine Reihe von Dateien zurück, wenn ich sie ablege. Wenn ich mit der Maus über die Dropzone fahre, habe ich ein leeres Array

Die Sache ist, die Ereignisse, die der Browser liefert, sind so wie sie sind, wir können sie nicht ändern. Der Browser gibt nur beim Dragstart Zugriff auf die Daten. Danach befinden sich alle nachfolgenden Ereignisse im geschützten Modus, was bedeutet, dass Sie nicht auf die Daten zugreifen können.

Wenn Sie die onHover-Methode von useDrop verwenden, erhalten Sie leere Metadaten, da der Browser es Ihnen nicht erlaubt, auf "dragenter" zuzugreifen. Selbst wenn Sie das Objekt in Dragstart (oder der Sammelfunktion) speichern, löscht der Browser im Hintergrund die Eigenschaften, da Sie eine Referenz auf das Objekt haben, keine Kopie davon.

Die einzige Möglichkeit, dies zu umgehen, besteht darin, die Funktion "Sammeln" zu verwenden. Hier können Sie auf die "Elemente" oder "Dateien" des Elements zugreifen (je nach verwendetem Browser wird IE11 Ihnen niemals erlauben, vor dem Ondrop darauf zuzugreifen).

Sie müssen jedoch alles selbst tun: es validieren und sich daran erinnern, z. eine useRef. Beispielsweise

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
Vielen Dank für die Erklärung! Ich werde diese Art der Problemumgehung versuchen