React-dnd: ¿Cómo puedo obtener información sobre cómo arrastrar archivos en el método canDrop?

¿Está buscando no permitir arrastrar en el Origen O mostrar no permitido en el Destino según un tipo?

1. para no permitir arrastrar, debe devolver false desde canDrag en Fuente.
2. para no permitir la caída, debe controlar usando types en Target

@theTechie No, estoy buscando una forma de leer la extensión del archivo que estoy arrastrando actualmente.

Todos los métodos de origen y de destino obtienen monitor como segundo argumento. (incluyendo canDrop )

Puede usar monitor.getItem() para obtener los elementos arrastrados actualmente.

Referencia:

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.
puedes usar el monitor

No funciona para archivos.

Eso es extraño.
Creo que está arrastrando y soltando archivos del sistema de archivos en un destino.

He hecho algo similar y parece estar funcionando para mí. Si puede compartir algún código, probablemente podamos ver qué está mal.

¿Podría mostrar cómo lee la extensión de archivo en el método canDrop?

como ya mencioné anteriormente, monitor.getItem().files dentro canDrop debería brindarle una variedad de objetos nativos File

Lea mi primer comentario, cuando lee archivos en canDrop arroja un error como mencioné. ¿Tiene un ejemplo práctico de lectura de archivos en canDrop o simplemente consulta la documentación? El error dice que no puedo leer archivos hasta el evento de eliminación NativeDragSources.js:61 El navegador no permite leer "archivos" hasta el evento de eliminación

Es posible que estemos usando dos versiones diferentes y esta restricción se haya agregado más tarde. Estoy usando 2.1.4.

Ok, probaré la última versión y les avisaré si funciona.

También obtengo esto cuando trato de filtrar archivos en canDrop por tipo MIME. Tan pronto como llamo a monitor.getItem().files , aparece la advertencia anterior (Chrome 56.0.2924.87, react-dnd 2.2.4, react-dnd-html5-backend 2.2.4).

De acuerdo con MDN , mi caso, al menos, podría lograrse usando una propiedad en event.dataTransfer , pero por lo que puedo ver, react-dnd no expone ese objeto o su información en ninguna parte.

@thetechie

Es posible que estemos usando dos versiones diferentes y esta restricción se haya agregado más tarde. Estoy usando 2.1.4.

No, uso la misma versión. También actualizado a la última versión posible (2.2.4) y obteniendo el mismo error:

El método canDrop se ve así:

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

¿Cómo puede funcionar de tu lado? ¿Tienes un ejemplo de trabajo?

Compartiré un ejemplo de trabajo en breve.
El lunes 6 de marzo de 2017 a las 16:12, Andrey Karavaychik [email protected]
escribió:

@theTechie https://github.com/theTechie

Es posible que estemos usando dos versiones diferentes y esta restricción haya
sido añadido más tarde. Estoy usando 2.1.4.

No, uso la misma versión. También actualizado a la última versión posible.
(2.2.4) y obteniendo el mismo error:

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

El método canDrop se ve así:

canDrop: función (accesorios, monitor) {
dejar archivos = monitor.getItem().archivos;
console.log('Archivos: ', archivos);
devolver verdadero;
}

¿Cómo puede funcionar de tu lado? ¿Tienes un ejemplo de trabajo?

—
Estás recibiendo esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/react-dnd/react-dnd/issues/584#issuecomment-284361793 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AA_31panjV9Uo11jF63f2Pkx4FBKiV6Aks5ri-MtgaJpZM4K5hkG
.

>

Saludos,
Gagan

@andrewQwer - ¡Realmente lo siento!
tenía una memoria incorrecta de lo que había implementado y no usa monitor.getItem().files en canDrop , todo lo que estoy haciendo es restringir la cantidad de archivos que se pueden eliminar manteniendo el conteo de archivos una vez se ha caído.

lo siento por engañar!

PD: estoy buscando formas de lograr esto, les haré saber si puedo hacerlo.

No creo que esto sea posible nunca. Parece que la lectura de información sobre elementos arrastrados está restringida intencionalmente por motivos de seguridad.

http://stackoverflow.com/questions/25016442/how-to-distinguir-si-un-archivo-o-carpeta-se-arrastran-antes-de-ser-droppe

¿Sería posible exponer alguna información sobre los archivos a través del objeto event.dataTransfer (por ejemplo types )? Me doy cuenta de que puede que no satisfaga todos los casos de uso, pero ayudaría al menos a algunos.

Esto podría ser algo que se agregue al backend HTML5, pero parece posible determinar si un archivo se ajusta a un conjunto aceptado de tipos MIME antes de que se elimine el archivo o la carpeta. Específicamente, react-dropzone hace esto cuando pasa el elemento sobre el dropzone, como se puede ver en este ejemplo .

¿Alguna solución para este problema todavía?

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

no rancio

También estoy buscando una manera de permitir soltar archivos específicos, por ejemplo: imágenes, video, como react-dropzone. ¿Alguien tiene una solución?

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

Yo también tengo el problema. Parece estar bastante codificado en "NativeDragSource.ts".

Crea un DragSource, sin embargo, para acceder a los valores, solo agrega una advertencia de consola que menciona que el navegador no lo permitiría.

Sin embargo, el navegador SÍ lo permite, solo está en modo protegido y no permite cambiarlo o acceder a los DATOS (de los archivos, pero los elementos pueden enumerarse con las propiedades de los archivos. (como lo hace DropZone) .

Intentaré algo y volveré a ti.

@LeopoldLerch @darthtrevino Todavía no puedo acceder a la lista de files antes de abandonar. Quiero verificar el tipo mimo del archivo al pasar el mouse y cambiar el color del borde dependiendo de si es un formato válido del archivo. Estoy usando canDrop método useDrop . Y devuelve una serie de archivos justo cuando los suelto. Cuando paso el cursor sobre la zona de colocación, tengo una matriz vacía

La cuestión es que los eventos que ofrece el navegador son como son, no podemos cambiarlos. El navegador da acceso a los datos solo en dragstart. Después de eso, todos los eventos posteriores están en modo protegido, lo que significa que no puede acceder a los datos.

si usa el método onHover de useDrop, obtendrá metadatos vacíos, ya que el navegador no le permite acceder a ellos en "dragenter". Incluso si almacena el objeto en dragstart (o la función de recopilación), el navegador borrará las propiedades en segundo plano, ya que tiene una referencia al objeto, no una copia de él.

La única forma de evitar eso es usar la función "recolectar". Aquí puede acceder a los "elementos" o "archivos" del elemento (dependiendo del navegador que utilice, IE11 nunca le permitirá acceder a ellos antes de colocarlos).

sin embargo, debe hacerlo todo usted mismo: validarlo y recordarlo en, por ejemplo. un usoRef. Por ejemplo

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
¡Gracias por la explicación! Probaré este tipo de solución