Ahora puedes arrastrar y soltar una carpeta en Chrome.

Eiji Kitamura

A medida que las apps web evolucionan, es posible que te resulte útil permitir que los usuarios arrastren y suelten archivos desde el escritorio al navegador para editarlos, subirlos, compartirlos, etc. Lamentablemente, no pudimos arrastrar y soltar carpetas en páginas web. Por suerte, a partir de Chrome 21, se abordará este problema (ya está disponible en el canal para desarrolladores de Chrome).

Cómo pasar varios archivos con arrastrar y soltar

Veamos un ejemplo de código del arrastrar y soltar existente.

<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
    }
};

En este ejemplo, puedes arrastrar y soltar un archivo o varios desde el escritorio al navegador, pero cuando intentes pasar una carpeta, observa que se rechazará o se tratará como un objeto File, lo que provocará un error.

Cómo manejar las carpetas que se dejan caer

Chrome 21 te permite soltar una o varias carpetas en la ventana del navegador. Para controlarlos, debes cambiar la forma en que controlas los objetos que se dejan caer.

<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
    }
    }
};

Ten en cuenta que una gran diferencia aquí es que puedes tratar un objeto dejado como Entry (FileEntry o DirectoryEntry) con la nueva función llamada getAsEntry (webkitGetAsEntry). Después de obtener acceso al objeto Entry, puedes usar los métodos de manejo de archivos estándar que se introdujeron en la especificación de la API de FileSystem. Por ejemplo, en este ejemplo, se muestra cómo puedes detectar si un objeto que se soltó es un archivo o un directorio examinando el campo .isFile (o .isDirectory).

Para obtener más información sobre la API de FileSystem, consulta Exploring the FileSystem APIs. En cuanto a la nueva función de arrastrar y soltar, consulta este documento. Por supuesto, estas funciones son estándares abiertos o están a punto de convertirse en uno.