Artık bir klasörü Chrome'a sürükleyip bırakabilirsiniz

Eiji Kitamura

Twitter GitHub Glitch Mastodon

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.