Web uygulamaları geliştikçe, düzenleme, yükleme, paylaşma gibi işlemler için kullanıcıların masaüstünden tarayıcıya dosya sürükleyip bırakmasını kullanışlı hale getirebilirsiniz. Ancak, maalesef klasörleri web sayfalarına sürükleyip bırakamadık. Neyse ki Chrome 21'den itibaren bu sorun çözülmüş olacak (zaten Chrome geliştirici kanalında mevcut).
Sürükleyip bırakma yöntemiyle birden fazla dosya iletme
Mevcut sürükle ve bırak özelliğinin kod örneğine göz atalım.
<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
}
};
Bu örnekte, bir dosyayı veya dosyaları masaüstünden tarayıcınıza sürükleyip bırakabilirsiniz, ancak bir klasörü iletmeye çalıştığınızda, bunun reddedildiğine veya hataya neden olacak bir File
nesnesi olarak değerlendirileceğine dikkat edin.
Bırakılan klasörler nasıl işlenecek?
Chrome 21, bir klasörü veya birden fazla klasörü tarayıcı penceresine bırakmanıza olanak tanır. Bunları işlemek için, bırakılan nesneleri ele alma şeklinizi değiştirmeniz gerekir.
<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
}
}
};
Buradaki önemli bir fark, bırakılan bir nesneyi getAsEntry
(webkitGetAsEntry
) adlı yeni işlevi kullanarak Entry
(FileEntry
veya DirectoryEntry
) olarak değerlendirebilmenizdir.
Entry
nesnesine erişim elde ettikten sonra, FileSystem API spesifikasyonunda kullanıma sunulan standart dosya işleme yöntemlerini kullanabilirsiniz. Örneğin, bu örnekte, .isFile
(veya .isDirectory
) alanını inceleyerek bırakılan nesnenin dosya mı yoksa dizin mi olduğunu nasıl tespit edebileceğiniz gösterilmektedir.
FileSystem API hakkında daha fazla bilgi için yeni sürükle ve bırak özelliğiyle ilgili olarak Dosya Sistemi API'larını Keşfetme bölümünü okuyun ve bu belgeyi okuyun. Elbette bu özellikler açık standartlardır veya yakında bunlara dönüşmeyi de bekliyorlar.