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

Question

No he visto ningún ejemplo que haga 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.

Answer 1

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<entries.length; i++) { 
     traverseFileTree(entries[i], path + item.name + "/"); 
     } 
    }); 
    } 
} 

dropArea.addEventListener("drop", function(event) { 
    event.preventDefault(); 

    var items = event.dataTransfer.items; 
    for (var i=0; i<items.length; i++) { 
    // webkitGetAsEntry is where the magic happens 
    var item = items[i].webkitGetAsEntry(); 
    if (item) { 
     traverseFileTree(item); 
    } 
    } 
}, false); 

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

Answer 2

En this message a la lista de correo HTML 5 Ian Hickson dice:

HTML5 ahora tiene que subir muchos archivos a la vez . Los navegadores pueden permitir a los usuarios elegir varios archivos a la vez, incluido en múltiples directorios; eso es un poco fuera del alcance de la especificación.

(Véase también el original feature proposal.) Por lo tanto, es seguro asumir que considera la posibilidad de subir carpetas usando arrastrar y soltar también fuera del ámbito. Aparentemente depende del navegador servir archivos individuales.

carpetas Carga también tendrían algunas otras dificultades, como se describe por Lars Gunther:

Esta [...] propuesta necesidad tienen dos cheques (si es factible en absoluto):

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

2. Filtrado incluso si se omite el atributo de aceptación. Los metadatos de Mac OS y las miniaturas de Windows, etc. deben ser omitidos. Todos los archivos ocultos y directorios deben estar predeterminados como excluidos.

Answer 3

La especificación HTML 5 no dice que la hora de seleccionar una carpeta para la carga, el navegador debe cargar archivos de todos los contenidos de forma recursiva.

En realidad, 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 de que las carpetas no se pueden cargar:

Answer 4

Ahora puede cargar directorios con la función de arrastrar, soltar e ingresar.

<input type='file' webkitdirectory > 

y para arrastrar y soltar (Para navegadores webkit).

Manejo de arrastrar y soltar carpetas.

<div id="dropzone"></div> 
<script> 
var dropzone = document.getElementById('dropzone'); 
dropzone.ondrop = function(e) { 
    var length = e.dataTransfer.items.length; 
    for (var i = 0; i < length; i++) { 
    var entry = e.dataTransfer.items[i].webkitGetAsEntry(); 
    if (entry.isFile) { 
     ... // do whatever you want 
    } else if (entry.isDirectory) { 
     ... // do whatever you want 
    } 
    } 
}; 
</script> 

Recursos:

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

Answer 5

¿Se HTML5 permiten arrastrar y soltar carpetas o carga de 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

Answer 6

Firefox ahora soporta la subida de carpetas, el 15 de noviembre, 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 un local de carpeta 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.

Answer 7

Esta función le dará una promesa para el conjunto de todos los archivos se redujo, como <input type="file"/>.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);