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

Eiji Kitamura

Web uygulamaları geliştikçe, kullanıcıların düzenlemek, yüklemek, paylaşmak vb. için masaüstünden tarayıcıya dosya sürükleyip bırakmasını sağlamanız yararlı olabilir. Ancak maalesef web sayfalarına klasör sürükleyip bırakamamaktayız. Neyse ki Chrome 21'den itibaren bu sorun giderilecek (Chrome geliştirici kanalında zaten kullanılabilir).

Sürükleyip bırakmayla birden fazla dosya aktarma

Mevcut sürükle ve bırak özelliğinin bir 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, masaüstünden tarayıcınıza bir veya daha fazla dosya sürükleyip bırakabilirsiniz. Ancak bir klasör iletmeye çalıştığınızda, klasörün reddedildiğini veya File nesnesi olarak değerlendirildiğini ve bu nedenle işlemin başarısız olduğunu fark edersiniz.

Bırakılan klasörleri işleme

Chrome 21, tarayıcı penceresine bir veya daha fazla klasör bırakmanıza olanak tanır. Bu sorunları gidermek için bırakılan nesneleri kullanma ş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 en büyük farkın, getAsEntry (webkitGetAsEntry) adlı yeni işlevi kullanarak bırakılan bir nesneyi Entry (FileEntry veya DirectoryEntry) olarak değerlendirebilmeniz olduğunu unutmayın. Entry nesnesine eriştikten sonra, FileSystem API spesifikasyonunda tanıtılan standart dosya işleme yöntemlerini kullanabilirsiniz. Örneğin, bu örnekte .isFile (veya .isDirectory) alanını inceleyerek bırakılan bir nesnenin dosya mı yoksa dizin mi olduğunu nasıl algılayabileceğiniz gösterilmektedir.

FileSystem API ile ilgili daha fazla bilgi için FileSystem API'lerini keşfetme başlıklı makaleyi, yeni sürükle ve bırak özelliğiyle ilgili daha fazla bilgi için bu dokümanı okuyun. Elbette bu özellikler açık standartlardır veya yakında açık standart hâline gelecektir.