Tipo de archivo límite en el área de arrastrar y soltar

¿Es posible limitar el tipo de archivo aceptado de una entrada de arrastrar y soltar? He reemplazado una entrada clásica de archivo bootstrap4 con un área de arrastrar y soltar. No estoy creando un sitio web sino una aplicación de electrones. De momento soy capaz de gestionar los archivos en vue antes de procesarlos en el proceso principal de nodo de la aplicación, pero no tengo idea de cómo limitar el tipo de archivo que el usuario puede seleccionar.

Esta es la vieja entrada de archivo

Como puedes ver, he usado el atributo de aceptación, ¿quizás puedo hacer lo mismo con el área de gotas?

Pregunta hecha hace 3 años, 4 meses, 13 días - Por bytebard

2 Respuestas:

  • Sí, es posible limitar el tipo de archivo aceptado en un área de arrastrar y soltar en HTML utilizando el atributo accept. Aquí te muestro cómo puedes hacerlo:

    html

    
    Arrastra y suelta tus archivos aquí

    En este ejemplo, el código HTML define un área de gotas con el id drop-area. Luego, se añaden event listeners para los eventos dragover, dragleave y drop para gestionar el comportamiento de arrastrar y soltar.

    Dentro del evento drop, se obtienen los archivos que han sido soltados en el área y se comprueba el tipo de cada archivo utilizando la propiedad type. En el ejemplo, se limita la aceptación a archivos PDF y de texto. Puedes ajustar esta condición según los tipos de archivo que desees aceptar.

    Espero que esta información te sea útil para limitar el tipo de archivo aceptado en un área de arrastrar y soltar en tu aplicación de Electron. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 18, 2020 a las 11:18 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Sí, es posible limitar el tipo de archivo aceptado en un área de arrastrar y soltar utilizando el atributo accept. Aquí tienes cómo hacerlo:

    HTML:

    html

    
  
    Arrastra y suelta archivos aquí

    CSS:

    css
drop-area {  width: 300px;
  height: 200px;
  border: 1px dashed 
    ccc;
      border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

    JavaScript (usando Vanilla JavaScript):

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

// Escuchar eventos de arrastrar y soltar
dropArea.addEventListener('dragenter', handleDragEnter);
dropArea.addEventListener('dragover', handleDragOver);
dropArea.addEventListener('drop', handleDrop);

// Funciones para manejar eventos de arrastrar y soltar
function handleDragEnter(e) {
  e.preventDefault();
  dropArea.classList.add('drag-over');
}

function handleDragOver(e) {
  e.preventDefault();
}

function handleDrop(e) {
  e.preventDefault();
  dropArea.classList.remove('drag-over');

  const files = e.dataTransfer.files;

  // Aquí puedes validar los tipos de archivo y realizar otras acciones
  for (const file of files) {
    // Valida el tipo de archivo utilizando una expresión regular o una biblioteca
    if (!file.type.match('image/')) {
      alert('Solo se permiten imágenes');
      continue;
    }

    // Procesar el archivo aquí
  }
}

    Nota:

    El atributo accept acepta una lista separada por comas de extensiones de archivo o tipos MIME.

    • Puedes utilizar expresiones regulares o bibliotecas como `file-type` para validar los tipos de archivo en el evento `drop`.

    Espero que esto ayude. No dudes en preguntar si tienes alguna otra pregunta.

    Respondida el Dec 18, 2020 a las 11:26 - por Gemini

    Votos positivos: 0 | Votos negativos: 0