¿HTML5 permite la carga de carpetas arrastradas o un árbol de carpetas?

No he visto ejemplos que hagan esto. ¿Esto no está permitido en la especificación api?

Estoy buscando una solución fácil de arrastrar y soltar para cargar todo un árbol de carpetas de fotos.

Ahora es posible, gracias a Chrome> = 21.

 function traverseFileTree(item, path) { path = path || ""; if (item.isFile) { // Get file item.file(function(file) { console.log("File:", path + file.name); }); } else if (item.isDirectory) { // Get folder contents var dirReader = item.createReader(); dirReader.readEntries(function(entries) { for (var i=0; i 

Más información: https://protonet.info/blog/html5-experiment-drag-drop-of-folders/

En este mensaje a la lista de correo de HTML 5, Ian Hickson dice:

HTML5 ahora tiene que cargar muchos archivos a la vez. Los navegadores pueden permitir a los usuarios seleccionar varios archivos a la vez, incluso a través de múltiples directorios; eso está un poco fuera del scope de la especificación.

(También vea la propuesta de la característica original.) Por lo tanto, es seguro suponer que considera que cargar carpetas usando “arrastrar y soltar” también está fuera del scope. Aparentemente depende del navegador servir archivos individuales.

Cargar carpetas también tendría otras dificultades, como lo describió Lars Gunther :

Esta […] propuesta debe tener dos controles (si es factible):

  1. Tamaño máximo, para evitar que alguien cargue un directorio completo de varios cientos de imágenes sin comprimir …

  2. Filtrando incluso si se omite el atributo de aceptación. Los metadatos de Mac OS y las miniaturas de Windows, etc. deben omitirse. Todos los archivos y directorios ocultos deben ser excluidos por defecto.

Ahora puede subir directorios con ambos arrastrar y soltar e ingresar.

  

y para arrastrar y soltar (Para navegadores webkit).

Manejo de arrastrar y soltar carpetas.

 

Recursos:

http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available

Firefox ahora admite la carga de carpetas, desde el 15 de noviembre de 2016, en v50.0: https://developer.mozilla.org/en-US/Firefox/Releases/50#Files_and_directories

Puede arrastrar y soltar carpetas en Firefox o puede buscar y seleccionar una carpeta local para cargar. También admite carpetas anidadas en subcarpetas.

Eso significa que ahora puede usar Chrome, Firefox, Edge u Opera para cargar carpetas. No puede usar Safari o Internet Explorer en este momento.

Esta función le dará la promesa de una matriz de todos los archivos eliminados, como .files :

 function getFilesWebkitDataTransferItems(dataTransferItems) { function traverseFileTreePromise(item, path='') { return new Promise( resolve => { if (item.isFile) { item.file(file => { file.filepath = path + file.name //save full path files.push(file) resolve(file) }) } else if (item.isDirectory) { let dirReader = item.createReader() dirReader.readEntries(entries => { let entriesPromises = [] for (let entr of entries) entriesPromises.push(traverseFileTreePromise(entr, path + item.name + "/")) resolve(Promise.all(entriesPromises)) }) } }) } let files = [] return new Promise((resolve, reject) => { let entriesPromises = [] for (let it of dataTransferItems) entriesPromises.push(traverseFileTreePromise(it.webkitGetAsEntry())) Promise.all(entriesPromises) .then(entries => { //console.log(entries) resolve(files) }) }) } 

Uso:

 dropArea.addEventListener("drop", function(event) { event.preventDefault(); var items = event.dataTransfer.items; getFilesFromWebkitDataTransferItems(items) .then(files => { ... }) }, false); 

La especificación HTML5 NO dice que al seleccionar una carpeta para cargar, el navegador debe cargar todos los archivos contenidos recursivamente.

De hecho, en Chrome / Chromium, puede cargar una carpeta, pero cuando lo hace, solo carga un archivo de 4KB sin sentido, que representa el directorio. Algunas aplicaciones del lado del servidor como Alfresco pueden detectar esto y advertir al usuario que las carpetas no se pueden cargar:

No se puede cargar lo siguiente porque son carpetas o tienen un tamaño de cero bytes: indefinido

¿HTML5 permite la carga de carpetas arrastradas o un árbol de carpetas?

Solo Chrome admite esta característica. No ha tenido tracción y es probable que se elimine.

Ref: https://developer.mozilla.org/en/docs/Web/API/DirectoryReader#readEntries