Wraz z rozwojem aplikacji internetowych często pomaga Ci możliwość przeciągania i upuszczania plików z komputera do przeglądarki w celu edytowania, przesyłania, udostępniania itp. Niestety nie byliśmy w stanie przeciągać i upuszczać folderów na strony internetowe. Na szczęście od wersji Chrome 21 ten problem zostanie rozwiązany (jest już dostępny w wersji deweloperskiej Chrome).
Przekazywanie wielu plików za pomocą przeciągania i upuszczania
Przyjrzyjmy się przykładowemu kodowi istniejącego typu przeciągnij i upuść.
<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 i upuścić je w przeglądarce, ale gdy próbujesz przekazać folder, pamiętaj, że zostaje on odrzucony lub traktowany jako obiekt File, co skutkuje błędem.
Jak obsługiwać upuszczone foldery
W Chrome 21 możesz upuścić folder lub wiele folderów w oknie przeglądarki. Aby je obsłużyć, musisz zmienić sposób, w jaki postępujesz z upuszczonymi obiektami.
<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 upuszczony obiekt możesz traktować jako Entry (FileEntry lub DirectoryEntry), używając nowej funkcji o nazwie getAsEntry (webkitGetAsEntry).
Po uzyskaniu dostępu do obiektu Entry możesz użyć standardowych metod obsługi plików wprowadzonych w specyfikacji interfejsu FileSystem API. Ten przykład pokazuje, jak można sprawdzić, czy upuszczony obiekt jest plikiem czy katalogiem, sprawdzając pole .isFile (lub .isDirectory).
Więcej informacji o interfejsie FileSystem API znajdziesz w artykule Poznawanie interfejsów API FileSystem (w języku angielskim) dotyczącym nowej funkcji przeciągania i upuszczania w tym dokumencie. Oczywiście są to funkcje otwarte, ale już niedługo mogą się nimi stać.