Com a evolução dos apps da Web, talvez você tenha achado útil permitir que os usuários arrastem e soltem arquivos do computador para o navegador para editar, fazer upload, compartilhar etc. Infelizmente, não é possível 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).
Como transmitir vários arquivos com arrastar e soltar
Vamos conferir um exemplo de código 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, você pode arrastar e soltar um ou mais arquivos do computador para o navegador, mas, ao tentar passar uma pasta, ela será rejeitada ou tratada como um objeto File, resultando em uma falha.
Como lidar com pastas descartadas
O Chrome 21 permite que você solte uma ou várias pastas na janela do navegador. Para processá-los, você precisa mudar a forma como processa objetos descartados.
<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 descartado como Entry (FileEntry ou DirectoryEntry) usando a nova função chamada getAsEntry (webkitGetAsEntry).
Depois de conseguir acesso ao objeto Entry, você pode usar métodos padrão de processamento de arquivos que foram introduzidos na especificação da API FileSystem. Por exemplo, este exemplo mostra como detectar se um objeto descartado é um arquivo ou um diretório examinando o campo .isFile (ou .isDirectory).
Para mais informações sobre a API FileSystem, leia Como usar as APIs FileSystem. Para saber mais sobre o novo recurso de arrastar e soltar, leia este documento. Claro, esses recursos são padrões abertos ou estão esperando para se tornarem um em breve.