O HTML5 permite arrastar e soltar o upload de pastas ou uma tree de pastas?

Eu não vi nenhum exemplo que faça isso. Isso não é permitido na especificação da API?

Estou procurando uma solução fácil de arrastar e soltar para carregar uma tree inteira de pastas de fotos.

Agora é possível, graças ao 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 

Mais informações: https://protonet.info/blog/html5-experiment-drag-drop-of-folders/

Nesta mensagem para a lista de discussão HTML 5, Ian Hickson diz:

O HTML5 agora precisa fazer upload de muitos arquivos de uma só vez. Os navegadores podem permitir que os usuários selecionem vários arquivos de uma vez, incluindo vários diretórios; isso é um pouco fora do escopo da especificação.

(Veja também a proposta original do recurso .) Portanto, é seguro assumir que ele considera o upload de pastas usando arrastar e soltar também fora do escopo. Aparentemente, cabe ao navegador servir arquivos individuais.

O upload de pastas também teria algumas outras dificuldades, conforme descrito por Lars Gunther :

Esta proposta […] deve ter duas verificações (se for possível):

  1. Tamanho máximo, para impedir que alguém faça o upload de um diretório completo de várias centenas de imagens brutas descompactadas …

  2. Filtrando mesmo se o atributo accept for omitido. Os metadados do Mac OS e as miniaturas do Windows, etc., devem ser omitidos. Todos os arquivos e diretórios ocultos devem ser excluídos por padrão.

Agora você pode fazer upload de diretórios com arrastar e soltar e inserir.

  

e para arrastar e soltar (para navegadores webkit).

Manipulando pastas de arrastar e soltar.

 

Recursos:

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

O Firefox agora suporta o upload de pastas, a partir de 15 de novembro de 2016, na v50.0: https://developer.mozilla.org/pt-BR/Firefox/Releases/50#Files_and_directories

Você pode arrastar e soltar pastas no Firefox ou pode navegar e selecionar uma pasta local para fazer o upload. Também suporta pastas aninhadas em subpastas.

Isso significa que agora você pode usar o Chrome, o Firefox, o Edge ou o Opera para fazer upload de pastas. Você não pode usar o Safari ou o Internet Explorer no momento.

Esta function lhe dará uma promise para o array de todos os arquivos descartados, como os arquivos .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); 

A especificação HTML5 NÃO diz que ao selecionar uma pasta para upload, o navegador deve fazer o upload de todos os arquivos contidos recursivamente.

Na verdade, no Chrome / Chromium, você pode fazer o upload de uma pasta, mas, ao fazer isso, basta enviar um arquivo sem sentido de 4KB, que representa o diretório. Alguns aplicativos do lado do servidor, como o Alfresco, podem detectar isso e avisar ao usuário que as pastas não podem ser carregadas:

Não é possível fazer o upload dos seguintes itens, porque eles são pastas ou têm tamanho zero no tamanho: indefinido

O HTML5 permite arrastar e soltar o upload de pastas ou uma tree de pastas?

Apenas o Chrome suporta este recurso. Ele não conseguiu ter tração e provavelmente será removido.

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

    Intereting Posts