Ahora puedes arrastrar y soltar una carpeta en Chrome.

Eiji Kitamura
Eiji Kitamura

A medida que evolucionan las aplicaciones web, puede que te resulte útil permitir que los usuarios arrastren y suelten archivos del escritorio al navegador para editarlos, subirlos, compartirlos, etc. Sin embargo, no hemos podido arrastrar y soltar carpetas en páginas web. Afortunadamente, a partir de Chrome 21, este problema se solucionará (ya disponible en el canal para desarrolladores de Chrome).

Pasar varios archivos con la función de arrastrar y soltar

Veamos una muestra de código de la función de 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 uno o varios archivos del escritorio a tu navegador, pero cuando intentes pasar una carpeta, ten en cuenta que se rechazará o se tratará como un objeto File, lo que generará una falla.

Cómo manejar las carpetas soltadas

Chrome 21 te permite soltar una o varias carpetas en la ventana del navegador. Para controlar esto, debes cambiar la forma en que controlas los objetos soltados.

<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 descartado como Entry (FileEntry o DirectoryEntry) mediante una nueva función llamada getAsEntry (webkitGetAsEntry). Después de obtener acceso al objeto Entry, puedes usar los métodos estándar de manejo de archivos que se agregaron en la especificación de la API de FileSystem. Por ejemplo, en este ejemplo se muestra cómo puedes detectar si un objeto descartado es un archivo o un directorio si examinas el campo .isFile (o .isDirectory).

Si deseas obtener más información sobre la API de FileSystem, consulta Cómo explorar las API de FileSystem y consulta la nueva función de arrastrar y soltar, en este documento. Por supuesto, estas funciones son estándares abiertos o están esperando convertirse en una pronto.