Com a evolução dos aplicativos da Web, talvez você tenha achado útil permitir que os usuários arrastem e soltem arquivos da área de trabalho no navegador para editar, fazer upload, compartilhar etc. Mas, infelizmente, não conseguimos arrastar e soltar pastas em páginas da Web. Felizmente, a partir do Chrome 21, esse problema será resolvido (já disponível no Canal de Desenvolvedor do Chrome).
Transmitir vários arquivos com o recurso de arrastar e soltar
Vejamos um exemplo de código do recurso de arrastar e soltar.
<div id="dropzone"></div>
var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
var length = e.dataTransfer.files.length;
for (var i = 0; i < length; i++) {
var file = e.dataTransfer.files[i];
... // do whatever you want
}
};
Neste exemplo, é possível arrastar e soltar um ou mais arquivos da área de trabalho para o navegador, mas quando você tentar transmitir uma pasta, ela vai ser rejeitada ou tratada como um objeto File, resultando em falha.
Como lidar com pastas descartadas
O Chrome 21 permite que você solte uma ou várias pastas na janela do navegador. Para lidar com isso, você precisa mudar a maneira como lida com objetos soltos.
<div id="dropzone"></div>
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
}
}
};
Uma grande diferença aqui é que você pode tratar um objeto solto como Entry (FileEntry ou DirectoryEntry) usando a nova função chamada getAsEntry (webkitGetAsEntry).
Depois de conseguir acesso ao objeto Entry, você pode usar os métodos padrão de processamento de arquivos introduzidos na especificação da API FileSystem. Por exemplo, este exemplo mostra como detectar se um objeto solto é um arquivo ou um diretório examinando o campo .isFile (ou .isDirectory).
Para mais informações sobre a API FileSystem, leia este documento (em inglês) e leia sobre o novo recurso de arrastar e soltar Como explorar as APIs FileSystem. É claro que esses recursos são padrões abertos ou estão aguardando para se tornarem um em breve.