¿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.

geekglitcher · 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 geekglitcher

Gpt · Answer

Para detectar si un dispositivo es capaz de admitir la funcionalidad de arrastrar y soltar archivos, puedes utilizar la API de arrastrar y soltar de HTML5 junto con JavaScript. Puedes verificar si el navegador admite la funcionalidad de arrastrar y soltar archivos utilizando el evento dragover en el elemento donde los usuarios deben arrastrar los archivos. Si el navegador admite esta funcionalidad, podrás detectar si el evento dataTransfer.types incluye el tipo de archivo Files, lo cual indicaría que se pueden arrastrar archivos. Aquí te dejo un ejemplo de cómo podrías hacerlo: html Arrastrar y Soltar Archivos drop-area { width: 300px; height: 200px; border: 2px dashed ccc; text-align: center; line-height: 200px; font-size: 20px; } Descargar y soltar archivos aquí const dropArea = document.getElementById('drop-area'); dropArea.addEventListener('dragover', (e) => { e.preventDefault(); if (e.dataTransfer.types.includes('Files')) { dropArea.innerText = 'Puedes soltar los archivos aquí'; } else { dropArea.innerText = 'Este navegador no admite la funcionalidad de arrastrar y soltar archivos'; } }); dropArea.addEventListener('drop', (e) => { e.preventDefault(); const files = e.dataTransfer.files; // Aquí puedes procesar los archivos que se han soltado dropArea.innerText = 'Archivos soltados'; }); Este código verificará si el navegador admite la funcionalidad de arrastrar y soltar archivos y mostrará un mensaje específico en función de esa capacidad. También podrás acceder a los archivos que se han soltado para procesarlos según tus necesidades. Espero que esta solución sea útil para tu caso. ¡Déjame saber si tienes alguna otra pregunta!

Gemini · Answer

Sí, hay una forma de detectar si el navegador admite la función de arrastrar y soltar archivos. Puedes utilizar la interfaz DataTransfer para comprobar si el objeto de datos transferidos contiene archivos. Aquí tienes un ejemplo de código que puedes utilizar:

javascript
const dropArea = document.getElementById("drop-area");

dropArea.addEventListener("dragenter", (e) => {
  e.preventDefault();
  e.stopPropagation();

  if (e.dataTransfer.types.includes("Files")) {
    // El dispositivo admite la función de arrastrar y soltar archivos
    dropArea.classList.add("active");
  }
});

dropArea.addEventListener("dragleave", (e) => {
  e.preventDefault();
  e.stopPropagation();

  dropArea.classList.remove("active");
});

dropArea.addEventListener("drop", (e) => {
  e.preventDefault();
  e.stopPropagation();

  if (e.dataTransfer.files.length > 0) {
    // El usuario ha soltado archivos en el área de colocación
    // ... Procesar los archivos aquí ...
  }

  dropArea.classList.remove("active");
});

En este ejemplo, el código añade la clase active al área de colocación cuando el usuario entra en ella con un archivo. La clase se elimina cuando el usuario sale del área de colocación o suelta los archivos.

Ten en cuenta que este método solo detectará si el navegador admite la función de arrastrar y soltar archivos. No detectará si el dispositivo en sí admite la función de arrastrar y soltar.

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

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

3 Respuestas: