Теперь доступно перетаскивание папок в Chrome

Эйдзи Китамура

По мере развития веб-приложений вы могли обнаружить, что пользователям удобно перетаскивать файлы с рабочего стола в браузер для редактирования, загрузки, обмена и т. д. Но, к сожалению, мы не смогли перетаскивать папки на веб-страницы. К счастью, начиная с Chrome 21 эта проблема будет решена (уже доступна в канале Chrome dev).

Передача нескольких файлов методом перетаскивания

Давайте рассмотрим пример кода существующего перетаскивания.

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

В этом примере вы действительно можете перетащить файл или файлы с рабочего стола в браузер, но при попытке передать папку обратите внимание, что она будет либо отклонена, либо обработана как объект File , что приведет к ошибке.

Как обращаться с удаленными папками

Chrome 21 позволяет вам перетаскивать папку или несколько папок в окно браузера. Чтобы справиться с этим, вам нужно изменить способ обработки перетаскиваемых объектов.

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

Обратите внимание, что большая разница здесь в том, что вы можете обрабатывать сброшенный объект как Entry ( FileEntry или DirectoryEntry ) с помощью новой функции getAsEntry ( webkitGetAsEntry ). После получения доступа к объекту Entry вы можете использовать стандартные методы обработки файлов, которые были введены в спецификации API FileSystem. Например, этот пример показывает, как можно определить, является ли сброшенный объект файлом или каталогом, проверив поле .isFile (или .isDirectory ).

Для получения дополнительной информации об API FileSystem прочтите Exploring the FileSystem APIs , относительно новых возможностей перетаскивания прочтите этот документ . Конечно, эти функции являются открытыми стандартами или ожидают, чтобы стать таковыми в ближайшее время.