React-dnd: Как я могу получить информацию о перетаскивании файлов в методе canDrop?

Вы ищете запретить перетаскивание на источнике ИЛИ показать, что не разрешено на цели на основе типа?

1. чтобы не допустить перетаскивания, вы должны вернуть false из canDrag в Source.
2. чтобы не допустить дропа, вы должны управлять с помощью types на Target

@theTechie Нет, я ищу способ чтения расширения файла, которое я сейчас перетаскиваю.

Все исходные и целевые методы получают 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, react-dnd 2.2.4, react-dnd-html5-backend 2.2.4).

Согласно MDN , мой случай, по крайней мере, может быть выполнен с использованием свойства event.dataTransfer , но, насколько я понимаю, react-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 г., 16:12, Андрей Каравайчик, [email protected]
написал:

@theTechie https://github.com/theTechie

Возможно, мы используем две разные версии, и это ограничение
были добавлены позже. Я использую 2.1.4.

Нет, я использую ту же версию. Также обновлен до последней возможной версии
(2.2.4) и получаю ту же ошибку:

[изображение: изображение]
https://cloud.githubusercontent.com/assets/710513/23606619/8acabe7a-0272-11e7-8db1-b1c88870cf92.png

Метод canDrop выглядит так:

canDrop: функция (реквизит, монитор) {
пусть файлы = монитор.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 , все, что я делаю, это ограничиваю количество файлов, которые можно удалить, сохраняя количество файлов один раз это упало.

извините за введение в заблуждение!

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 делает это, когда вы наводите элемент на dropzone, как показано в этом примере .

Любое решение для этой проблемы еще?

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время в ней не было активности. Он будет закрыт, если никакой дальнейшей активности не произойдет. Спасибо за ваш вклад.

Не устарел

Я также ищу способ разрешить удаление определенных файлов, например: изображений, видео, таких как react-dropzone. у кого-нибудь есть решение?

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время в ней не было активности. Он будет закрыт, если никакой дальнейшей активности не произойдет. Спасибо за ваш вклад.

У меня тоже проблема. Похоже, что в «NativeDragSource.ts» он жестко запрограммирован.

Он создает DragSource, однако для доступа к значениям он просто добавляет консольное предупреждение, в котором упоминается, что браузер не разрешает это.

Тем не менее, браузер ДЕЙСТВИТЕЛЬНО разрешает это, он просто находится в защищенном режиме и не позволяет изменять его или получать доступ к ДАННЫМ (файлов, но элементы могут быть перечислены со свойствами файлов. (как это делает DropZone) .

Попробую что-нибудь и вернусь к вам

@LeopoldLerch @darthtrevino Я все еще не могу получить доступ к списку files , пока не упаду. Я хочу проверить тип mime файла при наведении и изменить цвет границы в зависимости от того, является ли это допустимым форматом файла. Я использую метод useDrop canDrop хука useDrop. И он возвращает массив файлов только тогда, когда я бросаю. Когда я наводил курсор на зону перетаскивания, у меня был пустой массив

Дело в том, что события, которые предоставляет браузер, такие, какие они есть, мы не можем их изменить. Браузер дает доступ к данным только на драгстарте. После этого все последующие события находятся в защищенном режиме, а значит, вы не можете получить доступ к данным.

если вы используете метод onHover для useDrop, вы получите пустые метаданные, так как браузер не позволяет вам получить к ним доступ на «dragenter». Даже если вы сохраните объект в dragstart (или в функции collect), браузер в фоновом режиме очистит свойства, так как у вас есть ссылка на объект, а не его копия.

Единственный способ обойти это — использовать функцию «собрать». Здесь вы можете получить доступ к «элементам» или «файлам» элемента (в зависимости от используемого вами браузера IE11 никогда не позволит вам получить к ним доступ до загрузки).

однако вы должны делать все самостоятельно: проверять и запоминать, например. использованиеRef. Например

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

@ЛеопольдЛерх
Спасибо вам за разъяснение! попробую такой обходной путь