¿Hay una forma de detectar JavaScript si los archivos pueden ser eliminados en el dispositivo usado?

Question

He creado un formulario en un sitio web que permite a los usuarios subir archivos. Los usuarios también pueden arrastrar y soltar archivos en este formulario. Sin embargo, en algunos dispositivos, simplemente no es posible arrastrar y soltar archivos (por ejemplo en mi iPhone). Así que solo quiero mostrar el texto  Descargar y soltar archivos aquí  sólo en dispositivos en los que tiene sentido. ¿Hay alguna manera de detectar si el dispositivo soporta los archivos de arrastrar y soltar en principio? Una solución podría ser detectar si un puntero del ratón se mueve. En este caso, supongo que es posible arrastrar y soltar archivos. Sin embargo, sólo sería una suposición. ¿Hay una manera más adecuada de detectar esto? Tenga en cuenta que no quiero detectar si el navegador admite drag y drop en general, pero si el navegador admite drag y drop archivos.

bytebard · Accepted Answer

Usted podría utilizar window.navigator.userAgent para detectar lo que OS está utilizando el usuario. userAgent devuelve una cadena y se puede analizar a través de la cadena para intentar detectar ciertas palabras clave dentro de ella. Miré este artículo geeks for geeks. Junto con esta respuesta de flujo de pila Aquí.. combinando los dos debe ser capaz de elegir ciertas palabras clave y detectar lo que el usuario está en la mayoría de los casos. Parece que los teléfonos antiguos podrían tener un problema con esto para que no sea perfecto.

if (navigator.appVersion.indexOf("Mac") != -1) {
  onWeb = true;
} 
if (navigator.appVersion.indexOf("Win") != -1) {
  onWeb = true;
} else {
onWeb = false;
}

En mi opinión personal (por favor tome esto con un grano de sal) la cantidad de trabajo involucrado en esto con los errores potenciales en dispositivos antiguos no vale la pena el trabajo involucrado. Debido a esto trataría de utilizar texto para informar al usuario del potencial de Arrastre y Suelta así como darles un botón para subir archivos. Algunos usuarios prefieren la capacidad de cargar archivos manualmente a través de un arrastrar y soltar (yo mismo), y al tener ambas opciones fácilmente disponibles permite a los usuarios utilizar lo que prefieren más.

Respondida el Dec 17, 2020 a las 14:44 - por bytebard

Gpt · Answer

Para determinar si el dispositivo usado es capaz de admitir la funcionalidad de arrastrar y soltar archivos, puedes utilizar la API de arrastrar y soltar de HTML5 junto con algunas funciones de detección de eventos. Aquí te dejo un ejemplo de cómo lograrlo: html Prueba de soporte de arrastrar y soltar archivos drop-area { width: 300px; height: 200px; border: 2px dashed ccc; text-align: center; line-height: 200px; } Suelta archivos aquí // Función que verifica si el dispositivo soporta arrastrar y soltar archivos function detectFileDragAndDropSupport() { var div = document.getElementById('drop- area'); div.addEventListener('dragover', function(event) { event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; }); div.addEventListener('drop', function(event) { event.preventDefault(); var files = event.dataTransfer.files; if (files.length > 0) { alert('¡Este dispositivo soporta arrastrar y soltar archivos!'); } }); } // Llama a la función para detectar el soporte de arrastrar y soltar archivos al cargar la página detectFileDragAndDropSupport(); En este ejemplo, al cargar la página se llama a la función detectFileDragAndDropSupport() que agrega eventos de arrastrar y soltar a un área específica en la página. Si el dispositivo es capaz de soportar la funcionalidad, al soltar un archivo se mostrará un mensaje de alerta. Recuerda que esta solución no es infalible, ya que la detección de capacidad de los dispositivos puede variar. Sin embargo, es una forma de verificar de manera básica si el arrastrar y soltar de archivos es compatible con el dispositivo utilizado.

Gemini · Answer

Sí, hay varias formas de detectar si un dispositivo admite la función de arrastrar y soltar archivos en un navegador:

1. Detectar la propiedad DataTransfer:

javascript
if ('DataTransfer' in window) {
  console.log('El dispositivo admite la función de arrastrar y soltar archivos');
} else {
  console.log('El dispositivo no admite la función de arrastrar y soltar archivos');
}

2. Detectar el evento ondrop:

Los navegadores que admiten la función de arrastrar y soltar archivos normalmente activan el evento ondrop.

javascript
document.addEventListener('drop', function(e) {
  e.preventDefault();
  console.log('El dispositivo admite la función de arrastrar y soltar archivos');
});

3. Usar una API de terceros:

Existen bibliotecas de terceros, como Modernizr, que proporcionan funciones para detectar la compatibilidad con la función arrastrar y soltar de archivos.

4. Verificar el tipo de elemento MIME:

Cuando se arrastran y sueltan archivos en un navegador, normalmente tienen un tipo de elemento MIME que indica su formato. Puedes comprobar el tipo de elemento MIME del archivo arrastrado:

javascript
document.addEventListener('drop', function(e) {
  e.preventDefault();

  if (e.dataTransfer.files[0].type) {
    console.log('El dispositivo admite la función de arrastrar y soltar archivos');
  } else {
    console.log('El dispositivo no admite la función de arrastrar y soltar archivos');
  }
});

Una vez que hayas detectado la compatibilidad con la función arrastrar y soltar de archivos, puedes mostrar el texto "Arrastrar y soltar archivos aquí" solo en los dispositivos compatibles.

Respondida el Dec 18, 2020 a las 14:48 - por Gemini

¿Hay una forma de detectar JavaScript si los archivos pueden ser eliminados en el dispositivo usado?

3 Respuestas: