HTML5: Input File con Selección de Carpeta

En este tutorial, me gustaría mostrarle cómo implementar una Input File HTML 5 en la que puede seleccionar una carpeta completa en lugar de algunos archivos individuales.

Primero, echamos un vistazo al HTML requerido. Estamos usando un campo de entrada normal con el tipo "file". Para poder seleccionar varios archivos a la vez, hemos agregado el atributo "multiple". Además, hemos agregado un evento OnChange para leer y procesar la carpeta respectivamente los archivos de la carpeta seleccionada con JavaScript. Veremos el código JavaScript en la siguiente sección.

<input type="file" onchange="selectFolder(event);" multiple="multiple" 
  webkitdirectory mozdirectory msdirectory odirectory directory>

Para hacer una entrada de directorio a partir de la entrada de archivo, además, hemos especificado los atributos webkitdirectory, mozdirectory, msdirectory, odirectory y directory. En realidad, especificar solo el atributo "directory" debería ser suficiente, pero como también queremos admitir algunos navegadores más antiguos, también hemos agregado los atributos específicos del navegador con el prefijo webkit, moz-, ms- y o-. Si el navegador admite uno de esos atributos, en lugar del cuadro de diálogo del archivo, ahora se muestra el cuadro de diálogo del directorio del sistema.

Acceder a las Carpetas seleccionadas en JavaScript

Por último, también quiero mostrarle cómo trabajar con la carpeta seleccionada y cómo puede acceder a los archivos de la carpeta.

Para ello, utilizamos el siguiente JavaScript, que se ejecutará automáticamente al cambiar la selección de carpeta, porque hemos asignado la función al evento OnChange del campo de entrada.

function selectFolder(e) {
   for (var i = 0; i < e.target.files.length; i++) {
      var s = e.target.files[i].name + '\n';
      s += e.target.files[i].size + ' Bytes\n';
      s += e.target.files[i].type;
      alert(s);
   }
}

Obtenemos todos los archivos ubicados en la carpeta seleccionada en la matriz e.target.files.

En el código anterior, simplemente estamos recorriendo esta matriz (el número de archivos es e.target.files.length) para mostrar información sobre los archivos, como el nombre, el tamaño y el tipo usando una alert.

Soporte del Navegador

Este tipo de entrada es compatible con los navegadores Google Chrome (de la versión 30), Microsoft Edge (de la versión 14), Mozilla Firefox (de la versión 50) y Opera (de la versión 17). En contraste, la selección de carpetas no es compatible con Internet Explorer y muchos navegadores móviles. Esto también se debe al hecho de que muchos sistemas móviles no permiten que se seleccionen carpetas en su sistema.