Przeciąganie i upuszczanie folderu w Chrome jest już dostępne

Eiji Kitamura

Wraz z rozwojem aplikacji internetowych możesz zauważyć, że użytkownicy chętnie przeciągają i upuszczają pliki z pulpitu do przeglądarki, aby je edytować, przesłać, udostępnić itp. Niestety nie udało nam się wprowadzić przeciągania i upuszczania folderów na stronach internetowych. Na szczęście, począwszy od wersji Chrome 21, ten problem zostanie rozwiązany (jest już dostępny w wersji deweloperskiej Chrome).

Przekazywanie wielu plików przez przeciąganie i upuszczanie

Przyjrzyjmy się przykładowemu kodowi dotyczącym funkcji przeciągania i upuszczania, która jest już dostępna.

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

W tym przykładzie możesz przeciągnąć pliki z pulpitu do przeglądarki, ale gdy spróbujesz przekazać folder, zostanie on odrzucony lub potraktowany jako obiekt File, co spowoduje niepowodzenie.

Jak obsługiwać usunięte foldery

Chrome 21 umożliwia przenoszenie folderu lub wielu folderów do okna przeglądarki. Aby sobie z tym poradzić, musisz zmienić sposób obsługi obiektów upuszczonych.

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

Duża różnica polega na tym, że możesz traktować obiekt z przeniesioną zawartością jako Entry (FileEntry lub DirectoryEntry), używając nowej funkcji o nazwie getAsEntry (webkitGetAsEntry). Po uzyskaniu dostępu do obiektu Entry możesz używać standardowych metod obsługi plików, które zostały wprowadzone w specyfikacji interfejsu FileSystem API. Na przykład ten przykład pokazuje, jak sprawdzić, czy upuszczony obiekt jest plikiem czy katalogiem, przez zbadanie pola .isFile (lub .isDirectory).

Więcej informacji o interfejsie FileSystem API znajdziesz w artykule Poznawanie interfejsów FileSystem API, a o nowych możliwościach przeciągania i upuszczania – w tym dokumencie. Oczywiście te funkcje są otwartymi standardami lub wkrótce nimi zostaną.